three.js烟雾

three.js中可以使用THREE.Smoke和THREE.Fire类来实现烟雾和火焰效果。

下面是一个简单的烟雾效果的示例代码：

var container = document.getElementById('container');

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);
container.appendChild(renderer.domElement);

var smokeTexture = new THREE.TextureLoader().load('path/to/smoke.png');

var smokeMaterial = new THREE.MeshLambertMaterial({
  map: smokeTexture,
  transparent: true
});

var smokeGeo = new THREE.PlaneGeometry(300, 300);

var particleSystem = new THREE.Mesh(smokeGeo, smokeMaterial);
particleSystem.position.set(0, 0, -100);
scene.add(particleSystem);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  particleSystem.rotation.z += 0.005;

  renderer.render(scene, camera);
}
animate();

在这个示例中，我们使用THREE.TextureLoader来加载烟雾的纹理图像。然后我们创建一个THREE.PlaneGeometry作为烟雾的几何体，然后将其作为一个THREE.Mesh添加到场景中。

在animate函数中，我们旋转烟雾几何体，然后使用renderer.render方法渲染场景。

你可以通过更改烟雾的几何体大小、材质、位置以及旋转速度等参数来调整烟雾效果。