Aligning a Three JS group's rotation with the camera for a View Cube or Orientation Cube

Question

Aligning a Three JS group's rotation with the camera for a View Cube or Orientation Cube

I am attempting to create a Blender-inspired orientation view using Three JS, as shown in the image linked below:

https://i.sstatic.net/7Ru4H.png

My approach involves rotating three vector points (representing X, Y, and Z bubbles) based on the camera rotation. I then plan to use these points to draw circles on a canvas, connecting them with lines to the center. The Z direction will determine the drawing order.

Currently, I am utilizing a secondary Three.js scene to visualize the position of these points while experimenting with different rotations to align them with the camera's orientation. So far, I have encountered challenges and attempted various strategies that have not yielded the desired results.

A demonstration of my current progress is available in this JS Fiddle:

https://jsfiddle.net/j9mcL0x4/4/ (works in Chrome but not loading in Brave)

While panning the camera, the movement affects the 3 cubes in the second scene, but I haven't been able to achieve the correct rotation.

The X, Y, and Z points are represented by a group of Vector3 objects structured as follows:

this.ref = [
  [new THREE.Vector3(1,0,0), 0xFF0000],
  [new THREE.Vector3(0,1,0), 0x00FF00],
  [new THREE.Vector3(0,0,1), 0x0000FF],
]

To represent each cube, I construct it and add it to a group:

this.group = new THREE.Group();
for(var pos of this.ref) {
  var geometry = new THREE.BoxGeometry(.25,.25,.25);
  var material = new THREE.MeshBasicMaterial({
    color: pos[1]
  });
  var cube = new THREE.Mesh(geometry, material);
  cube.position.copy(pos[0]);
  this.group.add(cube);
}

this.scene.add(this.group);

In my animate function, I am working on computing the necessary rotation for the group to align with the main view:

var quaternion = new THREE.Quaternion();
camera.getWorldQuaternion( quaternion );

let rotation = new THREE.Euler();
rotation.setFromQuaternion(quaternion);

var dir = new THREE.Vector3();
dir.subVectors( camera.position, controls.target ).normalize();

orientationHelper.group.rotation.set(dir.x, dir.y, dir.z);
orientationHelper.animate();

My current implementation is incorrect, and I have experimented with several approaches, including:

Calculating a point in front of the camera to direct the group using lookAt()
Utilizing orbit controls target to determine the viewing direction
Working with camera local rotation

Note Rather than rotating the camera in the second scene to match the primary view, I aim to rotate the vectors themselves. This would enable me to project these points onto a basic canvas for drawing circles and lines more efficiently than using sprites in 3D.

Examples of the desired output include:

https://i.sstatic.net/ALTfD.png

https://i.sstatic.net/voC7s.png

Update

Rabbid76 has successfully resolved this issue. For those interested in implementing a Blender Style orientation cube in their projects, the complete source code can be accessed here:

https://github.com/jrj2211/three-orientation-gizmo/

Alternatively, the package can be downloaded via npm:

https://www.npmjs.com/package/three-orientation-gizmo

javascript vector three.js quaternions coordinate-transformation

Answer 1

Answer №1

When looking at the view space, remember that the X-axis points to the right, the Y-axis points upward, and the Z-axis points out of the canvas.
To start, you need to select an initial position for the OrientationHelper camera along the positive Z-axis:

