three.js拾取glb的完整代码

当使用Three.js加载和渲染GLB文件时，拾取（picking）是指通过鼠标点击或触摸屏幕来选择和交互3D场景中的对象。下面是一个使用Three.js进行GLB拾取的完整代码示例：

// 导入Three.js库
import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 5);
scene.add(light);

// 加载GLB模型
const loader = new THREE.GLTFLoader();
loader.load('model.glb', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});

// 创建射线投射器
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 监听鼠标点击事件
function onMouseClick(event) {
  // 计算鼠标点击位置的归一化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线投射器的起点和方向
  raycaster.setFromCamera(mouse, camera);

  // 计算射线与场景中的对象的交叉点
  const intersects = raycaster.intersectObjects(scene.children, true);

  // 如果有交叉点，则输出被点击的对象
  if (intersects.length > 0) {
    console.log('Clicked object:', intersects[0].object);
  }
}

// 监听鼠标点击事件
window.addEventListener('click', onMouseClick, false);

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

这段代码首先创建了一个Three.js场景、相机和渲染器。然后，通过GLTFLoader加载GLB模型，并将其添加到场景中。接下来，创建了一个射线投射器，并监听鼠标点击事件。当鼠标点击时，计算鼠标点击位置的归一化设备坐标，并更新射线投射器的起点和方向。然后，使用射线投射器计算射线与场景中的对象的交叉点，并输出被点击的对象。