three.js学习笔记 射线

 Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。

 给鼠标添加射线：

1.新建一个Raycasting对象

var	raycaster = new THREE.Raycaster();

2 .新建一个Vector2对象保存鼠标位置信息,监听鼠标移动事件

var	mouse = new THREE.Vector2();
document.addEventListener('mousemove', onDocumentMouseMove, false);

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

3 .定义拾取物体后的操作,并放到渲染函数中

//定义射线拾取的物体(光线穿透物体)
var intersects = raycaster.intersectObjects(scene.children);
	//拾取物体数大于0时
	if (intersects.length > 0) {
		//获取第一个物体
		if (INTERSECTED != intersects[0].object) {
			if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
			INTERSECTED = intersects[0].object;
			INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
			//改变物体的颜色(红色)
			INTERSECTED.material.color.set( 0xff0000 );
					}
			} else {
			if (INTERSECTED) INTERSECTED.material.color.set(INTERSECTED.currentHex);
			INTERSECTED = null;
			}

完整代码：

fork me on github blog:   https://chenjy1225.github.io/