three.js 鼠标拾取

之前我有问过问题：怎么把加载的模型的每个点存到一个数组，方便鼠标拾取的时候调用？现在这个问题已经解决了。
其中一个问题是控制台一直提示.unprojectVector()要换成vector.unproject()。
鼠标拾取抄的别人老demo疯狂warning，因为要用ie测试，warning多的console看都看不见。所以还是先把它改了。改成什么样子我在three.js里找半天，还有提示说和Projector.js好像有关。其实就按照它说的换就就行了。

第一个变量是projector = new THREE.Projector();声明一个projector，我有试过就直接 var projector;都没有问题

然后var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);这里mouse.x和y代表屏幕坐标，0.5应该是预设的z坐标，我也不太清楚，毕竟代码是抄的，至于我抄的哪里的，已经忘记了，大部分用three.js的这个射线函数都差不多

接下来就是把原来本身的函数projector.unprojectVector( vector, camera );换成vector.unproject(camera);就好

 //声明一条射线 相机位置相关 具体原理不理解
 var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
 //hits:射线上的对象 pos:全局变量 一个数组,射线只能和这个数组里面的对象交互
 var hits = ray.intersectObjects(pos);

我再把这些放一起

//全局变量，反正你要让些作用域范围到下面的射线就行了
projector = new THREE.Projector();
var pos = [];
var selected;

//你需要在主函数里面加入监听
//我这里把场景放到container里了，一般抄的老demo都会把container替换成document，^_^然后就忘记把作用域从整个网页分出来了
 container.addEventListener('mousemove', onDocumentMouseMove, false);
 container.addEventListener('mousedown', onDocumentMouseDown, false);

//这个是怎么回事可以自己找找，就是获取屏幕x,y位置
 function onDocumentMouseMove(event) {
            mouse.x = (event.clientX / (1 * window.innerWidth)) * 2 - 1;
            mouse.y = -(event.clientY / (1 * window.innerHeight)) * 2 + 1;

        }

        function onDocumentMouseDown(event) {
            mouse.x = (event.clientX / (1 * window.innerWidth)) * 2 - 1;
            mouse.y = - (event.clientY / (1 * window.innerHeight)) * 2 + 1;           
            mouse.clicked = true;
        }

函数
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
//换成新的函数
vector.unproject(camera);
var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var hits = ray.intersectObjects(pos);
//判定鼠标点击
if (mouse.clicked) {
 if (hits.length > 0) {
 selected= hits[0].object;
 //接下来就可以对selected这个对象进行操作了，这个对象是一个有（geometry和material）的物体比如一个球，它同时存在在pos[]和hits[]的数组里
 }
 }

demo以后再发，这个用起来很方便的，先就这样