mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
193 lines
4.4 KiB
HTML
193 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - lines - spheres</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
background-color: #000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a {
|
|
color:#0078ff;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 10px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
z-index:100;
|
|
}
|
|
|
|
a {
|
|
color: #ff0080;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0080ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var SCREEN_WIDTH = window.innerWidth,
|
|
SCREEN_HEIGHT = window.innerHeight,
|
|
|
|
r = 450,
|
|
|
|
mouseX = 0, mouseY = 0,
|
|
|
|
windowHalfX = window.innerWidth / 2,
|
|
windowHalfY = window.innerHeight / 2,
|
|
|
|
camera, scene, renderer;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
var container;
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
|
|
camera.position.z = 1000;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
var i, line, vector1, vector2, material, p,
|
|
parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.75, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 1.25, 0x000833, 0.8, 1 ],
|
|
[ 3.0, 0xaaaaaa, 0.75, 2 ], [ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ], [ 5.5, 0xffffff, 0.125, 1 ] ],
|
|
|
|
geometry = new THREE.Geometry();
|
|
|
|
|
|
for ( i = 0; i < 1500; i ++ ) {
|
|
|
|
vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
|
|
vector1.normalize();
|
|
vector1.multiplyScalar( r );
|
|
|
|
vector2 = vector1.clone();
|
|
vector2.multiplyScalar( Math.random() * 0.09 + 1 );
|
|
|
|
geometry.vertices.push( new THREE.Vertex( vector1 ) );
|
|
geometry.vertices.push( new THREE.Vertex( vector2 ) );
|
|
|
|
}
|
|
|
|
for( i = 0; i < parameters.length; ++i ) {
|
|
|
|
p = parameters[ i ];
|
|
|
|
material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
|
|
|
|
line = new THREE.Line( geometry, material, THREE.LinePieces );
|
|
line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
|
|
line.originalScale = p[ 0 ];
|
|
line.rotation.y = Math.random() * Math.PI;
|
|
line.updateMatrix();
|
|
scene.add( line );
|
|
|
|
}
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = event.clientX - windowHalfX;
|
|
mouseY = event.clientY - windowHalfY;
|
|
|
|
}
|
|
|
|
function onDocumentTouchStart( event ) {
|
|
|
|
if ( event.touches.length > 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentTouchMove( event ) {
|
|
|
|
if ( event.touches.length == 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
}
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
|
|
camera.lookAt( scene.position );
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
var time = Date.now() * 0.0001;
|
|
|
|
for( var i = 0; i < scene.objects.length; i ++ ) {
|
|
|
|
scene.objects[ i ].rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
|
|
|
|
if ( i < 5 ) scene.objects[i].scale.x = scene.objects[i].scale.y = scene.objects[i].scale.z = scene.objects[i].originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|