threejs（组、clone、gui可视调参工具的简单使用）

原创已于 2026-05-26 15:02:44 修改 · 500 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2022-11-09 21:18:58 首次发布

threejs 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用three.js库创建一个3D汽车模型，包括前双轮组和后双轮组的构建，并通过dat.GUI库实现了相机位置的可视化参数调整。博主详细展示了如何创建轮子、轮毂以及横梁，并将它们组合成汽车模型，最后将汽车模型添加到场景中。

组、gui可视调参工具


      // gui可视化调参 （单个调参）
      const gui = new dat.GUI();
      gui.add(camera.position, "x", -20, 20).name("相机的x轴位置");
      gui.add(camera.position, "y", -20, 20);
      gui.add(camera.position, "z", -20, 20);


      // gui 多个折叠调参
      const folder = gui.addFolder("相机位置");
      folder.add(camera.position, "x", -20, 20);
      folder.add(camera.position, "y", -20, 20);
      folder.add(camera.position, "z", -20, 20);

      // 创建汽车组
      const car = new THREE.Group();
      
      // 公共材质（材质颜色）
      const material = new THREE.MeshNormalMaterial({ color: 0xffff00 });

      // 创建前双轮组
      const doubleWheel = new THREE.Group();
      
      // 创建单轮组
      const wheel = new THREE.Group();

      // 创建轮子圆环
      const torus = new THREE.Mesh(
        new THREE.TorusGeometry(1, 0.15, 16, 100),
        material
      );
      wheel.add(torus);

      // 创建轮毂 圆柱
      const cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry(0.1, 0.1, 2),
        material
      );
      
      // 循环生成多个轮毂 并将轮毂放入单轮组中
      for (let i = 0; i < 10; i++) {
        const cloneCylinder = cylinder.clone();
        cloneCylinder.rotation.z = ((Math.PI * 2) / 10) * i;
        wheel.add(cloneCylinder);
      }
      
      // 克隆单轮组
      const whee2 = wheel.clone();
      whee2.position.z = 3;
	  
	  // 创建轮组横梁
      const cylinder2 = new THREE.Mesh(
        new THREE.CylinderGeometry(0.1, 0.1, 3),
        material
      );
      cylinder2.position.z = 1.5
      cylinder2.rotation.x = 90 / 180 * Math.PI
      
      // 将两个单轮组以及横梁都放入前双轮组中
      doubleWheel.add(wheel);
      doubleWheel.add(whee2);
      doubleWheel.add(cylinder2)
		
	  // 克隆前双轮组生成后双轮组
      const doubleWheel2 = doubleWheel.clone()
      doubleWheel2.position.x = 4
      
      // 将前后双轮组放入汽车组中与汽车形成整体
      car.add(doubleWheel);
      car.add(doubleWheel2)
      
      // 将汽车放入场景中
      scene.add(car);