Three.js - implementing a billboard effect that preserves orientation through camera pans

Question

Three.js - implementing a billboard effect that preserves orientation through camera pans

My situation involves a plane geometry that always faces the camera using the following line of code in the update loop:

plane.lookAt(camera.position);

While I am utilizing OrbitControls to manipulate the camera, the plane successfully maintains its orientation towards the camera when rotating or zooming in the scene.

However, whenever I pan the scene, the plane still faces the camera but rotating the camera causes the plane to also rotate, resulting in situations where text on the plane may appear upside down or rotated to the viewer.

Is there a way to ensure that the plane stays aligned with the camera regardless of camera movements?

Check out an example on jsFiddle: http://jsfiddle.net/Stemkoski/ptVLD/

javascript rotation three.js

Answer 1

Answer №1

If you're looking for a quick fix, just insert the following line into your animation cycle:

plane.quaternion.copy( camera.quaternion );

Or, you might consider utilizing a THREE.Sprite

Version r.143 of three.js

Answer 2

If you're looking for a quick fix, just insert the following line into your animation cycle:

plane.quaternion.copy( camera.quaternion );

Or, you might consider utilizing a THREE.Sprite

Version r.143 of three.js

Answer 3

Answer №2

Whenever I reach out to StackOverflow, my thoughts just magically fall into place :)

After some contemplation, a more solid approach (for enhanced billboarding) appears to be:

plane.rotation.setFromRotationMatrix( camera.matrix );

Although I have updated the jsFiddle code link in the original post accordingly, I am noticing some slight "shuddering" of the camera/plane when rotating the camera post panning. It seems like there is still room for improvement, so any suggestions to refine this solution would be wholeheartedly welcomed and acknowledged.

Answer 4

Whenever I reach out to StackOverflow, my thoughts just magically fall into place :)

After some contemplation, a more solid approach (for enhanced billboarding) appears to be:

plane.rotation.setFromRotationMatrix( camera.matrix );

Although I have updated the jsFiddle code link in the original post accordingly, I am noticing some slight "shuddering" of the camera/plane when rotating the camera post panning. It seems like there is still room for improvement, so any suggestions to refine this solution would be wholeheartedly welcomed and acknowledged.

Answer 5

Answer №3

The sensation of "shuddering" occurs when the camera position is not utilized for the new frame. Instead, the plane is updated based on the previous camera position, and then the camera is updated based on the controls.

function animate() {
    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

To eliminate the "shudder," simply swap the order of these two operations.

function animate() {
    controls.update();

    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

Answer 6

The sensation of "shuddering" occurs when the camera position is not utilized for the new frame. Instead, the plane is updated based on the previous camera position, and then the camera is updated based on the controls.

function animate() {
    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

To eliminate the "shudder," simply swap the order of these two operations.

function animate() {
    controls.update();

    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

Three.js - implementing a billboard effect that preserves orientation through camera pans

Answer №1

Answer №2

Answer №3

Similar questions

Chrome Developer Tools - Array Length Discrepancies

Control the options of the Select menu using ajax

How can we combine refs in React to work together?

Populating a clickable list and form with a complex JavaScript object

The Angular 9 custom directive is malfunctioning on mobile devices

Creating a Node.JS environment with Express and Socket.IO: A beginner's guide

Using ng-mouseover along with ng-if and an animated class causes issues

It is imperative that the 'Access-Control-Allow-Origin' header value in the response is not set to '*' when the request's credentials mode is 'include'

Error message: "Unable to find a windows instance" encountered while conducting tests on Paho MQTT Client using mocha and typescript

Stop the print dialog box from causing the page to refresh

Is NextJS on-demand revalidation compatible with Next/link?

Server-side props become inaccessible on the client side due to middleware usage

What is the best way to perform an action in the database using JavaScript without needing to refresh the page

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

Using jQuery to scroll a div element

Using a for loop in JavaScript to fetch and display a specified number of results from an API

I have been dynamically inserting div elements into the DOM using JavaScript, using the appendChild method to add them and later removing them with removeChild. Strangely, when trying to append a div

What could be causing my ul list to not be populated by ajax?

Utilizing 'Ng-If' causes a glitch in the program during the execution of a $( '#x' ).change event or when adding a new item with AngularFire $add