Question

我正在尝试创建一个简单的应用程序，我可以向左或向右移动多维数据集。我找到了那个部分。现在我正在努力使立方体不能离开飞机。最简单的方法是什么？

以下是我目前的代码。

<html>
    <head>
        <title>Time Car</title>
        <style>
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding 0;
            }
        </style>
    </head>

    <body>
        <script src="js/three.min.js"></script>
        <script src="js/Detector.js"></script>
        <script>
            var scene, camera, renderer, object, raycaster, board1, board2, board3, board4;
            var vy = 0,
                vx = 0,
                direction = "",
                gravity = 0.3;


            function init() {

                if (!Detector.webgl) Detector.addGetWebGLMessage();

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(0xCCFFFF);

                document.body.appendChild(renderer.domElement);

                var light = new THREE.DirectionalLight(0xffffff, 2);
                light.position.set(1, 1, 1).normalize();
                scene.add(light);

                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(-1, -1, -1).normalize();
                scene.add(light);

                var geometry = new THREE.BoxGeometry(20, 10, 10);
                object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0x3333FF
                }));
                scene.add(object);

                var geometry = new THREE.BoxGeometry(80, 160, 10);
                board1 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0xCC0000

                }));
                board1.position.set(0, 0, -200);
                scene.add(board1);

                var geometry = new THREE.BoxGeometry(80, 160, 10);
                board2 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0xCC0000

                }));
                board2.position.set(400, 0, -200);
                scene.add(board2);

                var geometry = new THREE.BoxGeometry(80, 160, 10);
                board3 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0xCC0000

                }));
                board3.position.set(800, 0, -200);
                scene.add(board3);

                var geometry = new THREE.BoxGeometry(80, 160, 10);
                board4 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0xCC0000

                }));
                board4.position.set(1200, 0, -200);
                scene.add(board4);

                geometry = new THREE.PlaneGeometry(5000, 800, 800);
                var plane = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                    color: 0x99FF66
                }));
                plane.rotation.x = -Math.PI / 2;
                plane.position.set(0, -20, 0);
                scene.add(plane);

                camera.position.set(0, 100, 100);

                raycaster = new THREE.Raycaster();
                raycaster.ray.direction.set(0, -1, 0);

                render();
            }

            function render() {

                requestAnimationFrame(render);

                if (direction == "left") {
                    vx = -2;
                }
                if (direction == "right") {
                    vx = 2;
                }
                object.position.x += vx;
                vx = vx * 0.95;

                camera.lookAt(object.position);
                camera.position.x += (((object.position.x - 20) - camera.position.x)) * 0.03;

                camera.position.y += (((object.position.y + 50) - camera.position.y));

                renderer.render(scene, camera);
            }

            window.addEventListener('keydown', function (e) {
                switch (e.keyCode) {
                case 65: //left
                    direction = "left";
                    break;

                    break;
                case 68: //right
                    direction = "right";
                    break;
                };
            }, false);
            window.addEventListener('keyup', function (e) {
                switch (e.keyCode) {
                case 65: //left
                    direction = "";
                    break;
                case 68: //right
                    direction = "";
                    break;
                };
            }, false);

            init();
        </script>
    </body>
</html>

Answer 1

如果我说对了您将平面设置为

geometry = new THREE.PlaneGeometry(5000, 800, 800);
...
plane.position.set(0, -20, 0);

您可以在此计算其边界框

plane.geometry.computeBoundingBox();

它沿x轴的大小为5000，你不会沿着这个轴进行平移，所以plane.geometry.boundingBox.min.x是-2500，plane.geometry.boundingBox.max.x是2500.然后在动画循环中你可以检查{ {1}}的立场。像这样的东西

object

试图在three.js中为可移动的立方体创建边界

1 个答案: