正确的倾斜和围绕y轴旋转

如果我将一个四面体添加到像这样的three.js场景中，我如何校正它的倾斜度以便它的底面是平坦的，重置y轴以便我可以围绕它旋转是否正确？正确的倾斜和围绕y轴旋转

//dummy object 
var dummy = new THREE.Mesh(new THREE.CubeGeometry(1, 500, 1), new THREE.MeshBasicMaterial()); 
dummy.position.x = 0; 
dummy.position.z = 0; 
scene.add(dummy); 

// tetrahedron 
var points = [ 
new THREE.Vector3(200, 0, 0), //bottom right 
new THREE.Vector3(0, 200, 0), //top 
new THREE.Vector3(0, 0, 200), //bottom left 
new THREE.Vector3(200, 200, 200) //bottom back  
]; 

object = THREE.SceneUtils.createMultiMaterialObject(new THREE.ConvexGeometry(points), materials); 

object.position.set(-110, 0, -110); 
object.rotation.set(0.7, 0.0, -0.7); 

dummy.add(object);

来源

2016-01-20 garrettlynch

你不使用任何THREE.TetrahedronGeometry原因？理想情况下，最好只修复初始几何体，而不是事后旋转它。 –

@BrendanAnnable说什么。正确构建是最好的。但它不是一个可用的选项，然后使用'object.geometry.computeFaceNormals（）'来获取适当的方向，然后根据底面的正常值获取变换。我把它留给你，以找到正常的向量，称为'v' - 然后创建一个新的'Matrix4'并将'.lookAt（）'从原点应用到'v'，然后'.getInverse（） '这会给你旋转，你可以申请使四面体点“向上” - 它会稍微偏离中心，但你只问关于倾斜。 – bjorke

根据我的理解（刚开始使用三个j）THREE.TetrahedronGeometry使用半径自动生成一个四面体。我需要知道四面体所有点的位置，所以最好使用矢量列表。我已经设法通过使用虚拟对象（参见编辑问题中的代码）使四面体倾斜，并将我的四面体纠正为正四面体，但我不知道需要多少'object.position.set（-110， 0，-110）'和'object.rotation.set（0.7，0.0，-0.7）'来获得正确定位在0,0,0的四面体，并且一个点朝上。 – garrettlynch

@WestLangley，是我发现后几个小时你才回答，并得到它的工作（以下复制）。不完全理解makeRotationAxis()中的数学或为什么x和z轴上-115的偏移tetrahedron.position.set(-115, 0, -115)对于其矢量具有200的四面体是正确的。这是反复试验，会感觉更舒适，我明白了要做什么计算，所以我可以改变尺寸。

<!-- language: lang-js --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>three.js webgl - convex geometry</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
    <style> 
     body { 
      font-family: Monospace; 
      background-color: #000; 
      margin: 0px; 
      overflow: hidden; 
     } 

     canvas { width: 500px; height: 500px } 
    </style> 
</head> 
<body> 

    <script src="three.min.js"></script> 
    <script src="js/geometries/ConvexGeometry.js"></script> 
    <script src="js/Detector.js"></script> 

    <script> 

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

     var container; 
     var camera, scene, renderer; 

     init(); 
     animate(); 

     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.y = 400; 

      scene = new THREE.Scene(); 

      var light, object, materials; 

      scene.add(new THREE.AmbientLight(0x404040)); 

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

      materials = [ 
       new THREE.MeshLambertMaterial({ color: 0xffffff, wireframe: false, transparent: false, opacity: 0.5, wireframeLinewidth: 2, wireframeLinejoin: "miter" }) 
      ]; 

      //dummy line object 
      var dummy = new THREE.Mesh(new THREE.CubeGeometry(1, 500, 1), new THREE.MeshLambertMaterial()); 
      dummy.position.x = 0; 
      dummy.position.z = 0; 
      scene.add(dummy); 

      //tetrahedron points 
      var points = [ 
       new THREE.Vector3(0, 0, 200), //bottom right 
       new THREE.Vector3(0, 200, 0), //top 
       new THREE.Vector3(200, 0, 0), //bottom left 
       new THREE.Vector3(200, 200, 200) //bottom back 

      ];   

      tetrahedron = THREE.SceneUtils.createMultiMaterialObject(new THREE.ConvexGeometry(points), materials); 

      //fix the rotation so that the point of the tetrahedron points up 
      tetrahedron.applyMatrix(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, -1).normalize(), Math.atan(Math.sqrt(2)))); 

      //fix the offset 
      tetrahedron.position.set(-115, 0, -115); 

      //add the tetrahedron to the dummy line object 
      dummy.add(tetrahedron); 

      renderer = new THREE.WebGLRenderer({ antialias: true }); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

      render(); 
      stats.update(); 

     } 

     function render() { 

      var timer = Date.now() * 0.0001; 

      camera.position.x = 800; 
      camera.position.y = 500; 
      camera.position.z = 800; 

      camera.lookAt(scene.position); 

      for (var i = 0, l = scene.children.length; i < l; i ++) { 

       var object = scene.children[ i ]; 
       object.rotation.y = timer * 2.5; 

      } 

      renderer.render(scene, camera); 

     } 

    </script> 

</body>

来源

2016-01-23 13:30:59 garrettlynch

正确的倾斜和围绕y轴旋转

回答

相关问题