I'm working on an app that allows me to rotate the camera in order to view a specific entity, but I'm encountering a problem where the rotation is too abrupt. How can I make it transition more smoothly?
I attempted to attach an animation component to the camera, but unfortunately, the look-controls component overrides the rotation.
(Click here) to access the code.
Due to the fact that look-controls overrides the rotation component on the camera, direct setting or animating of rotation is not possible.
An alternative solution would involve disabling look controls (or removing it), then executing the animation on rotation. Once the animation is complete, re-enable (or add back) the look-controls component.
Another approach is to utilize THREEjs camera control for setting and animating the camera's rotation. The Animation component solely functions with other component properties. Hence, you'll need to create a custom component, animate a schema property within that component, and in the update() method inside the component, adjust the threejs rotation of the camera based on the schema property.
AFRAME.registerComponent('camcontrol',{
schema: {
rot: { type: 'vec3'} ,
animactive: { type: 'boolean', default: false } },
init: function(){
// Initialize component here
},
update: function(){
// Update component logic here
},
lookAnimation: function(pos){
// Method for handling camera look animation
}
});
<a-scene>
<a-entity id="button1" geometry="primitive: box" position="1 0 -5" class="clickable" material="color: tomato" button3d></a-entity>
<a-entity id="button2" geometry="primitive: octahedron; radius: 0.2" position="-4 0 -3" class="clickable" material="color: #4466BB" button3d></a-entity>
<a-entity id="button3" geometry="primitive: sphere; radius: 0.2" position="2 0 -2" class="clickable" material="color: green" button3d></a-entity>
<a-entity id="button4" geometry="primitive: cone; radius: 0.2" position="-3 0 -8" class="clickable" material="color: purple" button3d></a-entity>
<a-entity id="button5" geometry="primitive: icosahedron; radius: 0.2" position="0 0 0" class="clickable" material="color: blue" button3d></a-entity>
<a-sky color="#bbddff"></a-sky>
<a-entity id="camrig" position="0 0 0" ></a-entity>
<a-entity id="camera" position="0 0 0" fov="100" camera look-controls camcontrol
animation__look="property: camcontrol.rot; startEvents: camlook; dur:500"></a-entity>
</a-entity>
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
</a-scene>
Explore the glitch here
As a newcomer to JavaScript, my programming skills are not very strong at the moment. I have been working on a web scraper that returns an array of information including names, posts, bios, and more using the following code: let infoOfPost = await newTab(b ...
Within my CKEditor, I am in need of some predefined text that cannot be edited, followed by the rest of my content. This involves combining the predefined verbiage (wrapped in a p tag) with a string variable displayed within a specific div in CKEditor. The ...
Struggling to efficiently handle an array of JSON objects using JavaScript. The data fetched from my PHP file looks like this: Array ( [0] => Array ( [id] => 1 [name] => holly [text] => Text 1 ...
Currently working with Three.js and aiming to refactor the code. I am looking to create a dedicated class called "Floor" for generating floors: import { Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, sRG ...
In my Node.js project, I have created a few classes as Controllers for handling routes. I would like these classes to work on a singleton basis, although it's not mandatory. Main Controller class class RouteController { static getInstance() { ...
Currently, I am facing an issue while attempting to incorporate both jquery.validate and jquery.uploadfile on the same page. The error message I'm receiving is: TypeError: validator is undefined if ( validator.settings.rules ) { Interestingly, if ...
Greetings! I am looking to display information about schools and also include images of the schools or programs. I have separate URLs for images and information stored in different states, with images saved on S3 and information in PostgreSQL. This has le ...
At the moment, my React application is running on port 3000 using npm start. I have made the decision to incorporate MySQL into the web app by executing yarn add express mysql. In order for this to work, I have configured server.js to listen on port 3001 ...
My JSON array of objects has the following structure: https://i.sstatic.net/1IUVE.png When generating a <ul>, I need to fetch an ID from an API for each <li>: <ul> <li v-for="genre in movie.genre_ids"> {{ genre }} ...
Seeking a solution to dynamically assign access rights such as edit, view, and delete values in the database for users using PHP. This will allow the super admin to easily change privileges within the application interface without having to manually upda ...
I have developed two custom directives known as app-content and app-content-item. These directives are intended to be utilized in upcoming projects to provide a basic structure with simple styling. They will be incorporated into a module and should be nest ...
I'm encountering an issue trying to import modules from the examples folder in THREE.js, such as OBJLoader, into my Nuxt Project. While I can successfully import the main THREE folder, attempting to import modules from the examples folder triggers an ...
Looking to align two similar meshes in terms of shape? In three.js, what are the most effective methods for achieving a perfect fit using source and target alignment like in ICP? Both meshes have default positions and rotations at 000. Check out my two m ...
I am looking to utilize a new window for printing a portion of HTML content. var cssLink = document.getElementByTagName('link')[2]; var prtContent = document.getElementById('print_body'); var WinPrint = window.open(' ...
I have a listview that is generated by a loop: for(var i = 0; i < data.length; i++) { var garage = data[i]; $("#content-p").append( "<ul data-role=\"listview\">" + "<li><a href=\"#\" i ...
How can I successfully include a PHP variable in a JavaScript window.location function? The current code snippet below does not seem to be working for me. echo '<script>location.href = "reportConsumption.php?creategenReport="'.$genid.&apos ...
Apologies for the confusion, I realize my question may not have been clear enough. Some of the g elements within the div actually consist of groups of svg elements. You can take a look at an example in this JSFiddle link. These groupings allow for incorpor ...
I've developed a slack bot with interactive buttons. Once a user clicks a button, I want to send a direct message to that user, displaying their profile image instead of the bot's profile image. I'm currently using the Slack API method chat. ...
Is there a way to automatically insert a value from the URL into the HTML code? For example: If my URL is: www.website.com/page?destination=other_page I want to copy everything after the "?" and place it in the action attribute of a form: <form act ...
I developed a unique custom weekdays check input field using React.js to display which days are open for customers. By looping through a hardcoded array, each day is rendered with its corresponding input checkbox. The first row shows Monday through Thursda ...