Question

很抱歉发布可能重复的内容。

我有两个3d矢量：

中心（0,0,0）

orb（0,0,100）

我想在X轴和Y轴上绕中心向量旋转orb-vector。我想要实现的是制作和物体总是在相机朝向它的方向的视野中。

我试过这个但没有运气。

var vector = new THREE.Vector3( 0, 0, 100 );
vector.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI * 0.5 );
vector.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), Math.PI * 0.5 );
orbBall.position.copy(vector);

Answer 1

＆＃34;我想要实现的目标是制作和物体总是在相机朝向其面向的方向看待。＆＃34;

如果您只是想确保orbBall始终面向相机，并且orbBall和camera都是THREE scene的一部分，那么您可以使用lookAt喜欢这样：

orbBall.lookAt(camera.position);

如果您需要对齐orbBall的特定边，可以使用空虚拟Object3D来执行此操作，方法是将虚拟节点添加到场景中，将orbBall添加到虚拟对象，就像这样：

dummy = new THREE.Object3D();
scene.add(camera); // "camera" is defined however
scene.add(dummy);
dummy.add(orbBall); // "orbBall" is created as usual
// ... not to align dummy+orbBall
dummy.lookAt(camera.position);
// ...and you can just rotate orbBall around "inside" dummy, just once,
///       to face however you like

Answer 2

在深入研究这个问题后，我意识到它是非常先进的数学。如果您有兴趣，请查看关于四元数的讲座：

https://www.youtube.com/watch?v=mHVwd8gYLnI

所以我使用了@bjorke suggestins并使用了一个虚拟对象，它运行良好。

var container, scene, camera, renderer, controls, stats;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(100, 100, 400);
camera.lookAt(scene.position);
scene.add(camera);

renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );

var light = new THREE.DirectionalLight(0xffffff); //new THREE.PointLight(0xffffff);
light.position.set( 30, 80, -15 );
scene.add(light);


var boxGeo = new THREE.BoxGeometry( 10, 10, 10);
var axes = new THREE.AxisHelper(1000);
scene.add( axes );

var cameraObj = new THREE.Mesh(boxGeo, new THREE.MeshLambertMaterial( {color: 0x888800}));
scene.add(cameraObj);

var orbSpace = new THREE.Object3D();
scene.add(orbSpace);
var orbBall = new THREE.Mesh(boxGeo, new THREE.MeshLambertMaterial( {color: 0x880088}));
orbBall.position.set(0, 0, cameraObj.position.z + 100);
orbSpace.add(orbBall);

animate();

var camX = 0.3;
var camY = 0;
function animate() {

    requestAnimationFrame( animate );

    camY += 0.02;
    if (camY >= 2) camY = 0;

    cameraObj.rotation.x = Math.PI * document.querySelector('#volume').value;
    cameraObj.rotation.y = Math.PI * camY;
    orbSpace.position.copy(cameraObj.position);
    orbSpace.rotation.copy(cameraObj.rotation)


    renderer.render( scene, camera );

}

这是一个关于它如何运作的编码：

http://codepen.io/arpo/pen/RrpMJJ

您可以更新右上角的X角度

旋转在三个轴上的三维矢量在两个轴上

2 个答案: