three.js - three.js - 把烟放在盒子里
问题描述
最近我在 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 );
}
...``
解决方案
使用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
使整个构造可见/不可见。
推荐阅读
- node.js - Nodejs & mongodb:如果记录不存在则插入记录。如果自上次记录以来发生更改,则插入新记录(未处理的承诺拒绝)
- vue.js - 父组件完成ajax调用后如何将道具传递给子组件?
- python - 如何在 Python 中进行游标锁定?
- python - 如何使用 Python Pandas 在数据框的最后一列中获取第一个具有货币格式的单元格的行索引
- javascript - GObject.ParamFlags.CONSTRUCT_ONLY 抛出错误,除非它也是 WRITABLE
- android - 如何正确找到物理相机 ID,Android Studio
- javascript - 如何在 Mocha 根级挂钩中设置超时?
- c - 如何使用硬件定时器在 STM32f7xx 上生成精确的 1us 中断
- python - Django搜索栏功能不产生结果
- image - ImageMagick:命令行支持格式但 C++ API 不支持?