Всем привет!
Возник вопрос в ходе разработки:
На сайт нужно поместить вот такой вот "дымок"
https://codepen.io/teolitto/pen/KwOVvL по бокам окна.
Я сделал вот что :
$(window).ready(function () {
var camera2, scene2, renderer2,
geometry2, material2, mesh2;
init();
animate();
function init() {
stats2 = new Stats();
stats2.setMode(0);
stats2.domElement.style.position = 'absolute';
stats2.domElement.style.left = '0px';
stats2.domElement.style.top = '0px';
document.body.appendChild(stats2.domElement);
clock = new THREE.Clock();
renderer2 = new THREE.WebGLRenderer({ alpha: true }); //allows transparency for line 264
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.setClearColor(0xff0000, 0);
scene2 = new THREE.Scene();
camera2 = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 10000 );
camera2.position.z = 1000;
camera2.filmOffset = 150;
scene2.add( camera2 );
geometry2 = new THREE.CubeGeometry( 200, 200, 200 );
material2 = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } );
mesh2 = new THREE.Mesh( geometry2, material2 );
//scene.add( mesh2 );
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: 0, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})
text = new THREE.Mesh(textGeo,textMaterial);
text.position.z = 800;
scene2.add(text);
light = new THREE.DirectionalLight(0xffffff,0.5);
light.position.set(-1,0,1);
scene2.add(light);
smokeTexture = THREE.ImageUtils.loadTexture('https://image.ibb.co/g93LW8/Smoke_Element.png');
smokeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, emisive: 0xffffff, map: smokeTexture, transparent: true});
smokeGeo = new THREE.PlaneGeometry(300,300);
smokeParticles = [];
for (p = 0; p < 150; p++) {
var particle2 = new THREE.Mesh(smokeGeo,smokeMaterial);
particle2.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100);
particle2.rotation.z = Math.random() * 360;
scene2.add(particle2);
smokeParticles.push(particle2);
}
document.body.appendChild(renderer2.domElement).setAttribute('id','smokeCanvas2');
}
function animate() {
// note: three.js includes requestAnimationFrame shim
stats2.begin();
delta = clock.getDelta();
requestAnimationFrame( animate );
evolveSmoke();
render();
stats2.end();
}
function evolveSmoke() {
var sp2 = smokeParticles.length;
while(sp2--) {
smokeParticles[sp2].rotation.z += (delta * 0.2);
}
}
function render() {
mesh2.rotation.x += 0.005;
mesh2.rotation.y += 0.01;
cubeSineDriver += .01;
mesh2.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
renderer2.render( scene2, camera2 );
}
});
$(window).ready(function () {
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({ alpha: true }); //allows transparency for line 264
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xff0000, 0);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
camera.filmOffset = 150;
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: 0, 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://image.ibb.co/g93LW8/Smoke_Element.png');
smokeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, emisive: 0xffffff, 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).setAttribute('id','smokeCanvas1');
}
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 );
}
});
в общем вызвал два раза функцию построения canvas объекта, но проблема в том что анимируется только один объет, второй просто стоит на месте, но всё же так-же генерируется из этого куска кода. Посоветуйте правильное решение проблемы
