Question

我的场景中有两个物体。我正在使用

 <script src="js/controls/LeapTrackballControls.js"  ></script>

用于移动相机，所以感觉物体根据我的手的动作旋转。

问题是另一个物体也在移动，我希望它始终在我面前。我的意思是，即使相机移动，对象也总是在画布/资源管理器内的相同位置。

很抱歉，如果我没有正确解释自己。

感谢任何帮助。

编辑：

var controls = new THREE.LeapTrackballControls( camera , controller );

所以，我在场景中间有一个球体。我使用LeapTrackball库将相机移动到场景中心。这使得用户感觉球体围绕其中心旋转。

model = new THREE.Mesh(modelGeo, modelMat);
model.geometry.dynamic = true;
model.position.set(0, 0, 0);
scene.add(model);

我的问题是我有另一种形状：

myMesh = new THREE.Mesh(circleGeometry, material);
myMesh.position.set(0, 0, 10);
scene.add(myMesh);

也会受到相机旋转的影响。我想要的是保持球体的“假旋转”，而另一个网格停留在屏幕的中间（0,0,10）。

好的，这是我的相机对象。

var camera = new THREE.PerspectiveCamera（55，window.innerWidth / window.innerHeight，0.1,5000）;

我的渲染功能，用于更新相机的控制/移动。

   function render() {
        controls.update();
        renderer.render(scene, camera);
        doMouse();
        if(useOrbitControls){
            orbitControls.update();
        }
    }

我正在使用Leap控制器，这是构建它的功能：

function leapMotion() {
                var controllerOptions = {
                    enableGestures: true
                    , background: true
            , frameEventName: 'animationFrame'
                , };

[...]

    controller.on('frame', onFrame);

基本上，这意味着onFrame函数每次收到一个帧时都会完成（每秒60个aprox。）

    function onFrame(frame){
[...]
        }

没有更多，所有的魔力来自你可以在这里找到的图书馆：

https://leapmotion.github.io/Leap-Three-Camera-Controls/

Answer 1

如果您希望将一个对象（如十字准线）固定在相机前面，则可以通过将对象添加为相机的子对象来实现。使用像这样的模式：

scene.add( camera ); // required when the camera has a child
camera.add( object );
object.position.set( 0, 0, - 100 ); // or whatever distance you want

three.js r.71

Answer 2

这样做的简单方法是让您的对象跟踪相机的位置。

跟踪意味着，在每次相机更新时，您都会以相同的数量移动相机和物体，同时保持它们之间的固定距离。

要使其工作，您需要设置一个固定的位置，在该位置始终可以查看您的对象，在样本中它应该是（0,0,10）。

var fixedPosition = new THREE.Vector3(0, 0, 10);

然后，在你的render()函数中，你需要在移动相机之后但在渲染所有内容之前更新对象的位置。

function render() { controls.update(); // let's update the object's position now! myMesh.position.sub(camera.position, fixedPosition); // now camera and mesh are at the same distance renderer.render(scene, camera); //... }

在这种情况下，矢量减法工作正常，我们基本上取相机的位置，减去我们的固定量（Z轴上的10），你将得到你的对象的位置始终在Z轴上距摄像机10个单位

通常，您要做的许多操作都涉及3D矢量和一些数学运算，因此了解这些操作（基本加法，减法，乘法等）如何影响您在屏幕上看到的内容非常有用。

如果你有更多的疑惑，我建议你阅读一些关于矢量数学的知识，这不是太难，你不需要记忆公式（Three.js实现了你所需要的所有数学运算），但是知道这些操作的作用会非常有用。

场景中的静态对象 - Three.js

2 个答案: