Three.js cube face rotation vector in relation to camera

Question

I have a rotating sphere on which I have a div attached the example can be viewed here: https://jsfiddle.net/ao5wdm04/ I calculate the x and y values and place the div using a translate3d transform and that works quite well.

My question is how to can get the values for the rotateX, rotateY and rotateZ or rotate3d transforms so the div "tangents" the sphere surface. I know the cube mesh faces the sphere center so I assume the rotation vector of the outward facing normal vector in relation to the camera would contain the values I need. But I'm not quite sure how to obtain these.

Update

By using Euler angles I'm almost achieving the desired effect, shown here: https://jsfiddle.net/ao5wdm04/1/ but the rotation is not large enough.

Answer 1

Disclaimer: I know nothing about three.js. I've just done a bit of OpenGL.

Your euler angles are coming from a model-view-projected origin (lines 74-80). I can't see the logic behind this.

If your div is on the sphere surface, then it should be oriented by the normal of the sphere at the location of the div. Fortunately, you already have these angles. They are named rotation.

If you replace the euler angles in lines 82-84 with the rotation angles used to position the div, then in my browser the div appears edge on when it is at the edge of the circle, and face on when it is at the centre. It kind of looks like it is moving in a circle, edge on to the screen. Is this the effect you want?

My modification to the linked code:

82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = (rotation.y * (180/ Math.PI));
84 var rotZ = 0;

---

EDIT

Ah, ok. The rotation variable is just that of the camera. It governs the tangent at the equator. You also need to modify the orientation to account for latitude.

Make rotY equal to negative your latitude. Then make sure that this rotation happens before the equatorial rotation. Rotations are not commutative.

In summary, changes from the code at https://jsfiddle.net/ao5wdm04/1/ are as follows:

27 var lat = 45 * Math.PI / 180;
...
82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = - 45;
...
88 document.getElementById('face').style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotateY('+rotX+'deg) rotateX('+rotY+'deg)';

I don't know how the latitude should propagate between the init and render functions. As I said, I'm not familiar with the language.

Answer 2

For details about transformation and rotation in openGL or any other graphics please go through here.

---

Basic -

There is basically 2 kind of transformations in 3D world-

1. Translation
2. Rotation

A small example on this things are given here.

---

If u go through all of them, I think u have a clear concept on the 3D transformation system.

If u can understand those, u can easily simulate that :) because u need to do this 2 things for each move at the same time.

Try this code-

var camera, scene, renderer, raycaster, geometry, material, mesh, box;
var rotation = {
  x: 0,
  y: 0
};
var distance = 500;

init();
animate();

function init() {
  raycaster = new THREE.Raycaster(); ;
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = distance;
  camera.position.y = 100;
  scene.add(camera);

  geometry = new THREE.SphereGeometry(100, 50, 50, 50);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var transform = new THREE.Matrix4().getInverse(scene.matrix);

  var lat = 0 * Math.PI / 180;
  var lon = 90 * Math.PI / 180;
  var r = 100;
  var p = new THREE.Vector3(-r * Math.cos(lat) * Math.cos(lon),
    r * Math.sin(lat),
    r * Math.cos(lat) * Math.sin(lon)
  );
  p.applyMatrix4(transform);

  var geometry = new THREE.CubeGeometry(10, 10, 10);
  box = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 0xff0000,
    
  }));
  box.position.set(p.x, p.y, p.z);
  box.lookAt(mesh.position);
  //scene.add(box);
  box.updateMatrix();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  render();
}

function render() {

  rotation.x += 0.01;
  camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
  camera.position.y = distance * Math.sin(rotation.y);
  camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

  camera.lookAt(mesh.position);

  var w = window.innerWidth;
  var h = window.innerHeight;

  var mat = new THREE.Matrix4();
  var v = new THREE.Vector3();

  mat.copy(scene.matrix);
  mat.multiply(box.matrix);
  v.set(0, 0, 0);
  v.applyMatrix4(mat);
  v.project(camera);
  
  var euler = new THREE.Euler().setFromVector3(v);
  
  var rotX = (rotation.x * (180/ Math.PI));
  var rotY = (rotation.y * (180/ Math.PI));
  var rotZ = 0;
  
  var x = (w * (v.x + 1) / 2) - 12.5; //compensate the box size
  var y = (h - h * (v.y + 1) / 2) - 12.5;
  document.getElementById('face').style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotateX('+rotY+'deg) rotateY('+rotX+'deg) rotateZ('+rotZ+'deg)';

  renderer.render(scene, camera);

}

#face {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: red;
}

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<div id="face"></div>