写一个threejs 线条生长得动画代码
时间: 2023-06-05 14:06:47 浏览: 262
好的,这是一个threejs 线条生长的动画代码示例:
```javascript
// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个数组来存储所有的线条
var lines = [];
// 创建一个函数来生成线条
function createLine() {
var points = [];
var height = Math.random() * 40 + 20;
var noise = 20;
for (var i = 0; i < 50; i++) {
var x = i * 0.2 - 5;
var y = (Math.sin(i * 0.4) + Math.cos(i * 0.5)) * height + (Math.random() - 0.5) * noise;
var z = Math.random() - 0.5;
points.push(new THREE.Vector3(x, y, z));
}
var material = new THREE.LineBasicMaterial({color: 0xffffff});
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var line = new THREE.Line(geometry, material);
line.progress = 0;
line.speed = Math.random() * 0.005 + 0.001;
return line;
}
// 添加线条到场景中
for (var i = 0; i < 20; i++) {
var line = createLine();
line.position.x = (Math.random() - 0.5) * 10;
line.position.y = (Math.random() - 0.5) * 10;
line.position.z = (Math.random() - 0.5) * 10;
lines.push(line);
scene.add(line);
}
// 设置相机位置
camera.position.z = 50;
// 创建一个函数来更新线条
function updateLines() {
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
// 让线条慢慢生长并移动
line.progress += line.speed;
var maxProgress = 50;
if (line.progress > maxProgress) {
line.progress = 0;
line.position.x = (Math.random() - 0.5) * 10;
line.position.y = (Math.random() - 0.5) * 10;
line.position.z = (Math.random() - 0.5) * 10;
}
line.geometry.setDrawRange(0, line.progress);
line.position.y -= 0.1;
}
}
// 创建一个循环来不断更新场景和渲染器
function animate() {
requestAnimationFrame(animate);
updateLines();
renderer.render(scene, camera);
}
animate();
```
这段代码使用了threejs库来创建一个场景、相机和渲染器,并在场景中随机生成了20个线条。这些线条在动画中慢慢生长并移动,直到它们到达指定的长度。动画通过每一帧更新线条的进度和位置来实现。