Last active
November 20, 2020 21:51
-
-
Save merlinnusr/eb1660d00f4b277c2d779247fc272ab0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Init position | |
var mousePos = { x: 0.5, y: 0.5 }; | |
var phase = 0; | |
// Scroll to figure | |
document.addEventListener("mousemove", function (event) { | |
mousePos = { | |
x: event.clientX / window.innerWidth, | |
y: event.clientY / window.innerHeight, | |
}; | |
}); | |
// End | |
// Scene and camera | |
const existingCanvasElement = document.getElementById("world_canvas") | |
var scene = new THREE.Scene(); | |
var camera = new THREE.PerspectiveCamera( | |
95, | |
window.innerWidth / window.innerHeight, | |
0.1, | |
1000 | |
); | |
camera.position.z = 30; | |
// End | |
var renderer = new THREE.WebGLRenderer(existingCanvasElement); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
document.body.appendChild(renderer.domElement); | |
window.addEventListener("resize", function () { | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
camera.aspect = window.innerWidth / window.innerHeight; | |
camera.updateProjectionMatrix(); | |
}); | |
// Geometry, Material and Size for particles | |
var size = 0.25; | |
var geometry = new THREE.CubeGeometry(size, size, size); | |
var material = new THREE.MeshBasicMaterial({ | |
transparent: true, | |
color: 0x5DC9F5, | |
opacity: 0.55, | |
side: THREE.DoubleSide, | |
}); | |
// End | |
// Particles per column and row | |
var y_axis = 70; | |
var x_axis = y_axis / 2; | |
var particles = y_axis * x_axis; | |
// End | |
// Explosion variation | |
var side = Math.pow(particles, 1 / 10); | |
var radius = 20; | |
// End | |
var parentContainer = new THREE.Object3D(); | |
scene.add(parentContainer); | |
function posInBox(place) { | |
return (place / side - 0.5) * radius; | |
} | |
// Plant the seeds, grow some trees in a grid! | |
for (let i = 0; i < y_axis; i++) { | |
var step = (Math.PI * 2 * i) / y_axis; | |
for (let j = 0; j < x_axis; j++) { | |
var elevation = Math.PI * (j / x_axis - 0.5); | |
var particle = new THREE.Mesh(geometry, material); | |
parentContainer.add(particle); | |
let dest = new THREE.Vector3(); | |
// Sphere calculations | |
dest.z = Math.sin(step) * Math.cos(elevation) * radius; // z pos in sphere | |
dest.x = Math.cos(step) * Math.cos(elevation) * radius; // x pos in sphere | |
dest.y = Math.sin(elevation) * radius; // y pos in sphere | |
// End | |
// Calculations to explode | |
particle.position.x = posInBox(parentContainer.children.length % side); | |
particle.position.y = posInBox( | |
Math.floor(parentContainer.children.length / side) % side | |
); | |
particle.position.z = posInBox( | |
Math.floor(parentContainer.children.length / Math.pow(side, 2)) % side | |
); | |
// End | |
particle.userData = { | |
dests: [dest, particle.position.clone()], | |
speed: new THREE.Vector3(), | |
}; | |
} | |
} | |
// End | |
function render() { | |
// Speed to rotate | |
phase += 0.00065; | |
for (let i = 0, l = parentContainer.children.length; i < l; i++) { | |
let particle = parentContainer.children[i]; | |
let dest = particle.userData.dests[ | |
Math.floor(phase) % particle.userData.dests.length | |
].clone(); | |
let diff = dest.sub(particle.position); | |
particle.userData.speed.divideScalar(1.02); // Some drag on the speed | |
particle.userData.speed.add(diff.divideScalar(600)); // Modify speed by a fraction of the distance to the dest | |
particle.position.add(particle.userData.speed); | |
particle.lookAt(dest); | |
} | |
parentContainer.rotation.y = phase * 3; | |
parentContainer.rotation.x = (mousePos.y - 0.5) * Math.PI; | |
parentContainer.rotation.z = (mousePos.x - 0.5) * Math.PI; | |
renderer.render(scene, camera); | |
requestAnimationFrame(render); | |
} | |
render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment