实现
模型只有其中的一根线条 加载完模型后 将其圆形排列一周
要实现圆形排列一周可以自己计算sin和cos实现，更简单的可以使用vector3的setFromCylindricalCoords方法实现
该方法计算返回圆柱上的点，圆柱上的点由参数决定
使用方法：
for (let i = 0; i < 36; i++) {const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.1),new THREE.MeshStandardMaterial());helper.add(box);box.position.setFromCylindricalCoords(10,(360 / 36) * i * (Math.PI / 180),0);}
即可实现如下排列一周效果
如果要每个位置朝向内 可以将角度设置给rotation
box.rotation.y = (360 / 36) * i * (Math.PI / 180);
应用到模型上
创建一个group作为所有线条的容器方便整体位置调整
并在循环中使用clone方法创建实例 然后设置点的位置
因为模型是横着的 所有将其旋转90度
helper.loadGltf("/models/line_bg.glb").then((gltf) => {const mesh = gltf.scene.getObjectByName("line_bg") as Mesh;const group = new THREE.Group();helper.add(group);for (let i = 0; i < 36; i++) {const item = mesh.clone();group.add(item);item.position.setFromCylindricalCoords(10,(360 / 36) * i * (Math.PI / 180),0);item.rotateX(Math.PI / 2);}});
如下效果
让其横过来并让其靠近一点
group.rotateX(Math.PI / 2);
group.position.z = 100;
调整缩放和一点点位置的偏移让其产生错乱的感觉
item.scale.x = Math.random() * 2;
item.scale.y = Math.random() * 2;
item.position.addScalar((0.5 - Math.random()) * 2);
item.position.z += (0.5 - Math.random()) * 10;
最后让其之显示中间部分 使用聚光灯SpotLight
const spotLight = new THREE.SpotLight(new THREE.Color("#ffffff"), 2);
将其添加到相机 然后将相机添加到scene中，这样相机更灵活随着视角移动
helper.camera.add(spotLight);
helper.add(helper.camera);
至此并没有什么明显变化
设置聚光灯的角度，将其照射范围缩小
spotLight.angle = 0.3;
如此只有中间部分有灯光 才可以显示 但是边缘很硬没有模糊的感觉
设置光影衰减属性默认为0不衰减 取值范围0-1 将其设置为1
spotLight.penumbra = 1;
ok静态效果实现 下面加入 入场动画 由远及近
gsap.to(group.position, { z: 100, duration: 1 });
