threejs基本知识2
组、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);