用threejs 写一个流线效果代码
时间: 2024-05-04 08:15:15 浏览: 11
Sure, here is a sample code for creating streamlines effect using Three.js:
```js
// Create scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create vector field
const vectorField = (x, y, z) => {
const strength = 4;
const xd = Math.sin(Math.PI * y);
const yd = Math.sin(Math.PI * x);
const zd = Math.sin(Math.PI * z);
return new THREE.Vector3(xd * strength, yd * strength, zd * strength);
};
// Create streamlines particles
const particleCount = 500;
const particles = new Array(particleCount);
for (let i = 0; i < particleCount; i++) {
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const geometry = new THREE.SphereGeometry(0.05);
const particle = new THREE.Mesh(geometry, material);
particle.position.set(Math.random() * 8 - 4, Math.random() * 8 - 4, Math.random() * 8 - 4);
particles[i] = particle;
scene.add(particle);
}
// Animate streamlines particles
const animate = () => {
requestAnimationFrame(animate);
for (const particle of particles) {
const position = particle.position.clone();
const direction = vectorField(position.x, position.y, position.z).normalize();
const speed = 0.02;
particle.position.add(direction.multiplyScalar(speed));
particle.rotation.x += 0.01;
particle.rotation.y += 0.01;
}
renderer.render(scene, camera);
};
animate();
```
Hope that helps!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)