在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和一些測試，以檢測是否達到立方體極限x或新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視圖中哪些3D位置投影在哪裏 - 有關詳細信息和示例，請參閱此處的答案：Converting 3D position to 2d screen position [r69!]