Using Three.js I have a sphere (globe) and several sprites attached to volcano points. I can rotate (spin) the globe and the sprites stay in their positions because they're added as a group to the sphere.
使用Three.js我有一个球体(地球)和几个附着在火山点上的精灵。我可以旋转(旋转)地球仪,精灵保持在他们的位置,因为它们作为一组添加到球体中。
Now I want to be able to spin the globe to an arbitrary position using a button. How can I do this? For example if the point I want to spin to is at the back of the globe, how can I rotate the globe so it's in the front?
现在我希望能够使用按钮将地球旋转到任意位置。我怎样才能做到这一点?例如,如果我要旋转的点位于地球的后面,我该如何旋转地球以使其位于前方?
This code is essentially what I have right now. A main mesh which I add sprite to.
这段代码基本上就是我现在所拥有的。我添加精灵的主要网格。
<html>
<head></head>
<body>
<script src="three.min.js"></script>
<script>
var scene, camera, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );
geometry = new THREE.SphereGeometry( 159, 32, 32 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var map = THREE.ImageUtils.loadTexture( "sprite1.png" );
var material2 = new THREE.SpriteMaterial( { map:map, color:0x00ff00 } );
var sprite1 = new THREE.Sprite( material2 );
sprite1.position.set(100,100,100);
sprite1.scale.set(40,40,40);
mesh.add(sprite1);
var sprite2 = new THREE.Sprite( material2);
sprite2.position.set(-100,-100,-100);
sprite2.scale.set(30,30,30);
mesh.add(sprite2);
var sprite3 = new THREE.Sprite(material2);
sprite3.position.set(100,-100,100);
sprite3.scale.set(20,20,20);
mesh.add(sprite3);
renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
</script>
</body>
</html>
1 个解决方案
#1
0
This would be my approach:
这将是我的方法:
// as sprite is a child of mesh get world position
var spritePos = new THREE.Vector3().setFromMatrixPosition(sprite.matrixWorld);
// get the vectors for calculating angle
var cv3 = new THREE.Vector3().subVectors(camera.position, mesh.position);
var sv3 = new THREE.Vector3().subVectors(spritePos, mesh.position);
// we only want to rotate around y-axis, so only the angle in x-z-plane is relevant
var cv2 = new THREE.Vector2(cv3.x, cv3.z);
var sv2 = new THREE.Vector2(sv3.x, sv3.z);
// normalize Vectors
cv2.normalize();
sv2.normalize();
// dot product
var dot = cv2.dot(sv2);
// angle to between sprite and camera in radians
// cosinus is from 1 to -1, so we need to normalize and invert it and multiply it with PI to get proper angle
var angle = (1 - (dot + 1) / 2) * Math.PI;
// is sprite left or right from camera?
if(spritePos.x < 0)
mesh.rotation += angle;
else
mesh.rotation -= angle;
Now, I made a Plunker.
现在,我做了一个Plunker。
It seems a bit inaccurate as it always rotates a bit left or right to the very front position. Maybe it's due to the cosinus near to some specific angles.
它似乎有点不准确,因为它总是向左或向右旋转到最前面的位置。也许这是由于cosinus接近某些特定角度。
Also keep in mind that the determination whether the sprite is left or right from the camera is a bit more difficult if camera or mesh is somewhere else in the scene.
另外请记住,如果摄像机或网格物体位于场景中的其他位置,则确定精灵是从摄像机向左还是向右是有点困难。
Explanation after dot product:
点积后的解释:
The dot product gives the angle of two vectors as cosinus. So we get a value between -1 and 1. e.g. cos(0) = 1
cos(PI/2) = 0
cos(PI) = -1
So at the moment is 0° = 1 and 180° = -1.
点积给出两个矢量的角度作为余弦。所以我们得到介于-1和1之间的值,例如cos(0)= 1 cos(PI / 2)= 0 cos(PI)= -1所以此刻是0°= 1和180°= -1。
We want to get the angle in radians to rotate the mesh in position. So first we normalize it (dot + 1) / 2
, so 0° = 1 and 180° = 0.
我们希望以弧度为单位获得角度以将网格旋转到位。所以首先我们将它标准化(点+ 1)/ 2,所以0°= 1和180°= 0。
Then invert it (0° = 0, 180° = 1) and multiply with PI (0° = 0, 180° = PI).
然后将其反转(0°= 0,180°= 1)并乘以PI(0°= 0,180°= PI)。
Now, we have the angle to rotate, but we don't know if need to rotate to the left or to the right, that's why I check if the sprite is left or right from camera.
现在,我们有旋转的角度,但我们不知道是否需要向左或向右旋转,这就是为什么我检查精灵是从镜头左侧还是右侧的原因。
I don't know if it's explanation enough or if it's comprehensable at all?
我不知道它的解释是否足够,或者它是否可以理解?
#1
0
This would be my approach:
这将是我的方法:
// as sprite is a child of mesh get world position
var spritePos = new THREE.Vector3().setFromMatrixPosition(sprite.matrixWorld);
// get the vectors for calculating angle
var cv3 = new THREE.Vector3().subVectors(camera.position, mesh.position);
var sv3 = new THREE.Vector3().subVectors(spritePos, mesh.position);
// we only want to rotate around y-axis, so only the angle in x-z-plane is relevant
var cv2 = new THREE.Vector2(cv3.x, cv3.z);
var sv2 = new THREE.Vector2(sv3.x, sv3.z);
// normalize Vectors
cv2.normalize();
sv2.normalize();
// dot product
var dot = cv2.dot(sv2);
// angle to between sprite and camera in radians
// cosinus is from 1 to -1, so we need to normalize and invert it and multiply it with PI to get proper angle
var angle = (1 - (dot + 1) / 2) * Math.PI;
// is sprite left or right from camera?
if(spritePos.x < 0)
mesh.rotation += angle;
else
mesh.rotation -= angle;
Now, I made a Plunker.
现在,我做了一个Plunker。
It seems a bit inaccurate as it always rotates a bit left or right to the very front position. Maybe it's due to the cosinus near to some specific angles.
它似乎有点不准确,因为它总是向左或向右旋转到最前面的位置。也许这是由于cosinus接近某些特定角度。
Also keep in mind that the determination whether the sprite is left or right from the camera is a bit more difficult if camera or mesh is somewhere else in the scene.
另外请记住,如果摄像机或网格物体位于场景中的其他位置,则确定精灵是从摄像机向左还是向右是有点困难。
Explanation after dot product:
点积后的解释:
The dot product gives the angle of two vectors as cosinus. So we get a value between -1 and 1. e.g. cos(0) = 1
cos(PI/2) = 0
cos(PI) = -1
So at the moment is 0° = 1 and 180° = -1.
点积给出两个矢量的角度作为余弦。所以我们得到介于-1和1之间的值,例如cos(0)= 1 cos(PI / 2)= 0 cos(PI)= -1所以此刻是0°= 1和180°= -1。
We want to get the angle in radians to rotate the mesh in position. So first we normalize it (dot + 1) / 2
, so 0° = 1 and 180° = 0.
我们希望以弧度为单位获得角度以将网格旋转到位。所以首先我们将它标准化(点+ 1)/ 2,所以0°= 1和180°= 0。
Then invert it (0° = 0, 180° = 1) and multiply with PI (0° = 0, 180° = PI).
然后将其反转(0°= 0,180°= 1)并乘以PI(0°= 0,180°= PI)。
Now, we have the angle to rotate, but we don't know if need to rotate to the left or to the right, that's why I check if the sprite is left or right from camera.
现在,我们有旋转的角度,但我们不知道是否需要向左或向右旋转,这就是为什么我检查精灵是从镜头左侧还是右侧的原因。
I don't know if it's explanation enough or if it's comprehensable at all?
我不知道它的解释是否足够,或者它是否可以理解?