three.js - 使用投影機和光線選擇一個頂點

我的總體目標是能夠加載一個.obj文件，它是一個人體。允許用戶選擇兩個頂點並用標誌突出顯示它們。然後從原始.obj文件中找到兩個頂點的索引並運行一個php腳本來測量兩個頂點之間的距離。three.js - 使用投影機和光線選擇一個頂點

我已經嘗試了一些批判，但沒有運氣，通常圍繞選擇兩個頂點。我目前的做法使用的obj加載器工作正常，但我無法找到我點擊使用投影儀和雷什麼頂點。它總是返回一個空數組。

這是我的代碼到目前爲止，一旦交集數組不是空的，我嘗試從文件中找到最近的頂點，更改對象的顏色並更改點擊的面。

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - loaders - OBJ loader</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: white; 
       color: #fff; 
       margin: 0px; 
       overflow: hidden; 
      } 
      #info { 
       color: #fff; 
       position: absolute; 
       top: 10px; 
       width: 100%; 
       text-align: center; 
       z-index: 100; 
       display:block; 
      } 
      #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer } 
     </style> 
    </head> 

<body> 
    <script src="javascripts/Three.js"></script> 
    <script src="javascripts/OBJLoader.js"></script> 

    <script> 

     var container, stats; 

     var camera, scene, renderer, model; 

     var mouseX = 0, mouseY = 0; 

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


     init(); 
     animate(); 


     function init() { 

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

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 1; 
      scene.add(camera); 
      camera.position.y = -4; 

      var ambient = new THREE.AmbientLight(0x101030); 
      scene.add(ambient); 

      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 0, 1).normalize(); 
      scene.add(directionalLight); 

      var loader = new THREE.OBJLoader(); 
      loader.load("img/originalMeanModel.obj", function (object) { 
       model = object; 
       scene.add(model); 
      }); 

      // RENDERER 
      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 
      document.addEventListener('mousedown', onDocumentMouseDown, false); 

     } 

     function onDocumentMouseDown(event){ 

      console.log('Morphable-body-obj: Width '+ window.innerWidth) ; 
      console.log('Morphable-body-obj: Height '+ window.innerHeight) ; 

      var vector = new THREE.Vector3 ((event.clientX/window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight)*2+1, 0.5); 
      var projector = new THREE.Projector(); 
      projector.unprojectVector(vector, camera); 
      var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()); 
      var intersects = ray.intersectObject(scene); 
      console.log(intersects); 
      if (intersects.length > 0) 
       { 
       var xhr = new XMLHttpRequest(); 
       xhr.open('GET', '/img/originalMeanModel.obj', false); 
       xhr.send(null); 
       var text = xhr.responseText; 
       var origText = text; 
       var lines = text.split("\n"); 
       for (i=0; i<6449; i++){ 
        lines[i] = lines[i].split(" "); 
       } 
       var low = Math.sqrt(
         (Math.pow((intersects[0].point.x - parseFloat(lines[0][1])), 2))+ 
         (Math.pow((intersects[0].point.y - parseFloat(lines[0][2])), 2))+ 
         (Math.pow((intersects[0].point.z - parseFloat(lines[0][3])), 2)) 
        ); 

       var c = 0; 
       for(i=1; i<6449; i++){ 
        var temp = Math.sqrt(
         (Math.pow((intersects[0].point.x - parseFloat(lines[i][1])), 2))+ 
         (Math.pow((intersects[0].point.y - parseFloat(lines[i][2])), 2))+ 
         (Math.pow((intersects[0].point.z - parseFloat(lines[i][3])), 2)) 
       ); 
        if(temp < low){ 
        low = temp; 
        c=i; 
        } 
       } 

       console.log(
        'Mouse coordinates:' + '\nx = ' + intersects[0].point.x + '\ny = ' + intersects[0].point.y + '\nz = ' + intersects[0].point.z +'\n'+ 
        'Nearest Vertex' + '\nx= ' + lines[c][1] + '\ny= ' + lines[c][2] + '\nz =' + lines[c][3] + "\n" + 
        'Difference' + '\nx= ' + (intersects[0].point.x - lines[c][1]) + '\ny= ' + (intersects[0].point.y - lines[c][2]) + '\nz= ' + (intersects[0].point.z - lines[c][3]) 
       ); 

       intersects[0].object.materials[0].color = new THREE.Color(Math.random() * 0xffffff); 

       intersects[0].face.color = new THREE.Color(0xffffff); 
       intersects[0].object.geometry.colorsNeedUpdate = true; 
       intersects[0].object.geometry.dynamic = true; 
       } 
      else{ 
       alert('error'); 
      } 
     } 

     function onDocumentMouseMove(event) { 
      mouseX = (event.clientX - windowHalfX)/2; 
      mouseY = (event.clientY - windowHalfY)/2; 
     } 

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

     function render() { 
      camera.lookAt(scene.position); 
      renderer.render(scene, camera); 
     } 

    </script> 

</body>

有問題的obj文件可以在這裏https://dl.dropbox.com/u/23384412/originalMeanModel.obj

發現如果任何人都可以在正確的方向，將是非常讚賞指向我。

在此先感謝！ :)

來源

2012-06-26 TrueWheel

爲了解決這個問題我使用此代碼執行intersectObject當我做它的模式不是場景中創建由obj的加載器返回的對象網格

  var loader = new THREE.OBJLoader(); 
      loader.load("img/originalMeanModel.obj", function (object) { 

       object.children[0].geometry.computeFaceNormals(); 
       var geometry = object.children[0].geometry; 
         console.log(geometry); 
       THREE.GeometryUtils.center(geometry); 
       var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors }); 
       mesh = new THREE.Mesh(geometry, material); 
       model = mesh; 
       // model = object; 
       scene.add(model); 
      });

然後

var intersects = ray.intersectObject(model);

來源

2012-06-26 13:28:06 TrueWheel

感謝您發佈您的解決方案！遇到同樣的問題，沒有任何例子使用OBJLoader的加載模型。 – Ozone

three.js - 使用投影機和光線選擇一個頂點

回答

相關問題