mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
22bd108ab1
Changed normal map shader to multiply specular component with diffuse weighting as specular highlights were appearing in the dark parts. Changed camera look speed in minecraft and terrain demos, they were too fast - I guess as everything got faster with antialiasing off. Reenabled antialiasing in few demos where it was too ugly without (basically anything with lines and without postprocessing). Fixed again spurious invisible characters in empaempa's code (which are breaking everything and are hard to hunt as they look like spaces).
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">
|
|
<style type="text/css">
|
|
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 type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Detector.js"></script>
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
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.Camera( 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.addObject( 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.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
|
|
camera.updateMatrix();
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
var time = new Date().getTime() * 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>
|