在Three.js中定位网格

Question

我试图了解如何将多维数据集放置在画布中。 但是我不明白定位是如何工作的。 我正在寻找一种方法来检测我的网格是否满足画布的限制。 但是position.x或position.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对象位置与它们在画布中显示的位置之间的关系取决于摄影机视图。 Three.js可以告诉您2D视图中某些3D位置的投影-有关详细信息和示例，请参见答案： 将3D位置转换为2d屏幕位置[r69！]