Позиционирование сетки в 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.

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-представлении - подробности и пример см. Там: Converting 3D position to 2d screen position [r69!]