View difference between Paste ID: <a href="/Jsh22qKL">Jsh22qKL</a> and <a href="/gmzDSMJf">gmzDSMJf</a>

<!DOCTYPE html>
1		<!DOCTYPE html>
2		<html lang="en">
3		<head>
4		<title>Clickable Objects</title>
5		<meta charset="utf-8">
6		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7		<style>
8		body {
9		background-color: #f0f0f0;
10		margin: 0px;
11		overflow: hidden;
12		}
13		</style>
14		</head>
15		<body>
16
17		<script src="../build/three.min.js"></script>
18
19		<script src="js/libs/tween.min.js"></script>
20
21		<script>
22
23		var container;
24		var camera, scene, projector, renderer;
25
26		init();
27		animate();
28
29		function init() {
30
31		container = document.createElement( 'div' );
32		document.body.appendChild( container );
33
34		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
35		camera.position.y = 300;
36		camera.position.z = 500;
37
38		scene = new THREE.Scene();
39
40		var geometry = new THREE.CubeGeometry( 100, 100, 100 );
41
42		for(var i = 0; i < 20; i++){
43		var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
44		object.position.x = Math.random() * 800 - 400;
45		object.position.y = Math.random() * 800 - 400;
46		object.position.z = Math.random() * 800 - 400;
47		object.scale.x = Math.random() * 2 + 1;
48		object.scale.y = Math.random() * 2 + 1;
49		object.scale.z = Math.random() * 2 + 1;
50		object.rotation.x = Math.random() * 2 * Math.PI;
51		object.rotation.y = Math.random() * 2 * Math.PI;
52		object.rotation.z = Math.random() * 2 * Math.PI;
53		scene.add( object );
54		}
55
56
57		projector = new THREE.Projector();
58
59		renderer = new THREE.CanvasRenderer();
60		renderer.setSize( window.innerWidth, window.innerHeight );
61
62		container.appendChild(renderer.domElement);
63
64
65		document.addEventListener( 'mousedown', onDocumentMouseDown, false );
66
67		//
68
69
70		}
71
72
73		function onDocumentMouseDown( event ) {
74
75		event.preventDefault();
76
77		var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
78		projector.unprojectVector( vector, camera );
79
80		var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
81
82		var intersects = raycaster.intersectObjects( scene.children );
83
84		if ( intersects.length > 0 ) {
85
86		new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
87		x: Math.random() * 800 - 400,
88		y: Math.random() * 800 - 400,
89		z: Math.random() * 800 - 400 }, 2000 )
90		.easing( TWEEN.Easing.Elastic.Out).start();
91
92		new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
93		x: Math.random() * 2 * Math.PI,
94		y: Math.random() * 2 * Math.PI,
95		z: Math.random() * 2 * Math.PI }, 2000 )
96		.easing( TWEEN.Easing.Elastic.Out).start();
97
98		}
99
100		}
101
102		//
103
104		function animate() {
105
106		requestAnimationFrame( animate );
107
108		render();
109
110		}
111
112		var radius = 600;
113		var theta = 0;
114
115		function render() {
116
117		TWEEN.update();
118
119		theta += 0.1;
120
121		camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
122		camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
123		camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
124		camera.lookAt( scene.position );
125
126		renderer.render( scene, camera );
127
128		}
129
130		</script>
131
132		</body>
133		</html>