class OrientationHelper {
    constructor(canvas) {
        // [...]

        this.camera = new THREE.PerspectiveCamera(75, size / size, 0.1, 1000);
        this.camera.position.set(0, 0, 2);

        // [...]

Next, it is recommended to set the orientation of the group within the OrientationHelper scene using a matrix:

class OrientationHelper {
    // [...]

    setCameraRotation(rotation) {
        this.group.setRotationFromMatrix(rotation);
    }

    // [...]

The view matrix is essentially the inverse matrix of the one defining the camera's position and orientation. In order to visualize the camera's orientation through the view matrix, create a rotation matrix from camera.rotation, compute the Inverse matrix, and then set the orientation of the OrientationHelper based on the computed matrix:

let rotMat = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
let invRotMat = new THREE.Matrix4().getInverse(rotMat); 

orientationHelper.setCameraRotation(invRotMat);
orientationHelper.update();

Take a look at the example below:

class OrientationHelper {
  constructor(canvas) {
    this.canvas = canvas;
    
    this.ref = [
      [new THREE.Vector3(1,0,0), 0xFF0000],
      [new THREE.Vector3(0,1,0), 0x00FF00],
      [new THREE.Vector3(0,0,1), 0x0000FF],
    ]

    var size = 200;
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, size / size, 0.1, 1000);
    this.camera.position.set(0, 0, 2);

    this.renderer = new THREE.WebGLRenderer({alpha: true});
    this.renderer.setSize(size, size);
    canvas.appendChild(this.renderer.domElement);
    
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    
    var geometry = new THREE.SphereGeometry( .1, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
    var sphere = new THREE.Mesh( geometry, material );
    this.scene.add( sphere );

    this.group = new THREE.Group();
    for(var pos of this.ref) {
      var geometry = new THREE.BoxGeometry(.25,.25,.25);
      var material = new THREE.MeshBasicMaterial({
        color: pos[1]
      });
      var cube = new THREE.Mesh(geometry, material);
      cube.position.copy(pos[0]);
      this.group.add(cube);
    }

    this.scene.add(this.group);
  }

  setCameraRotation(rotation) {
    this.group.setRotationFromMatrix(rotation);
  }
  
  update() {
  this.renderer.render(this.scene, this.camera);
  }
}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(0, 3, 3);
controls.update();

//controls.autoRotate = true;

var size = 10;
var divisions = 10;

var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

var axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

 // material
  var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
  });

var geometry = new THREE.BoxGeometry();

 // colors
  red = new THREE.Color(1, 0, 0);
  green = new THREE.Color(0, 1, 0);
  blue = new THREE.Color(0, 0, 1);
  var colors = [red, green, blue];
  
  for (var i = 0; i < 3; i++) {
    geometry.faces[4 * i].color = colors[i];
    geometry.faces[4 * i + 1].color = colors[i];
    geometry.faces[4 * i + 2].color = colors[i];
    geometry.faces[4 * i + 3].color = colors[i];
  }
  
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Orientation
var orientationHelper = new OrientationHelper(document.getElementById("orientation-helper"));

function animate() {
  requestAnimationFrame(animate);
  controls.update();

  let rotMat = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
  let invRotMat = new THREE.Matrix4().getInverse(rotMat); 
  orientationHelper.setCameraRotation(invRotMat);
orientationHelper.update();
  
  renderer.render(scene, camera);
}

animate();

body { margin: 0; }
canvas { display: block; }
#orientation-helper { position: absolute; top: 10px; left: 10px; background: #505050; }

<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/examples/js/controls/OrbitControls.js"></script>
<div id='orientation-helper'></div>

Answer 2

When looking at the view space, remember that the X-axis points to the right, the Y-axis points upward, and the Z-axis points out of the canvas.
To start, you need to select an initial position for the OrientationHelper camera along the positive Z-axis:

class OrientationHelper {
    constructor(canvas) {
        // [...]

        this.camera = new THREE.PerspectiveCamera(75, size / size, 0.1, 1000);
        this.camera.position.set(0, 0, 2);

        // [...]

Next, it is recommended to set the orientation of the group within the OrientationHelper scene using a matrix:

class OrientationHelper {
    // [...]

    setCameraRotation(rotation) {
        this.group.setRotationFromMatrix(rotation);
    }

    // [...]

The view matrix is essentially the inverse matrix of the one defining the camera's position and orientation. In order to visualize the camera's orientation through the view matrix, create a rotation matrix from camera.rotation, compute the Inverse matrix, and then set the orientation of the OrientationHelper based on the computed matrix:

let rotMat = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
let invRotMat = new THREE.Matrix4().getInverse(rotMat); 

orientationHelper.setCameraRotation(invRotMat);
orientationHelper.update();

Take a look at the example below:

class OrientationHelper {
  constructor(canvas) {
    this.canvas = canvas;
    
    this.ref = [
      [new THREE.Vector3(1,0,0), 0xFF0000],
      [new THREE.Vector3(0,1,0), 0x00FF00],
      [new THREE.Vector3(0,0,1), 0x0000FF],
    ]

    var size = 200;
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, size / size, 0.1, 1000);
    this.camera.position.set(0, 0, 2);

    this.renderer = new THREE.WebGLRenderer({alpha: true});
    this.renderer.setSize(size, size);
    canvas.appendChild(this.renderer.domElement);
    
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    
    var geometry = new THREE.SphereGeometry( .1, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
    var sphere = new THREE.Mesh( geometry, material );
    this.scene.add( sphere );

    this.group = new THREE.Group();
    for(var pos of this.ref) {
      var geometry = new THREE.BoxGeometry(.25,.25,.25);
      var material = new THREE.MeshBasicMaterial({
        color: pos[1]
      });
      var cube = new THREE.Mesh(geometry, material);
      cube.position.copy(pos[0]);
      this.group.add(cube);
    }

    this.scene.add(this.group);
  }

  setCameraRotation(rotation) {
    this.group.setRotationFromMatrix(rotation);
  }
  
  update() {
  this.renderer.render(this.scene, this.camera);
  }
}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(0, 3, 3);
controls.update();

//controls.autoRotate = true;

var size = 10;
var divisions = 10;

var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

var axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

 // material
  var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
  });

var geometry = new THREE.BoxGeometry();

