监听鼠标挪动，几何体变大变小
监听鼠标点击，弹出信息
应用办法：Raycaster
import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import Stats from 'three/examples/jsm/libs/stats.module'let container, statslet camera, scene, raycaster, rendererlet INTERSECTEDconst pointer = new THREE.Vector2()let clickPosX = 0, clickPosY = 0function onPointerMove(event) { pointer.x = (event.clientX / window.innerWidth) * 2 - 1 pointer.y = -(event.clientY / window.innerHeight) * 2 + 1 if (INTERSECTED) { INTERSECTED.scale.set(3, 3, 3) } render()}function onPointerClick(event) { pointer.x = (event.clientX / window.innerWidth) * 2 - 1 pointer.y = -(event.clientY / window.innerHeight) * 2 + 1 if (INTERSECTED) { alert('点击了' + INTERSECTED.name) } render()}function calcMousePosition(event, x, y) { // 决定信息弹窗的定位 var event = event || window.event if (event.pageX || event.pageY) { x = event.pageX y = event.pageY } else if (event.clientX || event.clientY) { x = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft y = event.clientY + document.documentElement.scrollTop + document.body.scrollTop } return { x: x, y: y }}function createDom() { const geometry = new THREE.BoxBufferGeometry(10, 10, 10) const material = new THREE.MeshBasicMaterial({ color: 0x00fa9a }) const mesh = new THREE.Mesh(geometry, material) mesh.name = '几何体1' scene.add(mesh) mesh.position.set(0, -5, 0) const geometry1 = new THREE.BoxBufferGeometry(10, 10, 10) const mesh1 = new THREE.Mesh(geometry1, material) mesh1.name = '几何体2' scene.add(mesh1) mesh1.position.set(0, 20, 0) const ambient = new THREE.AmbientLight(0xffffff, 1) scene.add(ambient) // var axesHelper = new THREE.AxesHelper(250) // scene.add(axesHelper)}function init() { scene = new THREE.Scene() scene.background = new THREE.Color(0xffffff) camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 1000 ) camera.position.set(18, 20, 100) renderer = new THREE.WebGLRenderer() renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) controls = new OrbitControls(camera, renderer.domElement) controls.addEventListener('change', render) window.addEventListener('resize', onWindowResize) document.addEventListener('mousemove', onPointerMove) document.addEventListener('click', onPointerClick) stats = new Stats() document.body.appendChild(stats.dom) raycaster = new THREE.Raycaster() createDom()}function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight)}function render() { stats.update() camera.updateMatrixWorld() raycaster.setFromCamera(pointer, camera) const intersects = raycaster.intersectObjects(scene.children, false) if (intersects.length > 0) { if (INTERSECTED != intersects[0].object) { if (INTERSECTED) { INTERSECTED.scale.set(1, 1, 1) INTERSECTED = null } INTERSECTED = intersects[0].object } } else { if (INTERSECTED) { INTERSECTED.scale.set(1, 1, 1) INTERSECTED = null } } renderer.render(scene, camera)}init()render()