把烟放进盒子里

Question

最近我在CodePen上偶然发现了这段模拟烟雾的代码:

https://codepen.io/teolitto/pen/KwOVvL

正如你所看到的，每个粒子都被添加到场景中。

我想把它们都放到一个父网格中，比如一个盒子或一个平面，以便能够让它们一次都在/可见。

我使用了例子中尺寸为500,500,500的盒子，并将所有粒子放入场景中，但烟雾有点变形，并获得某种日冕。

请问我该怎么做才能做到这一点呢?

提前感谢。

…

var camera, scene, renderer,
geometry, material, mesh;

init();
animate(); 
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene.add( camera );

geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } );
mesh = new THREE.Mesh( geometry, material );
//scene.add( mesh );
cubeSineDriver = 0;

textGeo = new THREE.PlaneGeometry(300,300);
THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS
textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png');
textMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff, opacity: 1, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})
text = new THREE.Mesh(textGeo,textMaterial);
text.position.z = 800;
scene.add(text);
light = new THREE.DirectionalLight(0xffffff,0.5);
light.position.set(-1,0,1);
scene.add(light);

smokeTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png');
smokeMaterial = new THREE.MeshLambertMaterial({color: 0x00dddd, map: smokeTexture, transparent: true});
smokeGeo = new THREE.PlaneGeometry(300,300);
smokeParticles = [];
for (p = 0; p < 150; p++) {
var particle = new THREE.Mesh(smokeGeo,smokeMaterial);
particle.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100);
particle.rotation.z = Math.random() * 360;
scene.add(particle);
smokeParticles.push(particle);
}

document.body.appendChild( renderer.domElement );
}

function animate() {

// note: three.js includes requestAnimationFrame shim
stats.begin();
delta = clock.getDelta();
requestAnimationFrame( animate );
evolveSmoke();
render();
stats.end();
}

function evolveSmoke() {
var sp = smokeParticles.length;
while(sp--) {
smokeParticles[sp].rotation.z += (delta * 0.2);
}
}
function render() {

mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
cubeSineDriver += .01;
mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
renderer.render( scene, camera );

}

…">

Answer 1

使用Group

let smokeGroup = new THREE.Group();
for (p = 0; p < 150; p++) {
var particle = new THREE.Mesh(smokeGeo,smokeMaterial);
particle.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100);
particle.rotation.z = Math.random() * 360;
smokeGroup.add(particle);
smokeParticles.push(particle);
}
scene.add(smokeGroup);

您可以使用smokeGroup.visible使整个结构可见/不可见。