Three.JS- 在 Collada 中检测交叉点（Ray Casting）答案

【问题标题】：Three.JS- Detecting intersection in Collada (Ray Casting)Three.JS- 在 Collada 中检测交叉点（Ray Casting）
【发布时间】：2012-09-19 23:53:22
【问题描述】：

我的原型系统中有一个功能可以在您单击 Collada 文件时检测交叉点。相交函数如下：

  function Intersectfun ( event ) {
   mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
   mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   var toIntersect = [];
   THREE.SceneUtils.traverseHierarchy(scene, function (child) {
   if (child instanceof THREE.Mesh) {
    toIntersect.push(child);
   }
  });
  // Unproject the vector
  projector.unprojectVector(vector, camera);
  var ray = new THREE.Ray( camera.position, vector.subSelf(camera.position).normalize());
  var intersects = ray.intersectObjects( toIntersect );
  if(intersects.length){
   target = intersects[0].object;
  }
 }

但是当我使用：

controls = new THREE.TrackballControls( camera, renderer.domElement );

相交矩阵为空，无法检测到相交！！！

但是当我使用时：

 controls = new THREE.TrackballControls( camera );

我可以得到 intersects 矩阵，它工作得很好，但是发现了另一个问题（看这里：Three.JS -- conflict Camera controls with a textbox in a scene）

上面的函数有代码吗？供您参考，我使用了一个简单的相机：

 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );

谢谢。

【问题讨论】：

标签： three.js collada intersect raycasting

【解决方案1】：

这不是 Collada 问题。

改为这样做：

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

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

//controls
controls = new THREE.TrackballControls(camera, container);

换句话说，使用container 而不是renderer.domElement 作为轨迹球控件的第二个参数。

http://jsfiddle.net/QXUwa/

【讨论】：