three.js - 識別管圓周上的點並從該點旋轉

下面是我對管幾何的場景的代碼。我從外部文件加載了200個座標作爲JSON數據。three.js - 識別管圓周上的點並從該點旋轉

  <!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>3d Model using HTML5 and three.js</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: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
      #info { 
        color:#000; 
      position: absolute; 
      top: 0px; width: 100%; 
      padding: 5px; 

      } 
     </style> 
    </head> 
    <body>    
     <div id="info">   
      WASD-move, RF-up/down, QE-roll, mouse-look around, mouse left/right click- zoom-in/out 
     </div>    
     <script src="three.min.js" type="text/javascript"></script> 
     <script src="Curve.js" type="text/javascript"></script>    
     <script src="Stats.js" type="text/javascript"></script> 
     <script src="Detector.js" type="text/javascript"></script>  
     <script src="path.js" type="text/javascript"></script> 

     <script> 

     // variables 
     var container, stats; 

     var camera, scene, renderer, controls; 

     var text, plane, tube, tubeMesh, parent; 

     var targetRotation = 0; 
     var targetRotationOnMouseDown = 0; 

     var mouseX = 0, mouseY = 0; var radius = 6371; 
     var mouseXOnMouseDown = 0; 

     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 

     var clock = new THREE.Clock(); 

     function plotPath() 
     {           
      var obj = getPath(); 
      var segments = 60; 
      var closed = false; 
      var debug = true; 
      var radiusSegments = 12; 
      var tube; 
      var points = []; 
      var x=0,y=0,z=0; 
      var extrudePath; 

      for(var i=0; i<obj.path.length; i++) 
      {        
       console.log(obj.path[i].point); 
       points.push(obj.path[i].point);                     
      } 

      extrudePath = new THREE.SplineCurve3(points);    
      tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);   

      tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({ 
       color: 0x000000, side: THREE.DoubleSide, 
       opacity: 0.5, transparent: true, wireframe: true}));  

      if (tube.debug) tubeMesh.add(tube.debug); 

      scene.add(tubeMesh); 

     } 

     init();        
     animate(); 

     function init(){ 
      // container 
      container = document.createElement('div'); 
      document.body.appendChild(container);   

      // scene    
      scene = new THREE.Scene(); 
      scene.fog = new THREE.FogExp2(0xcccccc, 0.002); 

      // renderer   
      renderer = new THREE.WebGLRenderer({ antialias: false }); 
      renderer.setClearColor(scene.fog.color, 1); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      // camera 
      camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000); 

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

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

      light = new THREE.AmbientLight(0x555555); 
      scene.add(light); 

      // CONTROLS 
      controls = new THREE.RollControls(camera); 
      controls.movementSpeed = 50; 
      controls.lookSpeed = 3; 
      controls.constrainVertical = [ -0.5, 0.5 ];   

      // Grid 
      geometry = new THREE.Geometry(); 
      geometry.vertices.push(new THREE.Vector3(- 500, 0, 0)); 
      geometry.vertices.push(new THREE.Vector3(500, 0, 0)); 

      for (var i = 0; i <= 20; i ++) { 

       line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 })); 
       line.position.z = (i * 50) - 500; 
       scene.add(line); 

       line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 })); 
       line.position.x = (i * 50) - 500; 
       line.rotation.y = 90 * Math.PI/180; 
       scene.add(line); 
      }     

      // projector 
      projector = new THREE.Projector(); 

      plotPath(); 

      // stats 
      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.top = '0px'; 
      stats.domElement.style.zIndex = 100; 
      container.appendChild(stats.domElement); 

      // events   
      window.addEventListener('resize', onWindowResize, false); 
     } 

     function onWindowResize() { 
      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

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

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

     function animate() {    
      requestAnimationFrame(animate); 
      render(); 
      update(); 
     } 

     function update(){ 
      controls.update(clock.getDelta()); 
      stats.update(); 
     }  

     function render() {   
      renderer.render(scene, camera); 
     } 
     </script>   
    </body> 
</html>

如何識別管圓周上的一個點以及如何從該點旋轉管？

Screenshot of 3d model

來源

2012-10-08 Valay

在你的循環，你一遍遍地重新分配網和父變量。另外，你可以請你重述一下你的問題嗎？目前尚不清楚你想要做什麼。 – WestLangley

我已根據您的建議更新了詳細信息[email protected] – Valay

在您的循環中，您將重新分配'extrudePath' varibale，並且不會聲明它。什麼是'dynamic'屬性和'dirtyVertices'？你需要他們嗎？什麼是'tube.debug'。什麼是'camera.left'用於？ – WestLangley

OrbitControls，例如，有一個屬性target其是兩個旋轉中心和camera查找在位置。

controls = new THREE.OrbitControls(camera);

您可以使用揀選更改相機的旋轉中心。

function onDocumentMouseDown(event) { 

    event.preventDefault(); 

    var vector = new THREE.Vector3( 
     (event.clientX/window.innerWidth) * 2 - 1, 
     - (event.clientY/window.innerHeight) * 2 + 1, 
     0.5); 

    projector.unprojectVector(vector, camera); 
    var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

    var intersects = ray.intersectObjects(objects);  

    if (intersects.length > 0) { 

     controls.target.copy(intersects[0].point); 

    } 

}

編輯：這裏是一個更新的小提琴：http://jsfiddle.net/eVkgs/30/

three.js所r.65

來源

2012-10-08 16:12:14 WestLangley

非常感謝。它可以工作，但是「OrbitControls」會使相機移動變得困難。使用'RollControls'，我可以輕鬆地遍歷整個管的幾何形狀。正如我所說，在管的圓周上有一定的值，並且爲了便於移動，用戶可以通過點擊一個點來顯示不同的值來旋轉管。我應該做什麼改變來實現這樣的功能？ - @WestLangley – Valay

我想我已經盡全力爲你做了。如果你自己想出來，你纔會真正學到這一點。我很高興幫助你開始。祝你好運。 – WestLangley

好的，再次感謝。任何建議將是偉大的幫助[email protected] – Valay

three.js - 識別管圓周上的點並從該點旋轉

回答

相關問題