<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程044 - 创建多个立方体添加鼠标事件移过选中</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$('#myContainer')[0].appendChild(myRenderer.domElement);
var myScene = new THREE.Scene();
myScene.add(new THREE.AmbientLight(0xffffff));
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(622, 342, 443);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
//用于保存多个立方体
var myArray = [];
//创建多个立方体
var myGeometry = new THREE.BoxGeometry(80, 80, 80);
for (var i = 0; i < 10; i++) {
var myMaterial = new THREE.MeshBasicMaterial({
color: Math.random() * 0xffffff, opacity: 0.5
});
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myMesh.position.x = Math.random() * 480 - 140;
myMesh.position.y = Math.random() * 480 - 140;
myMesh.position.z = Math.random() * 480 - 140;
myScene.add(myMesh);
myArray.push(myMesh);
}
//渲染多个立方体
animate();
function animate() {
requestAnimationFrame(animate);
myRenderer.render(myScene, myCamera);
}
//添加鼠标移动事件监听器，检测鼠标的移动
document.addEventListener('mousemove', onDocumentMouseMove);
function onDocumentMouseMove(event) {
var myMouse = new THREE.Vector2();
myMouse.x = (event.clientX / window.innerWidth) * 2 - 1;
myMouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var myRaycaster = new THREE.Raycaster();
myRaycaster.setFromCamera(myMouse, myCamera);
//获取与射线相交的myArray[]的所有图形
var myIntersectObjects = myRaycaster.intersectObjects(myArray);
//这里操作第一个相交图形(使用鼠标选择的图形)
if (myIntersectObjects.length > 0) {
//设置该选择的立方体颜色为红色
var myObject = myIntersectObjects[0].object;
myObject.material.color.set(0xff0000);
}
}
</script>
</body>
</html>
