Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器

以下是使用Three.js进行开发时可能会用到的一些功能的代码示例：

1. tween动画：

// 假设已有对象object3D
let tween = new TWEEN.Tween(object3D.position).to({ x: 100, y: 200, z: 300 }, 1000);
tween.onUpdate(function() {
    // 更新对象位置
});
tween.start();

2. 光线投射拾取：

// 设置相机和场景
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
 
function onMouseClick(event) {
    // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 使用相机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);
 
    // 计算物体和射线的交点
    let intersects = raycaster.intersectObjects(scene.children);
 
    for (let i = 0; i < intersects.length; i++) {
        // 处理交点信息
        console.log(intersects[i].object.name); // 输出碰撞的对象名称
    }
}
 
// 绑定鼠标点击事件
document.addEventListener('click', onMouseClick, false);

3. 加载.obj/.mtl外部文件：

let onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        // 可计算加载进度
        console.log((xhr.loaded / xhr.total * 100) + '%');
    }
};
 
let onError = function (xhr) {
};
 
let manager = new THREE.LoadingManager();
manager.addHandler(/\.dds$/i, new THREE.DDSLoader());
 
let textureLoader = new THREE.TextureLoader(manager);
let materialLoader = new THREE.MTLLoader(manager);
materialLoader.setTextureLoader(textureLoader);
materialLoader.load('path/to/your/material.mtl', function (materials) {
    // 加载.mtl文件后的回调函数
    let objLoader = new THREE.OBJLoader(manager);
    objLoader.setMaterials(materials);
    objLoader.load('path/to/your/model.obj', function (object) {
        // 加载.obj文件后的回调函数
        scene.add(object);
    }, onProgress, onError);
});

4. 使用相机控制器：

// 导入相机控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
// 创建相机控制器实例
let controls = new OrbitControls(camera, renderer.domElement);
 
// 设置控制器选项
controls.enableDamping = true;
 
// 更新相机控制器
function animate() {
    requestAnimationFrame(animate);
 
    // 更新控制器
    controls.update();
 
    // 渲染场景
    renderer.render(scene, camera);
}
 
// 启动动画循环
animate();

这些代码示例展示了如何在Three.js中使用Tween动画库进行对象位置的更新，如何使用光线投射拾取与场景中对象的交互，以及如何加载外部的.obj和.mtl模型文件和使用相机控制器来提升用户交互体验。