threejs中点击物体事件

// 定义点击事件
document.addEventListener('click', event => {
	// 鼠标控制对象
	const mouse = new THREE.Vector2(); 
	// 得到鼠标相对于容器的坐标
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
	// 执行射线检测
	raycaster.setFromCamera(mouse, camera);
	// 判断指定的对象中哪些被该光线照射到了,在arrGroup中筛选
	const intersects = raycaster.intersectObjects(arrGroup)
	// const intersects = raycaster.intersectObjects(scene.children)
	// 射线涉及到的物体集合
	console.log('intersects:', intersects)

	if (intersects.length > 0) {
		const clickObj = intersects[0]
		// 旋转网格(mesh)
		console.log('点击的当前模型:', clickObj)
		if(clickObj.object.name == 'black'){
			clickObj.object.rotation.x += 10 * Math.PI / 180
			clickObj.object.rotation.y += 10 * Math.PI / 180
			clickObj.object.rotation.z += 10 * Math.PI / 180
		}
		
	}
})

打印出来的内容如下
threejs中点击物体事件_第1张图片
整体代码:


你可能感兴趣的:(threejs,js,3d,前端)