Three.js 学习2：

熊敬之
90 阅读5分钟

Three.js常用辅助开发工具列表

工具名称功能描述示例应用场景
OrbitControls实现相机轨道控制（旋转/缩放/平移）场景导航、模型查看器
GUI (lil-gui)创建可视化参数控制面板实时调整材质/光源/相机参数
AxesHelper显示3D坐标轴（红:X轴, 绿:Y轴, 蓝:Z轴）场景方向参考、物体定位
GridHelper创建网格平面辅助线地面参考、空间测量
BoxHelper显示物体的包围盒碰撞检测可视化、物体边界
CameraHelper显示相机视锥体相机视野范围调试
PointLightHelper可视化点光源位置和影响范围光源位置调试、光照范围设置
DirectionalLightHelper可视化平行光方向和范围太阳光模拟、方向光源调试
SpotLightHelper可视化聚光灯锥形范围舞台灯光、聚光灯效果调试
VertexNormalsHelper显示顶点法线方向法线方向检查、光照计算调试
RectAreaLightHelper可视化矩形区域光源平面光源效果调试
PositionalAudioHelper可视化3D音效位置和范围空间音效调试

完整示例代码（集成常用辅助工具）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Three.js 辅助工具演示</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
            background: rgba(0,0,0,0.6);
            padding: 10px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="info">Three.js辅助工具演示 - 使用鼠标旋转/缩放场景 | GUI面板控制参数</div>
    
    <!-- 引入Three.js核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <!-- 引入OrbitControls -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <!-- 引入lil-gui -->
    <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.16.1/dist/lil-gui.umd.min.js"></script>
    
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x222222);
        
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            60, 
            window.innerWidth / window.innerHeight, 
            0.1, 
            1000
        );
        camera.position.set(150, 150, 150);
        
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);
        
        // 初始化GUI
        const gui = new lil.GUI();
        gui.title('场景控制面板');
        
        // ================== 创建几何体 ==================
        const geometry = new THREE.BoxGeometry(40, 40, 40);
        const material = new THREE.MeshStandardMaterial({ 
            color: 0xff3300,
            roughness: 0.5,
            metalness: 0.5
        });
        const cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true;
        scene.add(cube);
        
        // 添加GUI控制立方体
        const cubeFolder = gui.addFolder('立方体设置');
        cubeFolder.addColor(material, 'color').name('颜色');
        cubeFolder.add(material, 'roughness', 0, 1, 0.01).name('粗糙度');
        cubeFolder.add(material, 'metalness', 0, 1, 0.01).name('金属度');
        cubeFolder.add(cube.position, 'x', -100, 100).name('X位置');
        cubeFolder.add(cube.position, 'y', -100, 100).name('Y位置');
        cubeFolder.add(cube.position, 'z', -100, 100).name('Z位置');
        cubeFolder.open();
        
        // ================== 创建光源 ==================
        // 点光源
        const pointLight = new THREE.PointLight(0xffffff, 500, 200);
        pointLight.position.set(80, 80, 80);
        pointLight.castShadow = true;
        scene.add(pointLight);
        
        // 添加点光源GUI控制
        const lightFolder = gui.addFolder('点光源设置');
        lightFolder.addColor(pointLight, 'color').name('颜色');
        lightFolder.add(pointLight, 'intensity', 0, 1000).name('强度');
        lightFolder.add(pointLight.position, 'x', -200, 200).name('X位置');
        lightFolder.add(pointLight.position, 'y', -200, 200).name('Y位置');
        lightFolder.add(pointLight.position, 'z', -200, 200).name('Z位置');
        lightFolder.open();
        
        // ================== 添加辅助工具 ==================
        // 1. 坐标轴辅助
        const axesHelper = new THREE.AxesHelper(100);
        scene.add(axesHelper);
        
        // 2. 网格地面辅助
        const gridHelper = new THREE.GridHelper(200, 20, 0x444444, 0x222222);
        scene.add(gridHelper);
        
        // 3. 点光源辅助
        const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
        scene.add(pointLightHelper);
        
        // 4. 包围盒辅助
        const boxHelper = new THREE.BoxHelper(cube, 0x00ff00);
        scene.add(boxHelper);
        
        // 5. 相机辅助
        const cameraHelper = new THREE.CameraHelper(camera);
        scene.add(cameraHelper);
        
        // 添加辅助工具GUI控制
        const helperFolder = gui.addFolder('辅助工具');
        const helperState = {
            axes: true,
            grid: true,
            light: true,
            box: true,
            camera: false
        };
        
        helperFolder.add(helperState, 'axes').name('坐标轴')
            .onChange(v => axesHelper.visible = v);
            
        helperFolder.add(helperState, 'grid').name('网格')
            .onChange(v => gridHelper.visible = v);
            
        helperFolder.add(helperState, 'light').name('光源位置')
            .onChange(v => pointLightHelper.visible = v);
            
        helperFolder.add(helperState, 'box').name('包围盒')
            .onChange(v => boxHelper.visible = v);
            
        helperFolder.add(helperState, 'camera').name('相机视锥')
            .onChange(v => cameraHelper.visible = v);
        helperFolder.open();
        
        // ================== 添加OrbitControls ==================
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.screenSpacePanning = false;
        controls.minDistance = 50;
        controls.maxDistance = 500;
        
        // ================== 添加窗口大小自适应 ==================
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // ================== 动画循环 ==================
        function animate() {
            requestAnimationFrame(animate);
            
            // 更新控制器
            controls.update();
            
            // 更新光源辅助
            pointLightHelper.update();
            
            // 更新包围盒
            boxHelper.update();
            
            // 渲染场景
            renderer.render(scene, camera);
        }
        
        animate();
    </script>
