Skip to content

Commit

Permalink
Updated butterflies
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjlaa
bjlaa committed May 21, 2018
1 parent a98ac78 commit 0db6cef
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 53 deletions.
2 changes: 1 addition & 1 deletion demos/threejs/butterflies/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
bottom: -5px;
width: 100vmin;
transform: translate(-50%, 0%);
opacity: 0.8;
opacity: 1;
}
img {
max-width: 100%;
Expand Down
116 changes: 65 additions & 51 deletions demos/threejs/butterflies/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -113,39 +121,43 @@ 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
var sphereSize = 1;
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);
}
)

Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion demos/threejs/butterflies/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en-EN" />

<title>JEELIZ FACE FILTER : THREE.JS CUBE DEMO</title>
<title>JEELIZ FACE FILTER : BUTTERFLIES</title>

<!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
<script type="text/javascript" src="../../../dist/jeelizFaceFilter.js"></script>
Expand Down

0 comments on commit 0db6cef

Please sign in to comment.