Static Object 在現場 - Three.js

Question

我的場景中有兩個物體。 我正在使用

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

用於移動相機，因此感覺物體會根據我的手的運動而旋轉。

問題是另一個 object 也在移動，我希望它一直在我面前。 我的意思是，即使相機移動，object 也始終位於畫布/資源管理器內的同一位置。

對不起，如果我沒有正確解釋自己。

任何幫助表示贊賞。

編輯：

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)。

好的，這是我的相機 object。

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

還有我的渲染圖 function，用於更新相機的控制/移動。

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

我正在使用 Leap controller，這是構建它的 function：

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

[...]

    controller.on('frame', onFrame);

基本上，這意味着 onFrame function 每次收到幀時都會完成（每秒 60 次）。

    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實現了你已經需要的所有數學），但是知道這些操作的作用會非常有用。

Answer 3

希望這對使用@react-three/fiber人有幫助

import {useFrame, useThree} from "@react-three/fiber";

const { gl } = useThree();

const [ vrEnabled, setVREnabled ] = useState(false);

useFrame(({camera}) => {
    setVREnabled(gl.xr.isPresenting);

    if (vrEnabled) {
        camera.add(ref.current);
        ref.current.position.set( 18, 0, 0 );
    }
});