ThreeJS：如何仅向一个方向移动背景？

如何解决ThreeJS：如何仅向一个方向移动背景？

我有一个完整的汽车网格模型，使用 Three.JS 向右、向左、向上和向下移动输入数据是 X 和 Z 方向上的加速度，我们对加速度应用二重积分来计算位移。所以我已经能够在各个方向上为汽车设置动画，并使背景移动以使汽车保持在画布的中心。但是，我只需要background 左右移动，而不是上下移动

这是我的代码：

<html>

<head>
    <style>
        canvas {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <script src="./libs/three.min.js"></script>
    <script src="./libs/OrbitControls.js"></script>
    <script src="./libs/KeyboardState.js"></script>
    <script src="./libs/MTLLoader.js"></script>
    <script src="./libs/OBJMTLLoader.js"></script>
    <script src="./data/accXaccZCOMBINEDMOTIONS.json"></script>
</body>

<script>
    var data = JSON.parse(JSON.stringify(data));
    var toycar;
    var valid = 1;
    const dispArrayX = Array.from({ length: 1 }).fill(0);
    const dispArrayZ = Array.from({ length: 1 }).fill(0);
    let sensorValue = 0;
    var initialVeLocity = 0;
    var angle = 0;
    var currentIndex = 0;
    var initialdisplacement = 0;
    var scene,renderer,camera;
    var width = window.innerWidth;
    var height = window.innerHeight;
    var time = data[currentIndex].time
    var pos = new THREE.Vector3(0,0);

    init();
    animate();

    function init() {
        var width = window.innerWidth;
        var height = window.innerHeight;

        renderer = new THREE.Webglrenderer({ antialias: true,alpha: true });
        renderer.setClearColor(0x626d73,1);
        renderer.setSize(width,height);
        document.body.appendChild(renderer.domElement);
        
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(10,width / height,1,10000);
        // camera.position.y = -150;
        // camera.position.y = 200;
        // camera.position.x = 100;
        
        camera.lookAt(new THREE.Vector3(0,0));

        var loader = new THREE.OBJMTLLoader();
        loader.load('https://jyunming-chen.github.io/tutsplus/models/toycar.obj','https://jyunming-chen.github.io/tutsplus/models/toycar.mtl',function (object) {
                toycar = object;
                toycar.rotateZ(10.8); //toycar.rotateZ(-10.99);
                scene.add(toycar);
            });

        var gridXZ = new THREE.GridHelper(100000,10);
        gridXZ.setColors(new THREE.Color(0xff0000),new THREE.Color(0xffffff));
        scene.add(gridXZ);

        var pointLight = new THREE.PointLight(0xffffff);
        pointLight.position.set(350,10,5);
        scene.add(pointLight);

        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);
    }

    function animate(dt) {
        let time = data[currentIndex].time
        dt *= 10 ** -9
        time += dt

        while (data[currentIndex].time < time) {
            currentIndex++
            if (currentIndex >= data.length) return
        }

        const { accX,accZ } = data[currentIndex]

        var dir = new THREE.Vector3(0,-1);
        dir.applyAxisAngle(new THREE.Vector3(0,0),10);
        pos.add(dir);

        if (toycar != undefined) {
            toycar.scale.set(0.1,0.1,0.1);
            if (currentIndex > 0) {

                // compute the displacement by double integrating the acceleration for accZ (e.i. Right and left movement)
                const deltaTime        = ((data[currentIndex].time) / (24 * 60 * 60)) - 1; // convert time from second per day to second
                const veLocityInitialZ = ((data[currentIndex-3].accZ + data[currentIndex-2].accZ)/2)*deltaTime; // compute initialVeLocity two step backward
                const veLocityCurrentZ = veLocityInitialZ + ((data[currentIndex-1].accZ + data[currentIndex].accZ)/2)*deltaTime; // compute currentVeLocity one step backward                
                const prevIoUsdispZ    = dispArrayZ[0] + (deltaTime * ((veLocityCurrentZ + veLocityInitialZ)/2));
                dispArrayZ[0]          = prevIoUsdispZ;
                const dispCurrentZ = prevIoUsdispZ + dispArrayZ[0];

                // compute the displacement by double integrating the acceleration for accX (e.i. Up and down movement)
                const veLocityInitialX   = ((data[currentIndex-3].accX + data[currentIndex-2].accX)/2)*deltaTime; // compute initialVeLocity two step backward
                const veLocityCurrentX   = veLocityInitialX + ((data[currentIndex-1].accX + data[currentIndex].accX)/2)*deltaTime; // compute currentVeLocity one step backward                
                const prevIoUsdispX      = dispArrayX[0] + (deltaTime * ((veLocityCurrentX + veLocityInitialX)/2));
                dispArrayX[0]            = prevIoUsdispX;
                const dispCurrentX       = prevIoUsdispX + dispArrayX[0];
                const dispCurrentXscaled = dispCurrentX/3500;

                // Move the car up and down
                if (dispCurrentXscaled*0.0001 < 0){
                    toycar.position.x     = dispCurrentXscaled*0.00001;
                } 
                else if (dispCurrentXscaled*0.0001 > 8){
                    toycar.position.x     = dispCurrentXscaled*0.0000001;
                }
                 else{
                    toycar.position.x     = dispCurrentXscaled*0.0001;
                }

                toycar.position.y = 0;
                // Move the car right and left
                toycar.position.z = -(dispCurrentZ/4000)*0.0005;
                // print out displacementX and displacementZ 
                console.log("dispX: " + (dispCurrentX*0.0000001).toFixed(5) + "    dispZ: " + ((dispCurrentZ/4000)*0.0005).toFixed(5));
            }
            toycar.rotation.x = (angle + Math.PI);;
            var relativeCameraOffset = new THREE.Vector3(-1600,400,0);
            var cameraOffset = relativeCameraOffset.applyMatrix4(toycar.matrixWorld);
            camera.position.x = cameraOffset.x*0.5;
            camera.position.y = cameraOffset.y;
            camera.position.z = cameraOffset.z;
            camera.lookAt(toycar.position);
        }

        requestAnimationFrame(animate);
        renderer.render(scene,camera);
    }

</script>

</html>

我使用 JSON 文件作为输入。

这就是汽车运动的样子：

您可以看到背景跟随汽车运动。对于上下，我只需要汽车移动（而不是背景），左右都很好，因为正在移动，所以它留在画布内。你能帮忙吗？

ThreeJS：如何仅向一个方向移动背景？

如何解决ThreeJS：如何仅向一个方向移动背景？

相关推荐