JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.githubusercontent.com/jeromeetienne/threex.domevents/master/threex.domevents.js"></script>
<script src='http://threejs.org/build/three.js'></script>
<script src='http://threejs.org/examples/js/libs/tween.min.js'></script>
<script src='http://threejs.org/examples/js/controls/TrackballControls.js'></script>
CSS
html, body {
height: 100%;
}
body {
background-color: #ffffff;
margin: 0;
font-family: Arial;
overflow: hidden;
}
a {
color: #8888ff;
}
JavaScript
var camera, scene, renderer,controls;
var particlesTotal = 512,
positions = [],
objects = [],
current = 0;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 600, 400, 8000 );
camera.lookAt( new THREE.Vector3() );
scene = new THREE.Scene();
var material=new THREE.SpriteMaterial({
//map:THREE.ImageUtils.loadTexture('http://threejs.org/examples/textures/sprite.png'),
color:0xffffff
});
for ( var i = 0; i < particlesTotal; i ++ ) {
var object = new THREE.Sprite(material);
object.scale.x = 100;
object.scale.y = 100;
object.position.x = Math.random() * 4000 - 2000,
object.position.y = Math.random() * 4000 - 2000,
object.position.z = Math.random() * 4000 - 2000
scene.add( object );
objects.push( object );
}
transition();
var geometry = new THREE.BoxGeometry( 600, 600, 600 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.set( 100, 1000, 3000 );
var domEvents = new THREEx.DomEvents(camera, scene.domElement);
domEvents.addEventListener(cube, 'mouseover', function(event){
var offset = current * particlesTotal * 3;
var duration = 2000;
for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
var object = objects[ i ];
new TWEEN.Tween( object.position )
.to( {
x: positions[ j ],
y: positions[ j + 1 ],
z: positions[ j + 2 ]
}, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 3 )
.onComplete( transition )
.start();
current...