</body>
</html>

关键工具功能说明及使用场景

  1. OrbitControls 轨道控制器

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 阻尼系数
    • 作用：允许用户通过鼠标交互控制相机（左键旋转/右键平移/滚轮缩放）
    • 场景：所有需要用户交互的3D场景

  2. GUI (lil-gui) 可视化控制面板

    const gui = new lil.GUI();
gui.addColor(material, 'color').name('颜色');
gui.add(light.position, 'x', -200, 200).name('X位置');
    • 作用：创建实时可调的参数控制面板
    • 场景：调试材质参数、光源位置、动画参数等

  3. AxesHelper 坐标轴辅助

    const axesHelper = new THREE.AxesHelper(100); // 100为轴长
scene.add(axesHelper);
    • 作用：显示X/Y/Z坐标轴（红/绿/蓝）
    • 场景：场景方向参考、物体定位

  4. GridHelper 网格辅助

    const gridHelper = new THREE.GridHelper(200, 20); // 200大小, 20分割数
scene.add(gridHelper);
    • 作用：创建地面网格参考线
    • 场景：地面参考、空间测量

  5. PointLightHelper 点光源辅助

    const pointLightHelper = new THREE.PointLightHelper(light, 10); // 10为辅助器大小
scene.add(pointLightHelper);
    • 作用：可视化点光源位置和影响范围
    • 场景：光源位置调试

  6. BoxHelper 包围盒辅助

    const boxHelper = new THREE.BoxHelper(mesh, 0x00ff00); // 绿色包围盒
scene.add(boxHelper);
    • 作用：显示物体的轴对齐包围盒(AABB)
    • 场景：碰撞检测可视化、物体边界调试

使用技巧

  1. 组合使用辅助工具：同时开启坐标轴+网格+光源辅助，全面理解场景空间关系
  2. GUI动态控制：通过GUI面板实时切换辅助工具的可见性
  3. 辅助工具更新：对于动态物体，每帧需要调用helper.update()更新位置
  4. 性能考虑：在正式发布版本中移除不必要的辅助工具
  5. 颜色编码：使用不同颜色区分不同类型辅助工具（如红色表示警告区域）

这个完整示例集成了Three.js最常用的开发辅助工具，您可以直接复制使用，通过GUI面板自由切换各种辅助工具的可见性，实时调整场景参数，极大提升开发调试效率。

avatar
文章
阅读
粉丝