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
		}
		
	}
})

打印出来的内容如下

整体代码：

<script type="module">
	import * as THREE from 'three';
	import { OrbitControls } from './jsm/controls/OrbitControls.js';
	let camera, scene, renderer;
	const textureLoader = new THREE.TextureLoader();
	const arrGroup = []
	// 初始化射线辅助器
	const raycaster = new THREE.Raycaster();
	init();
	animate();
	function init() {
		// 场景
		scene = new THREE.Scene();
		scene.background = new THREE.Color(0xffffff); // 设置场景背景颜色

		// 相机   (fov, aspect, near, far)
		camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 200 );
		camera.position.set( 10, 5, 20 );

		// 创建环境光
		const light = new THREE.AmbientLight(0xffffff, 1)
		scene.add(light)

		// 渲染器
		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		// 添加物体
		addCubeFn()

		// 控制器
		const controls = new OrbitControls( camera, renderer.domElement );
		controls.minDistance = 5;
		controls.maxDistance = 100;

		window.addEventListener( 'resize', onWindowResize );

		// 定义点击事件
		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
				}
				
			}
		})
	}

	function addCubeFn() {
		// 物体1
		const cubeGeometry1 = new THREE.BoxGeometry(1,1,1)
		const cubeMaterial1 = new THREE.MeshBasicMaterial({color: 0xffff00})
		const cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1)
		cube1.name = 'yellow'
		scene.add( cube1 );

		// 物体1
		const cubeGeometry2 = new THREE.BoxGeometry(2,2,2)
		const cubeMaterial2 = new THREE.MeshBasicMaterial({color: 0x000000})
		const cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2)
		cube2.position.set(2,0,2)
		cube2.name = 'black'
		scene.add( cube2 );
              
		arrGroup.push(cube1, cube2)
		console.log('arrGroup:', arrGroup)
	}

	function onWindowResize() {
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	// 持续渲染
	function animate() {
		requestAnimationFrame( animate );
		renderer.render( scene, camera );
	}

</script>