在three.js中定位网格

Question

我正试图了解如何在画布中定位我的立方体。但我不明白定位是怎么回事。我正在寻找一种方法来检测我的网格是否满足画布的限制。但是位置的单位是什么呢?X或位置。y ?

画布宽度，高度和画布上的网格之间的关系是什么?

谢谢。

            var geometry = new Array(),material = new Array(),cube = new Array();
            var i = 0; 
            for(i=0; i < 10;i++){
                geometry[i] = new THREE.BoxGeometry(1,1,1);
                material[i] = new THREE.MeshBasicMaterial({ color: 0x33FF99 });
                cube[i] = new THREE.Mesh(geometry[i], material[i]);
                scene.add(cube[i]);
            }
            camera.position.z = 5;
            var render = function () {
                requestAnimationFrame(render);
                var xRandom = 0;
                var yRandom = 0;
                var zRandom = 0;
                var sens = 1;
                for (i = 0; i < cube.length ; i++) {
                    document.getElementById('widthHeight').innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;

                    xRandom = (Math.random() * 0.010 + 0.001) * sens;
                    yRandom = (Math.random() * 0.010 + 0.001) * sens;
                    zRandom = (Math.random() * 0.010 + 0.001) * sens;
                    cube[i].position.setX(xRandom + cube[i].position.x);
                    cube[i].position.setY(yRandom + cube[i].position.y);
                    cube[i].position.setZ(zRandom + cube[i].position.z);
                    cube[i].rotation.x += 0.0191;
                    cube[i].rotation.y += 0.0198;
                }
                renderer.render(scene, camera);
            };
            render();

我添加了一个PlaneGeometry和一些测试来检测立方体是否达到新PlaneGeometry的x或y限制。

 var geometry = new Array(),material = new Array(),cube = new Array();
            var i = 0;
            var planeMap = new THREE.PlaneGeometry(100, 100);
            var materialMap = new THREE.MeshBasicMaterial({ color: 0xCE0F0F });
            var map = new THREE.Mesh(planeMap,materialMap);
            scene.add(map);
            for(i=0; i < 5; i++){

                geometry[i] = new THREE.BoxGeometry(3,3,3);
                material[i] = new THREE.MeshBasicMaterial({ color: 0x336699 });
                cube[i] = new THREE.Mesh(geometry[i], material[i]);
                scene.add(cube[i]);
            }
            camera.position.z = 100;
            var render = function () {
                requestAnimationFrame(render);
                var xRandom = 0,yRandom = 0,zRandom = 0,x=0,y=0,z=0;
                var sensX = 1, sensY = 1, sensZ = 1;
                var widthHeight = document.getElementById('widthHeight');
                for (i = 0; i < cube.length ; i++) {
                    if (cube[i].geometry.type == "BoxGeometry") {
                        widthHeight.innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;
                        var currentCube = cube[i].position;
                        var widthCube = cube[i].geometry.parameters.width;
                        var heightCube = cube[i].geometry.parameters.height;
                        x = currentCube.x;
                        y = currentCube.y;
                        z = currentCube.z;

                        if (x >= ((map.geometry.parameters.width / 2) - widthCube)) {
                            sensX = -1;
                        }
                        if (x <= ((map.geometry.parameters.width / 2) - widthCube)*-1) {
                            sensX = 1;
                        }
                        if (y >= ((map.geometry.parameters.height / 2) - heightCube)) {
                            sensY = -1;
                        }
                        if (y <= ((map.geometry.parameters.height / 2) - heightCube)*-1) {
                            sensY = 1;
                        }

                        xRandom = (Math.random() * 0.650 + 0.001) * sensX * (i + 1);
                        yRandom = (Math.random() * 0.850 + 0.001) * sensY * (i + 1);
                        //zRandom = (Math.random() * 0.450 + 0.001) * sensZ * (i + 1);

                        cube[i].position.setX(xRandom + x);
                        cube[i].position.setY(yRandom + y);
                        cube[i].position.setZ(zRandom + z);
                        cube[i].rotation.x += 0.01;
                        cube[i].rotation.y += 0.01;
                    } 
                }

Answer 1

在three.js中，你正在处理一个3D空间，即场景。x y z坐标在这个空间中。与现实世界类似，你可以把它想象成一个房间，里面有一些物体。

在2D中显示在画布上的是您的相机如何看到该场景的特定视图。您可以通过修改代码中相机位置的z坐标来观察这一点。这也类似于用真正的相机拍摄一个有一些物体的房间的照片。

所以3D对象的位置和它们在画布上显示的位置的关系取决于相机视图。js可以告诉你一些3D位置在2D视图中的投影位置——有关细节和示例，请参阅答案:将3D位置转换为2D屏幕位置[r69!)