场景中的静态对象 - Three.js [英] Static Object in Scene - Three.js

查看:338
本文介绍了场景中的静态对象 - Three.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的场景中的两个对象。我现在用的是

I have two objects in my scene. I am using the

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

有关移动摄像机,所以感觉就像对象是根据我的手的动作旋转。

for moving the camera, so it feels like the objects is rotating according to the movement of my hand.

现在的问题是,其他对象也动了,我希望它永远留在我的面前。我的意思是,即使摄像机移动,对象始终是在画布/资源管理器内的同一地点。

The problem is that the other object is also moving, and I want it to remain always in front of me. I mean, that even if the camera moves, the object always is in the same place inside the canvas/explorer.

很抱歉,如果我不解释自己的身体。

Sorry if I'm not explaining myself properly.

任何帮助是AP preciated。

Any help is appreciated.

编辑:

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

所以,我在现场的中间是一个球体。我用LeapTrackball库来移动相机围绕场景的中心。这使得用户感觉好像球体旋转围绕他的中心。

So, I have a sphere in the middle of the scene. I use the LeapTrackball library to move the camera around the center of the scene. This makes the user feel like the sphere is rotating around his center.

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

我的问题是,我有另一种形状:

My problem is that I have another shape:

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

这也受相机的旋转。我想是保持球的假旋转,而其他网格停留在屏幕(0,0,10)的中间位置。

that is also affected by the rotation of the camera. What I want is to keep the 'fake rotation' of the sphere, while the other mesh stays in the middle of the screen (0,0,10).

好了,这是我的相机对象。

Ok, so this is my camera object.

变种相机=新THREE.PerspectiveCamera(55,window.innerWidth / window.innerHeight,0.1,5000);

var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 5000);

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

And my render function, which is used for update the control/movement of the camera.

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

我使用的是大跃进的控制器,而这是建立它的功能:

I'm using a Leap controller, and this is the function that builds it up:

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

[...]

    controller.on('frame', onFrame);

基本上,这意味着该onFrame函数每次它接收一帧进行(60每秒近似)

Basically, this means that the onFrame function is done everytime that it receives a frame (60 per second aprox.)

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

没有更多的,所有的魔法来自于库中,你可以在这里找到:

There is not much more, all the magic comes from the library that you can find here:

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

推荐答案

如果你想要一个对象 - 比如十字 - 被固定在镜头前,你可以通过添加对象的孩子这样做摄像头。使用像这样的一个规律:

If you want an object -- such as crosshairs -- to be fixed in front of the camera, you can do so by adding the object as a child of the camera. Use a pattern like this one:

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

three.js r.71

这篇关于场景中的静态对象 - Three.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