From 0db6cef81463bbf990e23c1d418411157e71fbfd Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Mon, 21 May 2018 14:34:24 +0200 Subject: [PATCH] Updated butterflies --- demos/threejs/butterflies/css/index.css | 2 +- demos/threejs/butterflies/demo.js | 116 +++++++++++++----------- demos/threejs/butterflies/index.html | 2 +- 3 files changed, 67 insertions(+), 53 deletions(-) diff --git a/demos/threejs/butterflies/css/index.css b/demos/threejs/butterflies/css/index.css index 02d68291..bf232726 100644 --- a/demos/threejs/butterflies/css/index.css +++ b/demos/threejs/butterflies/css/index.css @@ -7,7 +7,7 @@ bottom: -5px; width: 100vmin; transform: translate(-50%, 0%); - opacity: 0.8; + opacity: 1; } img { max-width: 100%; diff --git a/demos/threejs/butterflies/demo.js b/demos/threejs/butterflies/demo.js index 3b2f8f63..3b219168 100644 --- a/demos/threejs/butterflies/demo.js +++ b/demos/threejs/butterflies/demo.js @@ -20,7 +20,7 @@ let THREECAMERA; let ISDETECTED = false; let BUTTERFLYMESH; let BUTTERFLYOBJ3D = false; -let NUMBERBUTTERFLIES = 7; +let NUMBERBUTTERFLIES = 10; let MIXERS = []; let ACTIONS = []; let ISANIMATED = false; @@ -59,51 +59,59 @@ function init_threeScene(spec) { butterflyLoader.load( './models/butterfly/butterfly.json', (geometry) => { - const materialBody = new THREE.MeshStandardMaterial({ + const materialBody = new THREE.MeshBasicMaterial({ color: 0x000000, - roughness: 1, - depthWrite: false - }) + depthWrite: false, + opacity: 0 + }); // let butterFlyInstance // let action; - let clips - let clip - let xRand - let yRand - let zRand - let indexTexture - let sign + let clips; + let clip; + let xRand; + let yRand; + let zRand; + let indexTexture; + let sign; - BUTTERFLYOBJ3D = new THREE.Object3D() + BUTTERFLYOBJ3D = new THREE.Object3D(); for (let i = 2; i <= NUMBERBUTTERFLIES; i++) { - const indexTexture = i % 6 === 0 ? 1 : i % 6 + const indexTexture = i % 6 === 0 ? 1 : i % 6; - const materialWings = new THREE.MeshPhongMaterial({ + const materialWings = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load(`./models/butterfly/Wing_Diffuse_${indexTexture}.jpg`), alphaMap: new THREE.TextureLoader().load('./models/butterfly/Wing_Alpha.jpg'), transparent: true, - morphTargets: true - }) - const butterFlyInstance = new THREE.Mesh(geometry, [materialWings, materialBody]) + morphTargets: true, + opacity: 0 + }); + const butterFlyInstance = new THREE.Mesh(geometry, [materialWings, materialBody]); - xRand = Math.random() * 4 - 2 - yRand = Math.random() * 1 - 0.5 + 1 - zRand = Math.random() * 0.5 - 0.25 + xRand = Math.random() * 2 - 1; + yRand = Math.random() * 1 + 0.1; + zRand = Math.random() * 1 + 0.5; - sign = i % 2 === 0 ? -1 : 1 + sign = i % 2 === 0 ? -1 : 1; + + butterFlyInstance.position.set(xRand, yRand, zRand); + butterFlyInstance.scale.multiplyScalar(0.55); + butterFlyInstance.visible = false; + let BUTTERFLYINSTANCEOBJ3D = new THREE.Object3D(); + setTimeout(() => { + animateFly(butterFlyInstance, 0.01*(i + 3)*0.1 + 0.002, i) + butterFlyInstance.material[0].opacity = 1; + butterFlyInstance.material[1].opacity = 1; + butterFlyInstance.visible = true + BUTTERFLYINSTANCEOBJ3D.add(butterFlyInstance) + }, 600*i); - butterFlyInstance.position.set(xRand, yRand, zRand) - butterFlyInstance.scale.multiplyScalar(0.65) - animateFly(butterFlyInstance, 0.01*(i + 3)*0.1 + 0.002) - let BUTTERFLYINSTANCEOBJ3D = new THREE.Object3D() - BUTTERFLYINSTANCEOBJ3D.add(butterFlyInstance) // CREATE BATTEMENT D'AILE ANIMATION if (!ISANIMATED) { // This is where adding our animation begins - const mixer = new THREE.AnimationMixer(butterFlyInstance) + const mixer = new THREE.AnimationMixer(butterFlyInstance); clips = butterFlyInstance.geometry.animations; @@ -113,16 +121,20 @@ function init_threeScene(spec) { const action = mixer.clipAction(clip); - ACTIONS.push(action) - MIXERS.push(mixer) + ACTIONS.push(action); + MIXERS.push(mixer); } // ADD OUR LIGHTS INSIDE THE BUTTERFLY TO CREATE A GLOWING EFFECT - let pointLight = new THREE.PointLight(0x77ffff, 1.5, 1, 0.1); + let pointLight = new THREE.PointLight(0x77ffff, 1, 1, 0.1); pointLight.position.set(xRand, yRand, zRand); - animatePointLightButterfly(pointLight) - animateFly(pointLight, 0.005*i + 0.02) + + + setTimeout(() => { + animatePointLightButterfly(pointLight); + animateFly(pointLight, 0.01*(i + 3)*0.1 + 0.002, i); + }, 600*i); // Helps visualise the pointlights added // uncomment to display @@ -130,22 +142,22 @@ function init_threeScene(spec) { var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize ); // THREESCENE.add( pointLightHelper ) - BUTTERFLYINSTANCEOBJ3D.add(pointLight) + BUTTERFLYINSTANCEOBJ3D.add(pointLight); - BUTTERFLYOBJ3D.add(BUTTERFLYINSTANCEOBJ3D) + BUTTERFLYOBJ3D.add(BUTTERFLYINSTANCEOBJ3D); } // We play the animation for each butterfly and shift their cycles // by adding a small timeout ACTIONS.forEach((a, index) => { setTimeout(() => { - a.play() + a.play(); }, index*33) }) - THREEFACEOBJ3DPIVOTED.add(BUTTERFLYOBJ3D) + THREEFACEOBJ3DPIVOTED.add(BUTTERFLYOBJ3D); } ) @@ -199,37 +211,39 @@ function init_threeScene(spec) { // CREATE A LIGHT const ambient = new THREE.AmbientLight(0xffffff, 0.8); - THREESCENE.add(ambient) + THREESCENE.add(ambient); // CREATE A SPOTLIGHT var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(100, 1000, 100); - spotLight.castShadow = true; - THREESCENE.add(spotLight) + THREESCENE.add(spotLight); } // end init_threeScene() -function animateFly(mesh, theta) { +function animateFly(mesh, theta, index) { let count = 0 + const x = mesh.position.x//(Math.random() + 0.5) * 1.5 + const y = mesh.position.y// Math.random()*0.2 + 0.1 + const z = mesh.position.z// Math.random()*0.2 + 0.1 + setInterval(() => { - count += 1 - const x = mesh.position.x - const z = mesh.position.z - const y = mesh.position.y + count += 0.01 + const rotY = mesh.rotation._y mesh.position.set( - x * Math.cos(theta) + z * Math.sin(theta), - (y * Math.cos(theta) + x * Math.sin(theta))*0.96 + 0.05, - z * Math.cos(theta) - x * Math.sin(theta) - ) - mesh.rotation.set(-(x * Math.cos(theta) + z * Math.sin(theta)), (y * Math.cos(theta) + x * Math.sin(theta)), -(z * Math.cos(theta) - x * Math.sin(theta))) + (x + (index*0.01)) * Math.cos(count), // - 1 * Math.sin(count/100+(Math.PI/40)), + (y*0.5 + (index*0.01)) * Math.sin(count*0.2*index) + 1, + (z + (index*0.01)) * Math.sin(count) // - 1 * Math.sin(count/100+(Math.PI/40)) + ) + mesh.rotation.y = (1.5 * Math.cos(count+0.05)) + 0.3; + mesh.rotation.z = 0.2 * Math.sin(count) }, 16) } function animatePointLightButterfly (light) { const opacityUp = new TWEEN.Tween(light) - .to({ intensity: 1 }, 2000) + .to({ intensity: 0.6 }, 2000) const opacityDown = new TWEEN.Tween(light) .to({ intensity: 0 }, 2000) diff --git a/demos/threejs/butterflies/index.html b/demos/threejs/butterflies/index.html index aff2b2fd..9d02125c 100644 --- a/demos/threejs/butterflies/index.html +++ b/demos/threejs/butterflies/index.html @@ -4,7 +4,7 @@ - JEELIZ FACE FILTER : THREE.JS CUBE DEMO + JEELIZ FACE FILTER : BUTTERFLIES