Three.js鼠标点击交互实例

以下是一个基本的 Three.js 鼠标点击交互例子，可以在点击场景中的立方体时改变其颜色和尺寸。

// 创建场景
var scene = new THREE.Scene();

// 创建立方体
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 创建一个射线投射器
var raycaster = new THREE.Raycaster();

// 创建鼠标位置向量
var mouse = new THREE.Vector2();

// 监听鼠标点击事件
document.addEventListener('mousedown', onDocumentMouseDown, false);

// 鼠标点击处理函数
function onDocumentMouseDown(event) {
  event.preventDefault();
  
  // 计算鼠标位置与窗口大小和坐标的比例
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // 设置射线起点与终点
  raycaster.setFromCamera(mouse, camera);

  // 计算射线与立方体的相交点
  var intersects = raycaster.intersectObject(cube);

  // 如果相交点存在，则改变立方体颜色和尺寸
  if (intersects.length > 0) {
    cube.material.color.setHex(Math.random() * 0xffffff);
    cube.scale.set(Math.random() + 0.5, Math.random() + 0.5, Math.random() + 0.5);
  }
}

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在上面的代码中，我们首先创建一个场景和一个红色立方体，然后创建相机和渲染器并将它们添加到页面中。然后我们创建一个射线投射器和一个鼠标位置向量，并监听鼠标点击事件。在鼠标点击处理函数中，我们计算射线和立方体的相交点，如果存在相交点，则改变立方体的颜色和尺寸。最后，我们定义一个动画函数，将场景渲染到屏幕上。

当用户点击页面中的立方体时，立方体的颜色和尺寸随机改变。可以尝试在页面中添加更多的几何体和交互效果，以创建更丰富的 Three.js 应用程序。