 // colors
  red = new THREE.Color(1, 0, 0);
  green = new THREE.Color(0, 1, 0);
  blue = new THREE.Color(0, 0, 1);
  var colors = [red, green, blue];
  
  for (var i = 0; i < 3; i++) {
    geometry.faces[4 * i].color = colors[i];
    geometry.faces[4 * i + 1].color = colors[i];
    geometry.faces[4 * i + 2].color = colors[i];
    geometry.faces[4 * i + 3].color = colors[i];
  }
  
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Orientation
var orientationHelper = new OrientationHelper(document.getElementById("orientation-helper"));

function animate() {
  requestAnimationFrame(animate);
  controls.update();

  let rotMat = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
  let invRotMat = new THREE.Matrix4().getInverse(rotMat); 
  orientationHelper.setCameraRotation(invRotMat);
orientationHelper.update();
  
  renderer.render(scene, camera);
}

animate();

body { margin: 0; }
canvas { display: block; }
#orientation-helper { position: absolute; top: 10px; left: 10px; background: #505050; }

<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/examples/js/controls/OrbitControls.js"></script>
<div id='orientation-helper'></div>

Aligning a Three JS group's rotation with the camera for a View Cube or Orientation Cube

Answer №1

Similar questions

Having trouble with querySelector or getElementById not functioning properly?

Excessive use of the style attribute within an AngularJS directive

Guide on incorporating pinching gestures for zooming in and out using JavaScript

Learn the process of adjusting opacity for a specific color in CSS

Recommendations for Configuring VPS for Angular2 and .Net Application

Verify if the arguments of a Discord bot command are in accordance with the format outlined in the commands configuration

Updating the scope in Angular when changing the image source using ng-src is not working

What are some strategies for efficiently locating partial matches in an array without having to loop through each element?

converting values to hexadecimal for array transmission in JavaScript

Do you need to finish the Subject when implementing the takeUntil approach to unsubscribing from Observables?

Transfer or duplicate an SVG image from the bottom div to the top div

Running "vue ui" with Node.js v17.2.0 - A step-by-step guide

Inaccurate data is being shown by the Ajax method

Encountering a discord bot malfunction while on my Ubuntu server

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Showing hierarchical objects retrieved from JSON response

Exploring the insights into React-hook-form Controller

Encountering a random MS JScript runtime error message after a few alerts

The function is not valid due to an angular-parse argument

PHP variable missing "+" sign at the end after post operation