home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

All examples now use RequestAnimationFrame.js (pheww!)

Browse Source
This commit is contained in:
Mr.doob
2011-02-22 04:45:38 +00:00
parent f474b91918
commit 9297fb975e
44 changed files with 1818 additions and 1497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/canvas_interactive_voxelpainter.html
+1 -1
View File
@@ -145,7 +145,7 @@
} else {
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
examples/misc_lights_test.html
+21 -29
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - lights - point + directional - webgl</title>
<title>three.js misc - lights - point + directional</title>
<meta charset="utf-8">
<style type="text/css">
@@ -116,7 +116,7 @@
<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -144,18 +144,15 @@
var bcanvas = document.getElementById( 'rcanvas' );
var bwebgl = document.getElementById( 'rwebgl' );
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
loop();
animate();
//render_canvas = !has_gl;
bwebgl.style.display = has_gl ? 'inline' : 'none';
bcanvas.className = render_canvas ? 'button' : 'button inactive';
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
@@ -180,8 +177,7 @@
mesh.position.z = 500 * ( Math.random() - 0.5 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
scene.addObject( mesh );
}
@@ -206,7 +202,6 @@
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
@@ -270,24 +265,25 @@
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var r = 0, counter = 0;
function loop() {
function render() {
counter == 30 ? scene.removeLight( directionalLight ) : counter ++;
if( counter == 30 ) {
scene.removeLight( directionalLight );
} else {
counter++;
}
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
@@ -303,21 +299,17 @@
scene.objects[i].rotation.z += 0.05;
scene.objects[i].updateMatrix();
}
lightMesh.position.x = 200*Math.cos(r);
lightMesh.position.z = 200*Math.sin(r);
lightMesh.updateMatrix();
lightMesh.position.x = 200 * Math.cos( r );
lightMesh.position.z = 200 * Math.sin( r );
r += 0.1;
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
stats.update();
}
function log(text) {
examples/misc_materials_multimaterials.html
+15 -8
View File
@@ -46,6 +46,7 @@
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -80,15 +81,12 @@
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
animate();
//render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
@@ -167,7 +165,7 @@
var loader = new THREE.Loader(),
callback = function( geometry ) { createScene( geometry) };
loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
//loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callback } );
@@ -284,7 +282,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -293,8 +302,6 @@
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
stats.update();
}
function log(text) {
examples/misc_uqbiquity_test.html
+17 -11
View File
@@ -87,14 +87,12 @@
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
window.onload = init;
var SCREEN_WIDTH = window.innerWidth / 3;
var SCREEN_HEIGHT = window.innerHeight;
var AMOUNT = 100;
@@ -111,7 +109,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
@@ -234,8 +233,8 @@
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
loop();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
@@ -246,9 +245,18 @@
}
function loop() {
requestAnimationFrame( loop, container );
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -266,8 +274,6 @@
svgRenderer.render( scene, camera );
webglRenderer.render( scene, camera );
stats.update();
}
</script>
examples/misc_webglrenderer2_sandbox.html
+16 -8
View File
@@ -101,6 +101,7 @@
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -118,12 +119,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
// loop();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -212,6 +209,8 @@
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function generateTexture( r, g, b ) {
@@ -252,15 +251,24 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
renderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log( text ) {
examples/webgl_geometry_blenderexport_colors.html
+33 -26
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - io - blender - vertex colors - webgl</title>
<title>three.js webgl - io blender - vertex colors</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -30,17 +30,17 @@
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - blender export - webgl</div>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - io blender - vertex colors</div>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/Stats.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
var container, stats;
@@ -53,6 +53,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
@@ -62,9 +64,9 @@
camera.position.z = 1800;
scene = new THREE.Scene();
//scene.addLight( new THREE.AmbientLight( 0x333333 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
light.position.normalize();
@@ -72,7 +74,7 @@
var loader = new THREE.Loader();
loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -84,22 +86,19 @@
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
loop();
}
function createScene( geometry ) {
geometry.materials[0][0].shading = THREE.FlatShading;
var material = [ new THREE.MeshFaceMaterial(),
new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } )
];
var material = [ new THREE.MeshFaceMaterial(), new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } ) ];
mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
@@ -107,22 +106,30 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
requestAnimationFrame( loop, renderer.domElement );
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
if ( mesh ) {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
}
renderer.render( scene, camera );
stats.update();
}
examples/webgl_geometry_colors.html
+30 -20
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - vertex colors - webgl</title>
<title>three.js webgl - geometry - vertex colors</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -30,12 +30,14 @@
</head>
<body>
<div id="container"></div>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
@@ -51,10 +53,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -64,7 +64,7 @@
camera.position.z = 1800;
scene = new THREE.Scene();
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
light.position.normalize();
@@ -72,7 +72,7 @@
var shadowMaterial = new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/shadow.png' ) } );
var shadowGeo = new Plane( 300, 300, 1, 1 );
mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
mesh.position.y = - 250;
mesh.rotation.x = - 90 * Math.PI / 180;
@@ -91,15 +91,15 @@
scene.addObject( mesh );
var color, p, colors = [], colors2 = [], colors3 = [],
geometry = new Icosahedron( 1 ),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry();
for( var i = 0; i < geometry.vertices.length; i++ ) {
p = geometry.vertices[ i ].position;
color = new THREE.Color( 0xffffff );
color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
colors[ i ] = color;
@@ -116,21 +116,21 @@
geometry3.vertices = geometry2.vertices = geometry.vertices;
geometry3.faces = geometry2.faces = geometry.faces;
geometry2.sortFacesByMaterial();
geometry3.sortFacesByMaterial();
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
var materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertex_colors: true } ),
new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
];
mesh = new THREE.Mesh( geometry, materials );
mesh.position.x = -400;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
@@ -170,13 +170,23 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render( scene, camera );
stats.update();
}
examples/webgl_geometry_dynamic.html
+40 -33
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - dynamic - webgl</title>
<title>three.js webgl - geometry - dynamic</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -36,27 +36,27 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
window.onload = init;
var container, stats;
var camera, scene, renderer;
var mesh, texture,geometry, material;
var worldWidth = 128, worldDepth = 128,
@@ -71,6 +71,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
@@ -81,7 +83,7 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
//var light = new THREE.PointLight( 0xffffff, 2 );
//light.position.y = 500;
//scene.addLight( light );
@@ -92,42 +94,42 @@
geometry = new Plane( 20000, 20000, worldWidth - 1, worldDepth - 1 );
var i, j, il, jl;
for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
}
for( i = 0; i < geometry.uvs.length; i++ ) {
var uvs = geometry.uvs[ i ];
for ( j = 0, jl = uvs.length; j < jl; j++ ) {
uvs[ j ].u *= 5;
uvs[ j ].v *= 5;
}
}
//console.log( "triangles: " + geometry.faces.length * 2 + " faces: " + geometry.faces.length + " vertices: " + geometry.vertices.length );
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var texture = ImageUtils.loadTexture( "textures/water.jpg" );
texture.wrap_s = texture.wrap_t = THREE.RepeatWrapping;
material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = - 90 * Math.PI / 180;
scene.addObject( mesh );
renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.innerHTML = "";
container.appendChild( renderer.domElement );
@@ -141,11 +143,9 @@
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
loop();
}
@@ -184,7 +184,7 @@
mouseY = event.clientY - windowHalfY;
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
@@ -222,13 +222,22 @@
}
}
function loop() {
requestAnimationFrame( loop, renderer.domElement );
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.01;
if ( moveForward ) camera.translateZ( - 10 );
if ( moveBackward ) camera.translateZ( 10 );
if ( moveLeft ) camera.translateX( - 10 );
@@ -257,12 +266,10 @@
mesh.geometry.__dirtyVertices = true;
//mesh.geometry.__dirtyNormals = true;
renderer.render(scene, camera);
stats.update();
}
renderer.render(scene, camera);
}
</script>
examples/webgl_geometry_large_mesh.html
+65 -56
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - large mesh - webgl</title>
<title>three.js webgl - geometry - large mesh</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -22,7 +22,7 @@
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Large mesh test</h1>
@@ -30,25 +30,26 @@
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
<p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
<br/>
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow for this demo and only diffuse material works there.
<p>Use the flag --allow-file-access-from-files if working localy in Chrome.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -65,37 +66,34 @@
var canvasRenderer, webglRenderer;
var loader;
var mesh, zmesh, lightMesh;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
animate();
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
@@ -107,9 +105,9 @@
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function init() {
container = document.createElement('div');
@@ -147,7 +145,7 @@
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
if ( render_gl ) {
try {
@@ -160,7 +158,7 @@
catch (e) {
}
}
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -173,38 +171,38 @@
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
var s = (new Date).getTime(),
callback = function( geometry ) { createScene( geometry, s ) };
//loader.loadAscii( { model: 'obj/lucy/Lucy100k_slim.js', callback: callback } );
loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: callback } );
}
function createScene( geometry, start ) {
addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
loader.statusDomElement.style.display = "none";
log( "geometry.vertices: " + geometry.vertices.length );
log( "geometry.faces: " + geometry.faces.length );
log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -212,21 +210,32 @@
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var r = 0;
function loop() {
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
r += 0.01;
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
@@ -235,40 +244,40 @@
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
</script>
examples/webgl_geometry_minecraft.html
+22 -15
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - minecraft - webgl</title>
<title>three.js webgl - geometry - minecraft</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -40,25 +40,24 @@
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
window.onload = init;
var container, stats;
@@ -79,6 +78,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
@@ -187,8 +188,6 @@
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
loop();
}
@@ -297,10 +296,19 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
requestAnimationFrame( loop, renderer.domElement );
if ( moveForward ) camera.translateZ( - 15 );
if ( moveBackward ) camera.translateZ( 15 );
@@ -316,7 +324,6 @@
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
renderer.render(scene, camera);
stats.update();
}
examples/webgl_geometry_minecraft_ao.html
+24 -17
View File
@@ -47,28 +47,27 @@
<button id="baot">texture + ao</button>
</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
window.onload = init;
var fogExp2 = true;
var container, stats;
var camera, scene, renderer;
@@ -88,6 +87,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
@@ -97,14 +98,14 @@
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
else
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
camera.target.position.z = - 100;
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
camera.target.position.y = camera.position.y;
scene = new THREE.Scene();
if( fogExp2 )
scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
else
@@ -486,8 +487,6 @@
document.getElementById( "bao" ).addEventListener( "click", function() { mat.map = m_ao.map; }, false );
document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
document.getElementById( "bt" ).addEventListener( "click", function() { mat.map = m_t.map; }, false );
loop();
}
@@ -880,9 +879,18 @@
}
function loop() {
requestAnimationFrame( loop, renderer.domElement );
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.translateZ( - 15 );
if ( moveBackward ) camera.translateZ( 15 );
@@ -901,7 +909,6 @@
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
renderer.render(scene, camera);
stats.update();
}
examples/webgl_geometry_terrain.html
+25 -15
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - terrain - webgl</title>
<title>three.js webgl - geometry - terrain</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -30,23 +30,25 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
var container, stats;
@@ -67,10 +69,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -250,7 +250,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.translateZ( - 15 );
if ( moveBackward ) camera.translateZ( 15 );
@@ -266,8 +277,7 @@
camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
examples/webgl_geometry_terrain2.html
+25 -15
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - terrain 2 - webgl</title>
<title>three.js webgl - geometry - terrain 2</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -30,24 +30,26 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/PRNG.js"></script>
<script type="text/javascript" src="js/SimplexNoise.js"></script>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/PRNG.js"></script>
<script type="text/javascript" src="js/SimplexNoise.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
var container, stats;
@@ -68,10 +70,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -328,7 +328,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.translateZ( - 10 );
if ( moveBackward ) camera.translateZ( 10 );
@@ -344,8 +355,7 @@
camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
examples/webgl_geometry_terrain_fog.html
+29 -18
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - terrain + fog - webgl</title>
<title>three.js webgl - geometry - terrain + fog</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -30,28 +30,30 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.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 ( ! THREE.Detector.webgl ) {
THREE.Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
var fogExp2 = true;
var container, stats;
var camera, scene, renderer;
@@ -70,10 +72,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -86,7 +86,7 @@
camera.target.position.z = - 100;
scene = new THREE.Scene();
if ( fogExp2 )
scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
else
@@ -261,7 +261,19 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.translateZ( - 5 );
if ( moveBackward ) camera.translateZ( 5 );
@@ -277,8 +289,7 @@
camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
examples/webgl_hdr.html
+138 -130
View File
@@ -1,120 +1,123 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - HDR texture - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
<head>
<title>three.js webgl - materials - HDR texture</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
a { color: red; }
}
</style>
</head>
<body>
a { color: red; }
<div id="container"></div>
<div id="info">
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl HDR texture example -
based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
</div>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!-- HDR fragment shader -->
<script id="fs-hdr" type="x-shader/x-fragment">
uniform sampler2D tDiffuse;
uniform float exposure;
uniform float brightMax;
varying vec2 vUv;
vec3 decode_pnghdr( const in vec4 color ) {
// remove gamma correction
vec4 res = color * color;
// decoded RI
float ri = pow( 2.0, res.w * 32.0 - 16.0 );
// decoded HDR pixel
res.xyz = res.xyz * ri;
return res.xyz;
}
void main(void)
{
vec4 color = texture2D( tDiffuse, vUv );
color.xyz = decode_pnghdr( color );
// apply gamma correction and exposure
//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
// Perform tone-mapping
float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
color *= YD;
gl_FragColor = vec4( color.xyz, 1.0 );
}
uniform sampler2D tDiffuse;
uniform float exposure;
uniform float brightMax;
varying vec2 vUv;
vec3 decode_pnghdr( const in vec4 color ) {
// remove gamma correction
vec4 res = color * color;
// decoded RI
float ri = pow( 2.0, res.w * 32.0 - 16.0 );
// decoded HDR pixel
res.xyz = res.xyz * ri;
return res.xyz;
}
void main(void)
{
vec4 color = texture2D( tDiffuse, vUv );
color.xyz = decode_pnghdr( color );
// apply gamma correction and exposure
//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
// Perform tone-mapping
float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
color *= YD;
gl_FragColor = vec4( color.xyz, 1.0 );
}
</script>
<!-- HDR vertex shader -->
<script id="vs-hdr" type="x-shader/x-vertex">
varying vec2 vUv;
void main(void)
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
varying vec2 vUv;
<script type="text/javascript">
void main(void)
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var container, stats;
var camera, scene, renderer, mesh, directionalLight;
var camera, scene, renderer, mesh, directionalLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var materialHDR, quad;
init();
setInterval( loop, 1000 / 60 );
var materialHDR, quad;
function init() {
var delta, current, old = 0, sign = 1, rate = 1;
container = document.getElementById( 'container' );
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 900;
scene = new THREE.Scene();
scene = new THREE.Scene();
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 0;
@@ -126,77 +129,84 @@
var texture = ImageUtils.loadTexture( "textures/memorial.png" );
texture.min_filter = THREE.LinearFilter;
texture.mag_filter = THREE.NearestFilter;
materialHDR = new THREE.MeshShaderMaterial( {
uniforms: { tDiffuse: { type: "t", value: 0, texture: texture },
exposure: { type: "f", value: 0.125 },
brightMax: { type: "f", value: 0.5 }
},
vertex_shader: getText( 'vs-hdr' ),
fragment_shader: getText( 'fs-hdr' )
materialHDR = new THREE.MeshShaderMaterial( {
} );
uniforms: {
tDiffuse: { type: "t", value: 0, texture: texture },
exposure: { type: "f", value: 0.125 },
brightMax: { type: "f", value: 0.5 }
},
vertex_shader: getText( 'vs-hdr' ),
fragment_shader: getText( 'fs-hdr' )
var plane = new Plane( 512, 768 );
} );
quad = new THREE.Mesh( plane, materialHDR );
var plane = new Plane( 512, 768 );
quad = new THREE.Mesh( plane, materialHDR );
quad.position.z = -100;
scene.addObject( quad );
scene.addObject( quad );
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.appendChild( renderer.domElement );
}
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
}
function getText( id ) {
return document.getElementById( id ).textContent;
}
var delta, current, old = 0, sign = 1, rate = 1;
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( ! old ) old = new Date().getTime();
current = new Date().getTime();
delta = (current - old ) * 0.005;
old = current;
if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
rate = 0.25;
} else {
rate = 1;
}
if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
sign *= -1;
}
}
materialHDR.uniforms.exposure.value += sign * rate * delta;
// Render final scene to the screen with film shader
renderer.render( scene, camera );
stats.update();
}
}
function is_browser_compatible() {
// WebGL support
@@ -208,9 +218,7 @@
return !!window.Worker;
}
</script>
</body>
</script>
</body>
</html>
examples/webgl_interactive_voxelpainter.html
+50 -38
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - voxel painter - webgl</title>
<title>three.js webgl - interactive - voxel painter</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -10,7 +10,7 @@
margin: 0px;
overflow: hidden;
}
#oldie { background-color: #ddd !important }
</style>
</head>
@@ -23,12 +23,13 @@
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="../src/extras/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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var projector, plane, cube;
@@ -36,12 +37,12 @@
rollOveredFace, isShiftDown = false,
theta = 45, isCtrlDown = false;
var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
var cubeGeo, cubeMaterial;
var i, intersector;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -63,20 +64,20 @@
scene = new THREE.Scene();
// roll-over helpers
rollOverGeo = new Cube( 50, 50, 50 );
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
scene.addObject( rollOverMesh );
// cubes
cubeGeo = new Cube( 50, 50, 50 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
// picking
projector = new THREE.Projector();
// grid
@@ -125,35 +126,35 @@
}
function getRealIntersector( intersects ) {
for( i = 0; i < intersects.length; i++ ) {
intersector = intersects[ i ];
if ( intersector.object != rollOverMesh ) {
return intersector;
}
}
return null;
}
function setVoxelPosition( intersector ) {
tmpVec.copy( intersector.face.normal );
voxelPosition.add( intersector.point, intersector.object.rotationMatrix.multiplyVector3( tmpVec ) );
voxelPosition.add( intersector.point, intersector.object.matrixRotation.multiplyVector3( tmpVec ) );
voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
}
function onDocumentMouseMove( event ) {
event.preventDefault();
@@ -172,11 +173,11 @@
if ( intersects.length > 0 ) {
intersector = getRealIntersector( intersects );
// delete cube
if ( isCtrlDown ) {
if ( intersector.object != plane ) {
scene.removeObject( intersector.object );
@@ -185,15 +186,15 @@
}
// create cube
} else {
intersector = getRealIntersector( intersects );
intersector = getRealIntersector( intersects );
setVoxelPosition( intersector );
var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
voxel.position.copy( voxelPosition );
scene.addObject( voxel );
}
@@ -227,8 +228,19 @@
window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( isShiftDown ) {
@@ -245,19 +257,19 @@
intersector = getRealIntersector( intersects );
if ( intersector ) {
setVoxelPosition( intersector );
setVoxelPosition( intersector );
rollOverMesh.position = voxelPosition;
}
}
camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
renderer.render( scene, camera );
stats.update();
}
</script>
examples/webgl_lights_pointlights.html
+34 -25
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - lights - point lights - webgl</title>
<title>three.js webl - lights - point lights</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -28,39 +28,40 @@
a:hover {
color: #0080ff;
}
#log { color:#fff; position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
</style>
</head>
<body>
<pre id="log"></pre>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights WebGL demo.<br />
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
object,loader;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -73,21 +74,21 @@
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
var callback = function( geometry ) {
object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading } ) );
object.scale.x = object.scale.y = object.scale.z = 0.80;
object.overdraw = true;
scene.addObject( object );
loader.statusDomElement.style.display = "none";
};
//loader.loadAscii( { model: "obj/walt/WaltHead_slim.js", callback: callback } );
loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: callback } );
/*
var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
directionalLight.position.x = 1;
@@ -96,7 +97,7 @@
directionalLight.position.normalize();
scene.addLight( directionalLight );
*/
scene.addLight( new THREE.AmbientLight( 0x00000 ) );
light1 = new THREE.PointLight( 0xff0040 );
@@ -109,23 +110,23 @@
scene.addLight( light3 );
var sphere = new Sphere( 0.5, 16, 8 );
var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
l1.position = light1.position;
scene.addObject( l1 );
var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
l2.position = light2.position;
scene.addObject( l2 );
var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
l3.position = light3.position;
scene.addObject( l3 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -136,7 +137,17 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() * 0.0005;
@@ -154,17 +165,15 @@
light3.position.y = Math.cos( time * 0.3 ) * 40;
light3.position.z = Math.sin( time * 0.5 ) * 30;
renderer.render(scene, camera);
//stats.update();
renderer.render( scene, camera );
}
function log( text ) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
examples/webgl_lines_colors.html
+92 -94
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - lines - cubes - colors - webgl</title>
<title>three.js webgl - lines - cubes - colors</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -13,7 +13,7 @@
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
@@ -24,7 +24,7 @@
text-align: center;
z-index:100;
}
a {
color: orange;
text-decoration: none;
@@ -33,38 +33,36 @@
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer,
material,
stats;
camera, scene, renderer, material;
var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
init();
animate();
function init() {
@@ -75,7 +73,7 @@
camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 700;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
@@ -83,16 +81,16 @@
renderer.autoClear = false;
container.appendChild( renderer.domElement );
var geometry = new THREE.Geometry(),
var geometry = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
colors = [], colors2 = [], colors3 = [];
for ( i = 0; i < points.length; i ++ ) {
geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
@@ -103,26 +101,26 @@
colors3[ i ].setHSV( i / points.length, 1.0, 1.0 );
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
// lines
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
var line, p, scale = 0.3, d = 225,
parameters = [ [ material, scale*1.5, [-d,0,0], geometry ],
[ material, scale*1.5, [0,0,0], geometry2 ],
parameters = [ [ material, scale*1.5, [-d,0,0], geometry ],
[ material, scale*1.5, [0,0,0], geometry2 ],
[ material, scale*1.5, [d,0,0], geometry3 ] ];
material.vertex_colors = true;
for ( i = 0; i < parameters.length; ++i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
@@ -130,38 +128,37 @@
line.position.y = p[ 2 ][ 1 ];
line.position.z = p[ 2 ][ 2 ];
scene.addObject( line );
}
// postprocessing
cameraOrtho = new THREE.Camera();
cameraOrtho = new THREE.Camera();
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraOrtho.position.z = 100;
cameraOrtho.position.z = 100;
sceneScreen = new THREE.Scene();
var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
var screen_shader = ShaderUtils.lib["screen"];
var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = rtTexture1;
screen_uniforms["opacity"].value = 1.0;
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
blending: THREE.AdditiveBlending
} );
} );
var convolution_shader = ShaderUtils.lib["convolution"];
var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
@@ -171,45 +168,42 @@
convolution_uniforms["tDiffuse"].texture = rtTexture1;
convolution_uniforms["uImageIncrement"].value = blurx;
convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
materialConvolution = new THREE.MeshShaderMaterial( {
} );
var plane = new Plane( window.innerWidth, window.innerHeight );
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
quadScreen = new THREE.Mesh( plane, materialConvolution );
} );
var plane = new Plane( window.innerWidth, window.innerHeight );
quadScreen = new THREE.Mesh( plane, materialConvolution );
quadScreen.position.z = -100;
sceneScreen.addObject( quadScreen );
sceneScreen.addObject( quadScreen );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild(stats.domElement);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
loop();
}
// port of Processing Java code by Thomas Diewald
// http://www.openprocessing.org/visuals/?visualID=15599
function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
var half = side/2,
vec_s = [
new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
@@ -218,31 +212,31 @@
new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
new THREE.Vector3( center.x + half, center.y + half, center.z - half )
],
vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
if( --iterations >= 0 ) {
var tmp = [];
tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
return tmp;
}
return vec;
}
//
function onDocumentMouseMove(event) {
@@ -275,53 +269,59 @@
//
function loop() {
requestAnimationFrame( loop, renderer.domElement );
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();
var time = new Date().getTime() * 0.0005;
for( var i = 0; i<scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
}
//renderer.render( scene, camera );
renderer.clear();
// Render scene into texture
renderer.render( scene, camera, rtTexture1 );
// Render quad with blured scene into texture (convolution pass 1)
quadScreen.materials = [ materialConvolution ];
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
materialConvolution.uniforms.uImageIncrement.value = blurx;
renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
// Render quad with blured scene into texture (convolution pass 2)
materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
materialConvolution.uniforms.uImageIncrement.value = blury;
renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
// Render original scene with superimposed blur to texture
quadScreen.materials = [ materialScreen ];
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
materialScreen.uniforms.opacity.value = 1.3;
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
// Render to screen
@@ -329,8 +329,6 @@
materialScreen.uniforms.tDiffuse.texture = rtTexture1;
renderer.render( sceneScreen, cameraOrtho );
//stats.update();
}
examples/webgl_lines_cubes.html
+49 -52
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - lines - cubes - webgl</title>
<title>three.js webgl - lines - cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -13,7 +13,7 @@
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
@@ -24,7 +24,7 @@
text-align: center;
z-index:100;
}
a {
color: orange;
text-decoration: none;
@@ -33,33 +33,34 @@
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
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer,
camera, scene, renderer;
stats;
init();
animate();
function init() {
@@ -81,11 +82,11 @@
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 );
for ( i = 0; i < points.length; i ++ ) {
geometry.vertices.push( new THREE.Vertex( points[i] ) );
}
// lines
@@ -96,14 +97,14 @@
parameters = [ [ m3, scale*0.5, [0,0,0], g1 ], [ m2, scale*0.5, [d, 0, 0], g1 ], [ m2, scale*0.5, [-d, 0, 0], g1 ],
[ m2, scale*0.5, [0,d,0], g1 ], [ m2, scale*0.5, [d, d, 0], g1 ], [ m2, scale*0.5, [-d, d, 0], g1 ],
[ m2, scale*0.5, [0,-d,0], g1 ], [ m2, scale*0.5, [d, -d, 0], g1 ], [ m2, scale*0.5, [-d, -d, 0], g1 ],
[ m1, scale*0.5, [2*d, 0, 0], g1 ], [ m1, scale*0.5, [-2*d, 0, 0], g1 ],
[ m1, scale*0.5, [2*d, d, 0], g1 ], [ m1, scale*0.5, [-2*d, d, 0], g1 ],
[ m1, scale*0.5, [2*d, -d, 0], g1 ], [ m1, scale*0.5, [-2*d, -d, 0], g1 ],
];
for ( i = 0; i < parameters.length; ++i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
@@ -111,33 +112,24 @@
line.position.y = p[ 2 ][ 1 ];
line.position.z = p[ 2 ][ 2 ];
scene.addObject( line );
}
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
*/
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
loop();
}
// port of Processing Java code by Thomas Diewald
// http://www.openprocessing.org/visuals/?visualID=15599
function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
var half = side/2,
vec_s = [
new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
@@ -146,31 +138,31 @@
new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
new THREE.Vector3( center.x + half, center.y + half, center.z - half )
],
vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
if( --iterations >= 0 ) {
var tmp = [];
tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
return tmp;
}
return vec;
}
//
function onDocumentMouseMove(event) {
@@ -203,25 +195,30 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
requestAnimationFrame( loop, renderer.domElement );
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
var time = new Date().getTime() * 0.0015;
for( var i = 0; i<scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
for( var i = 0; i < scene.objects.length; i++ ) {
scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1);
}
renderer.render(scene, camera);
renderer.render( scene, camera );
//stats.update();
}
</script>
examples/webgl_lines_sphere.html
+37 -41
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - lines - spheres - webgl</title>
<title>three.js webgl - lines - spheres</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -13,7 +13,7 @@
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
@@ -24,7 +24,7 @@
text-align: center;
z-index:100;
}
a {
color: #ff0080;
text-decoration: none;
@@ -33,7 +33,7 @@
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
@@ -43,27 +43,28 @@
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
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,
camera, scene, renderer;
stats;
init();
animate();
function init() {
@@ -76,14 +77,14 @@
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 );
@@ -95,13 +96,13 @@
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 );
@@ -116,27 +117,18 @@
renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
*/
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
loop();
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
@@ -148,7 +140,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
@@ -160,15 +152,21 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
requestAnimationFrame( loop, renderer.domElement );
//camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
@@ -178,17 +176,15 @@
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 ) );
}
//stats.update();
}
</script>
</body>
examples/webgl_materials.html
+28 -18
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - webgl</title>
<title>three.js webgl - materials</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -18,19 +18,21 @@
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -48,9 +50,9 @@
var line_material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ),
geometry = new THREE.Geometry(),
floor = -75, step = 25;
for ( var i = 0; i <= 40; i ++ ) {
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, floor, i * step - 500 ) ) );
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, floor, i * step - 500 ) ) );
@@ -58,7 +60,7 @@
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor, 500 ) ) );
}
var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
scene.addObject( line );
@@ -86,7 +88,7 @@
var geometry_smooth = new Sphere( 70, 32, 16 );
var geometry_flat = new Sphere( 70, 32, 16 );
var geometry_pieces = new Sphere( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
var face = geometry_pieces.faces[ i ];
@@ -95,20 +97,20 @@
}
geometry_pieces.sortFacesByMaterial();
materials.push( new THREE.MeshFaceMaterial() );
objects = [];
var sphere, geometry, material;
for ( var i = 0, l = materials.length; i < l; i ++ ) {
material = materials[ i ];
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
sphere = new THREE.Mesh( geometry, material );
sphere.position.x = ( i % 4 ) * 200 - 400;
@@ -195,7 +197,16 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = new Date().getTime() * 0.0001;
@@ -221,14 +232,13 @@
renderer.render( scene, camera );
stats.update();
}
function log( text ) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
examples/webgl_materials_cars.html
+21 -12
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube reflection [cars] - webgl</title>
<title>three.js webgl - materials - cube reflection [cars]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -27,7 +27,7 @@
#car_info { text-align:center; }
#car_name { font-size:1em }
#car_author { font-size:1em }
#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
</style>
</head>
@@ -57,12 +57,14 @@
<div id="log"></div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var STATS_ENABLED = false;
var CARS = {
@@ -150,12 +152,9 @@
var loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
setInterval(loop, 1000/60);
animate();
function init() {
@@ -214,6 +213,8 @@
}
document.addEventListener('mousemove', onDocumentMouseMove, false);
var r = "textures/cube/Bridge2/";
var urls = [ r + "posx.jpg", r + "negx.jpg",
r + "posy.jpg", r + "negy.jpg",
@@ -569,16 +570,24 @@
}
var r = 0;
//
function loop() {
function animate() {
r -= 0.005;
requestAnimationFrame( animate );
render();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.x = 1000 * Math.cos( r );
camera.position.z = 1000 * Math.sin( r );
camera.position.x = 1000 * Math.cos( timer );
camera.position.z = 1000 * Math.sin( timer );
cameraCube.target.position.x = - camera.position.x;
cameraCube.target.position.y = - camera.position.y;
examples/webgl_materials_cars_camaro.html
+57 -57
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube reflection [camaro] - webgl</title>
<title>three.js webgl - materials - cube reflection [camaro]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -23,17 +23,17 @@
button:hover { background:#333 }
</style>
</head>
<body>
<div id="d">
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a></div>
<div id="buttons"></div>
</div>
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
@@ -41,40 +41,32 @@
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="../src/extras/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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var stats;
var container, stats;
var camera;
var scene;
var webglRenderer;
var camera, scene, webglRenderer;
var lightMesh;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', onDocumentMouseMove, false);
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
loop();
setInterval(loop, 1000/60);
animate();
function init() {
container = document.createElement('div');
@@ -85,7 +77,7 @@
camera.updateMatrix();
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x555555 );
@@ -125,16 +117,18 @@
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
document.addEventListener('mousemove', onDocumentMouseMove, false);
var r = "textures/cube/SwedishRoyalCastle/";
var urls = [ r + "px.jpg", r + "nx.jpg",
r + "py.jpg", r + "ny.jpg",
var urls = [ r + "px.jpg", r + "nx.jpg",
r + "py.jpg", r + "ny.jpg",
r + "pz.jpg", r + "nz.jpg" ];
var images = ImageUtils.loadArray( urls );
var textureCube = new THREE.Texture( images );
var camaroMaterials = {
body: [],
chrome: new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
@@ -142,15 +136,15 @@
tire: new THREE.MeshLambertMaterial( { color: 0x050505 } ),
interior: new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
black: new THREE.MeshLambertMaterial( { color: 0x000000 } )
}
camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
@@ -158,26 +152,26 @@
var loader = new THREE.Loader();
loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
}
function $( id ) { return document.getElementById( id ) }
function createButtons( materials, geometry ) {
var i, src = "", parent = $( "buttons" );
for( i = 0; i < materials.length; i++ ) {
src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
}
parent.innerHTML = src;
for( i = 0; i < materials.length; i++ ) {
$( "m" + i ).counter = i;
$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
@@ -188,7 +182,7 @@
function createScene( geometry, materials ) {
var s = 75, m = new THREE.MeshFaceMaterial();
geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; // car body
geometry.materials[ 1 ][ 0 ] = materials.chrome; // wheels chrome
geometry.materials[ 2 ][ 0 ] = materials.chrome; // grille chrome
@@ -198,14 +192,13 @@
geometry.materials[ 6 ][ 0 ] = materials.tire; // tire
geometry.materials[ 7 ][ 0 ] = materials.black; // tireling
geometry.materials[ 8 ][ 0 ] = materials.black; // behind grille
SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
createButtons( materials.body, geometry );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -213,31 +206,38 @@
}
var r = 0;
function loop() {
//
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
function animate() {
lightMesh.position.x = 1500 * Math.cos( r );
lightMesh.position.z = 1500 * Math.sin( r );
r += 0.01;
webglRenderer.render( scene, camera );
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
webglRenderer.render( scene, camera );
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
</body>
examples/webgl_materials_cubemap.html
+26 -15
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube reflection / refraction [Walt] - webgl</title>
<title>three.js webgl - materials - cube reflection / refraction [Walt]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -21,7 +21,7 @@
#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
#oldie { margin-top:11em !important }
</style>
</head>
@@ -37,12 +37,14 @@
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, webglRenderer;
@@ -51,7 +53,7 @@
var mesh, zmesh, lightMesh, geometry;
var loader;
var directionalLight, pointLight;
var mouseX = 0;
@@ -63,7 +65,7 @@
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -105,7 +107,7 @@
var reflectionCube = new THREE.Texture( images );
var refractionCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, env_map: new THREE.TextureCube( images ), combine: THREE.MixOperation, reflectivity: 0.25 } );
var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, env_map: refractionCube, refraction_ratio: 0.95 } );
@@ -114,7 +116,7 @@
//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
webglRenderer.autoClear = false;
@@ -129,7 +131,7 @@
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
}
@@ -141,7 +143,7 @@
SceneUtils.addMesh( scene, geometry, s, 0, 0, -100, 0,0,0, m1 );
SceneUtils.addMesh( scene, geometry, s, -900, 0, -100, 0,0,0, m2 );
SceneUtils.addMesh( scene, geometry, s, 900, 0, -100, 0,0,0, m3 );
loader.statusDomElement.style.display = "none";
}
@@ -153,9 +155,20 @@
}
var r = 0;
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -165,10 +178,8 @@
cameraCube.target.position.z = - camera.position.z;
lightMesh.position.x = 1500 * Math.cos( r );
lightMesh.position.z = 1500 * Math.sin( r );
r += 0.01;
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
webglRenderer.clear();
webglRenderer.render( sceneCube, cameraCube );
examples/webgl_materials_cubemap_balls_reflection.html
+20 -9
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube reflection [balls] - webgl</title>
<title>three.js webgl - materials - cube reflection [balls]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -26,7 +26,7 @@
a {
color: #ffffff;
}
#oldie a { color:#da0 }
</style>
</head>
@@ -35,12 +35,14 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var statsEnabled = false;
var container, stats;
@@ -61,12 +63,12 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.z = 3200;
@@ -131,7 +133,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -144,8 +157,6 @@
webglRenderer.render( sceneCube, cameraCube );
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
</script>
examples/webgl_materials_cubemap_balls_refraction.html
+18 -7
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube refraction [balls] - webgl</title>
<title>three.js webgl - materials - cube refraction [balls]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -26,7 +26,7 @@
a {
color: #ffffff;
}
#oldie a { color:#da0 }
</style>
</head>
@@ -35,12 +35,14 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var statsEnabled = false;
var container, stats;
@@ -61,7 +63,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -129,7 +131,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -142,8 +155,6 @@
webglRenderer.render( sceneCube, cameraCube );
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
</script>
examples/webgl_materials_cubemap_escher.html
+18 -8
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube reflection [Escher] - webgl</title>
<title>three.js webgl - materials - cube reflection [Escher]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -14,11 +14,10 @@
text-align:center;
}
a { color: #ff0080; text-decoration: none; }
a:hover { color: #0080ff; }
a:hover { color: #0080ff; }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
#d { text-align:center; margin:1em auto -9.0em; z-index:1000; position:relative; display:block;
background:rgba(0,0,0,0.75); padding:0.25em; width:300px; border-radius:10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
#oldie { margin-top:15em !important }
</style>
</head>
@@ -33,12 +32,14 @@
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var statsEnabled = false;
var container, stats;
@@ -58,7 +59,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -114,15 +115,24 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log(text) {
examples/webgl_materials_cubemap_refraction.html
+28 -20
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - cube refraction [Lucy] - webgl</title>
<title>three.js webgl - materials - cube refraction [Lucy]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -20,7 +20,7 @@
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block;
background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
#oldie { margin-top:15em !important }
</style>
</head>
@@ -35,13 +35,15 @@
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var FLOOR = -250;
var container, stats;
@@ -52,19 +54,16 @@
var mesh, zmesh, lightMesh, geometry;
var loader;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -126,9 +125,11 @@
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function createScene( geometry, m1, m2, m3 ) {
@@ -138,7 +139,7 @@
SceneUtils.addMesh( scene, geometry, s, 0, 0, z, 0,0,0, m1 );
SceneUtils.addMesh( scene, geometry, s, -900, 0, z, 0,0,0, m2 );
SceneUtils.addMesh( scene, geometry, s, 900, 0, z, 0,0,0, m3 );
loader.statusDomElement.style.display = "none";
}
@@ -150,9 +151,20 @@
}
var r = 0;
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -162,17 +174,13 @@
cameraCube.target.position.z = - camera.position.z;
lightMesh.position.x = 1500 * Math.cos( r );
lightMesh.position.z = 1500 * Math.sin( r );
r += 0.01;
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
webglRenderer.clear();
webglRenderer.render( sceneCube, cameraCube );
webglRenderer.render( scene, camera );
stats.update();
}
function log(text) {
examples/webgl_materials_grass.html
+16 -4
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - grass - webgl</title>
<title>three.js webgl - materials - grass</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -21,15 +21,17 @@
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var camera, scene, renderer,
mesh, levels = [];
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -99,7 +101,17 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() / 6000;
examples/webgl_materials_normalmap.html
+54 -43
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - normal map - webgl</title>
<title>three.js webgl - materials - normal map</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -23,29 +23,29 @@
font-family:Monospace;
font-size:13px;
text-align:center;
z-index:1000;
z-index:1000;
}
#oldie {
background:rgb(200,100,0) !important;
color:#fff;
color:#fff;
}
#vt { display:none }
#vt { display:none }
#vt, #vt a { color:orange; }
.code { }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
</style>
</head>
<body>
<pre id="log"></pre>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
@@ -53,13 +53,15 @@
</div>
</div>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var statsEnabled = true;
var container, stats, loader;
@@ -68,7 +70,7 @@
var mesh, zmesh, lightMesh, geometry;
var mesh1, mesh2;
var directionalLight, pointLight, ambientLight;
var mouseX = 0;
@@ -82,7 +84,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -112,7 +114,7 @@
scene.addLight( directionalLight );
// light representation
var sphere = new Sphere( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
lightMesh.position = pointLight.position;
@@ -120,36 +122,36 @@
scene.addObject(lightMesh);
// common material parameters
var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
// normal map shader
var shader = ShaderUtils.lib[ "normal" ];
var uniforms = Uniforms.clone( shader.uniforms );
uniforms[ "enableAO" ].value = true;
uniforms[ "enableDiffuse" ].value = false;
uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
uniforms[ "tDisplacement" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
uniforms[ "uDisplacementBias" ].value = -0.428408 * scale;
uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
uniforms[ "uPointLightPos" ].value = pointLight.position;
uniforms[ "uPointLightColor" ].value = pointLight.color;
uniforms[ "uDirLightPos" ].value = directionalLight.position;
uniforms[ "uDirLightColor" ].value = directionalLight.color;
uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
uniforms[ "uSpecularColor" ].value.setHex( specular );
uniforms[ "uAmbientColor" ].value.setHex( ambient );
uniforms[ "uShininess" ].value = shininess;
var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
@@ -159,7 +161,7 @@
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
loader.loadBinary( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
webglRenderer = new THREE.WebGLRenderer();
@@ -169,7 +171,7 @@
var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
document.getElementById( "description" ).innerHTML = description;
document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
if ( statsEnabled ) {
stats = new Stats();
@@ -183,41 +185,52 @@
}
function createScene( geometry, scale, material1, material2 ) {
geometry.computeTangents();
mesh1 = SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
mesh2 = SceneUtils.addMesh( scene, geometry, scale, scale * 12, 0, 0, 0,0,0, material2 );
loader.statusDomElement.style.display = "none";
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
if( mesh1 ) {
mesh1.rotation.y = ry;
mesh1.rotation.x = rx;
}
if( mesh2 ) {
mesh2.rotation.y = ry;
mesh2.rotation.x = rx;
}
lightMesh.position.x = 2500 * Math.cos( r );
lightMesh.position.z = 2500 * Math.sin( r );
@@ -225,8 +238,6 @@
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log( text ) {
@@ -235,7 +246,7 @@
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
examples/webgl_materials_normalmap2.html
+18 -7
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - normal map [Lee Perry-Smith] - webgl</title>
<title>three.js webgl - materials - normal map [Lee Perry-Smith]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -53,6 +53,8 @@
</div>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -76,10 +78,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -159,6 +159,8 @@
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function createScene( geometry, scale, material ) {
@@ -178,7 +180,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
@@ -191,8 +204,6 @@
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log( text ) {
examples/webgl_materials_shaders.html
+65 -65
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - shaders [Phong, Lambert] - webgl</title>
<title>three.js webgl - materials - shaders [Phong, Lambert]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -22,7 +22,7 @@
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Blinn-Phong / Lambert materials</h1>
@@ -30,22 +30,23 @@
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p><a href="http://github.com/mrdoob/three.js">Three.js</a> example
<br/>
<p>Best viewed in Chrome 9 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow on anything other than Chrome.
<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -54,43 +55,34 @@
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container;
var stats;
var container, stats;
var camera;
var scene;
var canvasRenderer, webglRenderer;
var camera, scene, canvasRenderer, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
animate();
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
@@ -102,9 +94,9 @@
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function init() {
container = document.createElement('div');
@@ -147,7 +139,7 @@
sphere = new Sphere( 100, 32, 32 );
var y1 = 0, y2 = -200;
addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
@@ -180,7 +172,7 @@
catch (e) {
}
}
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -193,7 +185,7 @@
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
@@ -201,12 +193,14 @@
loader.loadAscii( { model: "obj/torus/Torus_slim.js", callback: function( geometry ) { createScene( geometry ) } } );
//loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function createScene( geometry ) {
var s = 80, t = s + 20, y = 200;
addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
@@ -217,7 +211,7 @@
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -225,63 +219,69 @@
}
var r = 0;
function loop() {
//
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
function animate() {
r += 0.01;
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = - new Date().getTime() * 0.0002;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
lightMesh.position.x = 700*Math.cos( timer );
lightMesh.position.z = 700*Math.sin( timer );
lightMesh.updateMatrix();
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
</script>
examples/webgl_materials_shaders_fresnel.html
+21 -11
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - shaders [Fresnel] - webgl</title>
<title>three.js webgl - materials - shaders [Fresnel]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -27,19 +27,21 @@
color: #ffffff;
}
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
#oldie a { color:#0b0 }
</style>
</head>
<body>
<pre id="log"></pre>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> </div>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
@@ -55,8 +57,7 @@
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
@@ -64,7 +65,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -142,7 +143,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -155,8 +167,6 @@
webglRenderer.render( sceneCube, cameraCube );
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log( text ) {
examples/webgl_objconvert_test.html
+17 -11
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - io - OBJ converter - webgl</title>
<title>three.js webgl - io - OBJ converter</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -48,6 +48,7 @@
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -77,16 +78,12 @@
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
animate();
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
@@ -197,10 +194,10 @@
var loader = new THREE.Loader(),
callbackMale = function( geometry ) { createScene( geometry, 90, 50, FLOOR, 105 ) },
callbackFemale = function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) };
//loader.loadAscii( { model: "obj/male02/Male02_slim.js", callback: callbackMale } );
//loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callbackFemale } );
loader.loadBinary( { model: "obj/male02/Male02_bin.js", callback: callbackMale } );
loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callbackFemale } );
@@ -267,7 +264,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -281,8 +289,6 @@
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
stats.update();
}
function log( text ) {
examples/webgl_particles_billboards.html
+46 -36
View File
@@ -1,46 +1,47 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - billboards - webgl</title>
<title>three.js webgl - particles - billboards</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
}
</style>
</head>
<body>
<div id="info">
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards example
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
@@ -51,8 +52,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
//loop();
animate();
function init() {
@@ -64,19 +64,20 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
geometry = new THREE.Geometry();
sprite = ImageUtils.loadTexture( "textures/sprites/circle.png" );
for ( i = 0; i < 5000; i++ ) {
x = 2000 * Math.random() - 1000;
y = 2000 * Math.random() - 1000;
z = 2000 * Math.random() - 1000;
vector = new THREE.Vector3( x, y, z );
geometry.vertices.push( new THREE.Vertex( vector ) );
geometry.vertices.push( new THREE.Vertex( vector ) );
}
material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending } );
@@ -86,7 +87,7 @@
particles.sortParticles = true;
particles.updateMatrix();
scene.addObject( particles );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.x = 0;
light.position.y = 0;
@@ -105,14 +106,14 @@
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 ) {
@@ -123,7 +124,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
@@ -135,33 +136,42 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
/*
for( i = 0; i < scene.objects.length; i++ ) {
scene.objects[i].rotation.y = 5*time * ( i < 4 ? i+1 : - (i+1) );
}
*/
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSV( h, 0.75, 0.8 );
renderer.render( scene, camera );
stats.update();
}
</script>
examples/webgl_particles_billboards_colors.html
+44 -34
View File
@@ -1,46 +1,47 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - billboards - colors - webgl</title>
<title>three.js webgl - particles - billboards - colors</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
}
</style>
</head>
<body>
<div id="info">
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards colors example
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
@@ -51,8 +52,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
//loop();
animate();
function init() {
@@ -64,11 +64,11 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
geometry = new THREE.Geometry();
sprite = ImageUtils.loadTexture( "textures/sprites/ball.png" );
for ( i = 0; i < 5000; i++ ) {
x = 2000 * Math.random() - 1000;
@@ -76,12 +76,12 @@
z = 2000 * Math.random() - 1000;
vector = new THREE.Vector3( x, y, z );
geometry.vertices.push( new THREE.Vertex( vector ) );
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSV( (x+1000)/2000, 1.0, 1.0 );
}
geometry.colors = colors;
material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending, vertex_colors: true } );
@@ -91,7 +91,7 @@
particles.sortParticles = true;
particles.updateMatrix();
scene.addObject( particles );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.x = 0;
light.position.y = 0;
@@ -110,14 +110,14 @@
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 ) {
@@ -128,7 +128,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
@@ -140,24 +140,34 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSV( h, 0.8, 1.0 );
renderer.render( scene, camera );
stats.update();
}
</script>
examples/webgl_particles_random.html
+51 -40
View File
@@ -1,46 +1,47 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - webgl</title>
<title>three.js webgl - particles</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
#info {
color: #fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index: 100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
@@ -51,7 +52,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -63,27 +64,27 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
geometry = new THREE.Geometry();
for ( i = 0; i < 4000; i++ ) {
vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
geometry.vertices.push( new THREE.Vertex( vector ) );
geometry.vertices.push( new THREE.Vertex( vector ) );
}
parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ];
//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
for ( i = 0; i < parameters.length; i++ ) {
size = parameters[i][1];
color = parameters[i][0];
//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
materials[i].color.setHSV( color[0], color[1], color[2] );
@@ -92,7 +93,7 @@
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.addObject( particles );
}
renderer = new THREE.WebGLRenderer();
@@ -107,14 +108,14 @@
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 ) {
@@ -125,7 +126,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
@@ -137,36 +138,46 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
for( i = 0; i < scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
}
for( i = 0; i < materials.length; i++ ) {
color = parameters[i][0];
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSV( h, color[1], color[2] );
}
renderer.render( scene, camera );
stats.update();
}
examples/webgl_particles_sprites.html
+50 -39
View File
@@ -1,47 +1,48 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - sprites - webgl</title>
<title>three.js webgl - particles - sprites</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
}
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle sprites example -
snowflakes by <a href="http://en.wikipedia.org/wiki/File:Sketch_of_snow_crystal_by_Ren%C3%A9_Descartes.jpg">Ren&eacute; Descartes</a>
</div>
<script type="text/javascript" src="../build/ThreeExtras.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 ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
@@ -52,7 +53,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -64,31 +65,31 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
geometry = new THREE.Geometry();
sprite1 = ImageUtils.loadTexture( "textures/sprites/snowflake1.png" );
sprite2 = ImageUtils.loadTexture( "textures/sprites/snowflake2.png" );
sprite3 = ImageUtils.loadTexture( "textures/sprites/snowflake3.png" );
sprite4 = ImageUtils.loadTexture( "textures/sprites/snowflake4.png" );
sprite5 = ImageUtils.loadTexture( "textures/sprites/snowflake5.png" );
for ( i = 0; i < 2000; i++ ) {
vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
geometry.vertices.push( new THREE.Vertex( vector ) );
geometry.vertices.push( new THREE.Vertex( vector ) );
}
parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],
parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],
];
for ( i = 0; i < parameters.length; i++ ) {
color = parameters[i][0];
sprite = parameters[i][1];
size = parameters[i][2];
materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depth_test: false } );
materials[i].color.setHSV( color[0], color[1], color[2] );
@@ -97,7 +98,7 @@
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.addObject( particles );
}
renderer = new THREE.WebGLRenderer( { clearAlpha: 1 });
@@ -112,14 +113,14 @@
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 ) {
@@ -130,7 +131,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
@@ -142,36 +143,46 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
for( i = 0; i < scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
}
for( i = 0; i < materials.length; i++ ) {
color = parameters[i][0];
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSV( h, color[1], color[2] );
}
renderer.render( scene, camera );
stats.update();
}
examples/webgl_postprocessing.html
+150 -144
View File
@@ -1,95 +1,101 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - postprocessing - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
<head>
<title>three.js webgl - postprocessing</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
a { color: red; }
}
</style>
</head>
<body>
a { color: red; }
<div id="container"></div>
<div id="info">
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!-- Time modulated procedural color fragment shader -->
<script id="fs-colors" type="x-shader/x-fragment">
<script id="fs-colors" type="x-shader/x-fragment">
varying vec2 vUv;
uniform float time;
void main(void)
{
gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
}
</script>
void main(void) {
gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
}
</script>
<!-- Generic vertex shader -->
<script id="vs-generic" type="x-shader/x-vertex">
varying vec2 vUv;
<script id="vs-generic" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = vec2( uv.x, 1.0 - uv.y );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
void main() {
vUv = vec2( uv.x, 1.0 - uv.y );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="text/javascript">
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var container, stats;
var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
init();
setInterval( loop, 1000 / 60 );
var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
function init() {
var delta = 0.01;
container = document.getElementById( 'container' );
init();
animate();
cameraOrtho = new THREE.Camera();
function init() {
container = document.getElementById( 'container' );
cameraOrtho = new THREE.Camera();
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraOrtho.position.z = 100;
cameraOrtho.position.z = 100;
cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
cameraPerspective.position.z = 900;
sceneModel = new THREE.Scene();
sceneModel = new THREE.Scene();
sceneScreen = new THREE.Scene();
sceneBG = new THREE.Scene();
@@ -100,108 +106,108 @@
directionalLight.position.normalize();
sceneModel.addLight( directionalLight );
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
materialColor = new THREE.MeshShaderMaterial( {
materialColor = new THREE.MeshShaderMaterial( {
uniforms: { time: { type: "f", value: 0.0 } },
vertex_shader: getText( 'vs-generic' ),
fragment_shader: getText( 'fs-colors' ),
uniforms: { time: { type: "f", value: 0.0 } },
vertex_shader: getText( 'vs-generic' ),
fragment_shader: getText( 'fs-colors' ),
depth_test: false
} );
} );
var screen_shader = ShaderUtils.lib["screen"];
var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = rtTexture1;
screen_uniforms["opacity"].value = 0.4;
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
blending: THREE.AdditiveBlending
} );
} );
var film_shader = ShaderUtils.lib["film"];
var film_uniforms = Uniforms.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = rtTexture1;
materialFilm = new THREE.MeshShaderMaterial( {
uniforms: film_uniforms,
vertex_shader: film_shader.vertex_shader,
fragment_shader: film_shader.fragment_shader
materialFilm = new THREE.MeshShaderMaterial( {
} );
uniforms: film_uniforms,
vertex_shader: film_shader.vertex_shader,
fragment_shader: film_shader.fragment_shader
} );
var increment = 0.001953125;
blurx = new THREE.Vector2( increment, 0.0 ),
blury = new THREE.Vector2( 0.0, increment );
var convolution_shader = ShaderUtils.lib["convolution"];
var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
convolution_uniforms["tDiffuse"].texture = rtTexture1;
convolution_uniforms["uImageIncrement"].value = blurx;
convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
materialConvolution = new THREE.MeshShaderMaterial( {
} );
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
} );
var plane = new Plane( window.innerWidth, window.innerHeight );
quadBG = new THREE.Mesh( plane, materialColor );
quadBG = new THREE.Mesh( plane, materialColor );
quadBG.position.z = -500;
sceneBG.addObject( quadBG );
sceneBG.addObject( quadBG );
loader = new THREE.Loader( true );
document.body.appendChild( loader.statusDomElement );
loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
quadScreen = new THREE.Mesh( plane, materialConvolution );
quadScreen.position.z = -100;
sceneScreen.addObject( quadScreen );
renderer = new THREE.WebGLRenderer();
quadScreen = new THREE.Mesh( plane, materialConvolution );
quadScreen.position.z = -100;
sceneScreen.addObject( quadScreen );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
container.appendChild( renderer.domElement );
}
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
}
function getText( id ) {
return document.getElementById( id ).textContent;
}
function createMesh( geometry, scene, scale ) {
geometry.computeTangents();
var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
var shader = ShaderUtils.lib[ "normal" ];
var uniforms = Uniforms.clone( shader.uniforms );
uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
uniforms[ "uNormalScale" ].value = - 0.75;
@@ -226,7 +232,7 @@
var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
var mat2 = new THREE.MeshShaderMaterial( parameters );
mesh = new THREE.Mesh( geometry, mat2 );
mesh.position.x = 0;
mesh.position.y = -50;
@@ -234,63 +240,66 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.updateMatrix();
scene.addObject( mesh );
loader.statusDomElement.style.display = "none";
}
var delta = 0.01;
var start = 0;
function loop() {
//
if ( ! start ) start = new Date().getTime();
var time = ( new Date().getTime() - start ) * 0.0004;
function animate() {
if ( mesh ) {
mesh.rotation.y = -time;
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.0004;
if ( mesh ) mesh.rotation.y = -time;
}
if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
delta *= -1;
}
materialColor.uniforms.time.value += delta/2;
materialFilm.uniforms.time.value += delta;
renderer.clear();
// Render scene into texture
// background
// background
renderer.render( sceneBG, cameraOrtho, rtTexture1 );
// model
renderer.render( sceneModel, cameraPerspective, rtTexture1 );
renderer.render( sceneModel, cameraPerspective, rtTexture1 );
// Render quad with blured scene into texture (convolution pass 1)
quadScreen.materials = [ materialConvolution ];
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
materialConvolution.uniforms.uImageIncrement.value = blurx;
renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
// Render quad with blured scene into texture (convolution pass 2)
materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
materialConvolution.uniforms.uImageIncrement.value = blury;
renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
// Render original scene with superimposed blur into texture
quadScreen.materials = [ materialScreen ];
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
materialScreen.uniforms.opacity.value = 1.0;
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
@@ -301,12 +310,9 @@
quadScreen.materials = [ materialFilm ];
renderer.render( sceneScreen, cameraOrtho );
stats.update();
}
}
</script>
</body>
</script>
</body>
</html>
examples/webgl_ribbons.html
+41 -43
View File
@@ -1,17 +1,17 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - ribbons - webgl</title>
<title>three.js webgl - ribbons</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
@@ -19,23 +19,24 @@
color:#0078ff;
}
#info {
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<div id="info">
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl ribbons example
</div>
@@ -44,8 +45,6 @@
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
var container, stats;
var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
@@ -55,11 +54,10 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = {
var postprocessing = { enabled : true };
enabled : true
};
init();
animate();
function init() {
@@ -167,8 +165,6 @@
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
loop();
}
function onDocumentMouseMove( event ) {
@@ -212,9 +208,9 @@
postprocessing.camera.position.z = 100;
var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
var screen_shader = ShaderUtils.lib["screen"];
var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
@@ -222,15 +218,14 @@
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
screen_uniforms["opacity"].value = 1.0;
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
blending: THREE.AdditiveBlending
} );
uniforms: screen_uniforms,
vertex_shader: screen_shader.vertex_shader,
fragment_shader: screen_shader.fragment_shader,
blending: THREE.AdditiveBlending
} );
var convolution_shader = ShaderUtils.lib["convolution"];
var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
@@ -242,14 +237,13 @@
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
} );
uniforms: convolution_uniforms,
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
} );
postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
postprocessing.quad.position.z = -500;
@@ -257,9 +251,18 @@
}
function loop() {
//
requestAnimationFrame( loop, renderer.domElement );
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.00005;
@@ -334,13 +337,8 @@
}
stats.update();
}
</script>
</body>
</html>
examples/webgl_rtt.html
+136 -124
View File
@@ -1,112 +1,117 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - render-to-texture - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
<head>
<title>three.js webgl - render-to-texture</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #ffffff;
}
a {
</style>
</head>
<body>
color: #ffffff;
}
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
</style>
</head>
<body>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script id="fragment_shader_screen" type="x-shader/x-fragment">
<script id="fragment_shader_screen" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D tDiffuse;
void main(void)
{
void main(void) {
//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
gl_FragColor = texture2D( tDiffuse, vUv );
}
</script>
<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
}
</script>
<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
varying vec2 vUv;
uniform float time;
void main(void)
{
//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
void main(void) {
//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;
gl_FragColor = vec4( r, g, time, 1.0 );
}
</script>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
}
</script>
void main()
{
vUv = uv;
//gl_Position = vec4( position, 1.0 );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
//gl_Position = vec4( position, 1.0 );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="text/javascript">
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
var container, stats;
var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var rtTexture, material, quad;
init();
setInterval( loop, 1000 / 60 );
var rtTexture, material, quad;
function init() {
var delta = 0.01;
container = document.getElementById( 'container' );
init();
animate();
cameraRTT = new THREE.Camera();
function init() {
container = document.getElementById( 'container' );
cameraRTT = new THREE.Camera();
cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraRTT.position.z = 100;
cameraRTT.position.z = 100;
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 100;
camera.updateMatrix();
sceneRTT = new THREE.Scene();
sceneRTT = new THREE.Scene();
sceneScreen = new THREE.Scene();
scene = new THREE.Scene();
@@ -126,76 +131,77 @@
light.position.normalize();
scene.addLight( light );
rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
material = new THREE.MeshShaderMaterial( {
material = new THREE.MeshShaderMaterial( {
uniforms: { time: { type: "f", value: 0.0 } },
vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
uniforms: { time: { type: "f", value: 0.0 } },
vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
} );
} );
var materialScreen = new THREE.MeshShaderMaterial( {
var materialScreen = new THREE.MeshShaderMaterial( {
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
} );
} );
// var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
//var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
var plane = new Plane( window.innerWidth, window.innerHeight );
quad = new THREE.Mesh( plane, material );
quad = new THREE.Mesh( plane, material );
quad.position.z = -100;
sceneRTT.addObject( quad );
sceneRTT.addObject( quad );
var loader = new THREE.Loader();
loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
quad = new THREE.Mesh( plane, materialScreen );
quad = new THREE.Mesh( plane, materialScreen );
quad.position.z = -100;
sceneScreen.addObject( quad );
sceneScreen.addObject( quad );
var n = 5,
geometry = new Sphere( 10, 64, 32 ),
material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
for( var j = 0; j < n; j++ ) {
for( var i = 0; i < n; i++ ) {
mesh = new THREE.Mesh( geometry, material2 );
mesh.position.x = ( i - (n-1)/2 ) * 20;
mesh.position.y = ( j - (n-1)/2 ) * 20;
mesh.position.z = 0;
mesh.rotation.y = 1.57;
scene.addObject( mesh );
}
}
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
}
function createMesh( geometry, xscene ) {
var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
zmesh1 = new THREE.Mesh( geometry, mat1 );
zmesh1.position.x = 0;
zmesh1.position.y = 0;
@@ -219,17 +225,26 @@
}
var delta = 0.01;
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = new Date().getTime() * 0.0015;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
if ( zmesh1 && zmesh2 ) {
zmesh1.rotation.x = 1.57;
zmesh1.rotation.z = time;
@@ -237,41 +252,38 @@
zmesh2.rotation.y = -time;
}
if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
delta *= -1;
}
material.uniforms.time.value += delta;
renderer.clear();
// Render first scene into texture
renderer.render( sceneRTT, cameraRTT, rtTexture );
renderer.render( sceneRTT, cameraRTT, rtTexture );
// Render full screen quad with generated texture
// (disable depth writing so that it stays in the background)
renderer.context.depthMask( 0 );
renderer.render( sceneScreen, cameraRTT );
//renderer.render( sceneRTT, cameraRTT );
renderer.context.depthMask( 1 );
// Render second scene to screen
// Render second scene to screen
// (using first scene as regular texture)
renderer.render( scene, camera );
stats.update();
renderer.render( scene, camera );
}
stats.update();
</script>
}
</body>
</html>
</script>
</body>
</html>
examples/webgl_scene_test.html
+16 -6
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - io - scene loader - webgl</title>
<title>three.js webgl - io - scene loader</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -150,6 +150,8 @@
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -174,6 +176,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function $( id ) {
@@ -237,8 +240,6 @@
$( "start" ).addEventListener( 'click', onStartClick, false );
setInterval( loop, 1000/60 );
var callback_progress = function( progress, result ) {
var bar = 250,
@@ -379,15 +380,24 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .001;
camera.position.y += ( - mouseY - camera.position.y ) * .001;
renderer.render( scene, camera );
stats.update();
}
function log( text ) {
examples/webgl_shader.html
+41 -30
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - shaders [Monjori] - webgl</title>
<title>three.js webgl - materials - shaders [Monjori]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -35,12 +35,13 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script id="vertex_shader" type="x-shader/x-vertex">
void main()
{
@@ -58,34 +59,34 @@
void main(void)
{
vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
float a = time*40.0;
float d,e,f,g=1.0/40.0,h,i,r,q;
e=400.0*(p.x*0.5+0.5);
f=400.0*(p.y*0.5+0.5);
i=200.0+sin(e*g+a/150.0)*20.0;
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
q=f/r;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
d=sin(e*g)*176.0+sin(e*g)*164.0+r;
h=((f+d)+a/2.0)*g;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
i=mod(i/5.6,256.0)/64.0;
if(i<0.0) i+=4.0;
if(i>=2.0) i=4.0-i;
d=r/350.0;
d+=sin(d*d*8.0)*0.52;
f=(sin(a*g)+1.0)/2.0;
gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
float a = time*40.0;
float d,e,f,g=1.0/40.0,h,i,r,q;
e=400.0*(p.x*0.5+0.5);
f=400.0*(p.y*0.5+0.5);
i=200.0+sin(e*g+a/150.0)*20.0;
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
q=f/r;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
d=sin(e*g)*176.0+sin(e*g)*164.0+r;
h=((f+d)+a/2.0)*g;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
i=mod(i/5.6,256.0)/64.0;
if(i<0.0) i+=4.0;
if(i>=2.0) i=4.0-i;
d=r/350.0;
d+=sin(d*d*8.0)*0.52;
f=(sin(a*g)+1.0)/2.0;
gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
}
</script>
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
@@ -101,7 +102,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -150,12 +151,22 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
uniforms.time.value += 0.05;
renderer.render( scene, camera );
stats.update();
}
examples/webgl_shader2.html
+73 -62
View File
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - shaders [custom] - webgl</title>
<title>three.js webgl - materials - shaders [custom]</title>
<meta charset="utf-8">
<style type="text/css">
body {
@@ -32,12 +32,13 @@
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script id="fragment_shader4" type="x-shader/x-fragment">
@@ -45,11 +46,11 @@
uniform vec2 resolution;
varying vec2 vUv;
void main( void ) {
vec2 position = -1.0 + 2.0 * vUv;
float red = abs( sin( position.x * position.y + time / 5.0 ) );
float green = abs( sin( position.x * position.y + time / 4.0 ) );
float blue = abs( sin( position.x * position.y + time / 3.0 ) );
@@ -58,18 +59,18 @@
}
</script>
<script id="fragment_shader3" type="x-shader/x-fragment">
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
void main( void ) {
vec2 position = vUv;
float color = 0.0;
color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
@@ -83,18 +84,18 @@
</script>
<script id="fragment_shader2" type="x-shader/x-fragment">
uniform float time;
uniform vec2 resolution;
uniform sampler2D texture;
varying vec2 vUv;
void main( void ) {
vec2 position = -1.0 + 2.0 * vUv;
float a = atan( position.y, position.x );
float r = sqrt( dot( position, position ) );
@@ -120,60 +121,60 @@
uniform float time;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 * vUv;
float a = time*40.0;
float d,e,f,g=1.0/40.0,h,i,r,q;
e=400.0*(p.x*0.5+0.5);
f=400.0*(p.y*0.5+0.5);
i=200.0+sin(e*g+a/150.0)*20.0;
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
q=f/r;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
d=sin(e*g)*176.0+sin(e*g)*164.0+r;
h=((f+d)+a/2.0)*g;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
i=mod(i/5.6,256.0)/64.0;
if(i<0.0) i+=4.0;
if(i>=2.0) i=4.0-i;
d=r/350.0;
d+=sin(d*d*8.0)*0.52;
f=(sin(a*g)+1.0)/2.0;
gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
float a = time*40.0;
float d,e,f,g=1.0/40.0,h,i,r,q;
e=400.0*(p.x*0.5+0.5);
f=400.0*(p.y*0.5+0.5);
i=200.0+sin(e*g+a/150.0)*20.0;
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
q=f/r;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
d=sin(e*g)*176.0+sin(e*g)*164.0+r;
h=((f+d)+a/2.0)*g;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
i=mod(i/5.6,256.0)/64.0;
if(i<0.0) i+=4.0;
if(i>=2.0) i=4.0-i;
d=r/350.0;
d+=sin(d*d*8.0)*0.52;
f=(sin(a*g)+1.0)/2.0;
gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
}
</script>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
var container, stats;
var start_time;
var camera, scene, renderer;
var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
@@ -185,7 +186,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
@@ -197,7 +198,7 @@
scene = new THREE.Scene();
start_time = new Date().getTime();
uniforms1 = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
@@ -208,14 +209,14 @@
resolution: { type: "v2", value: new THREE.Vector2() },
texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
};
uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
var size = 0.75, mlib = [],
var size = 0.75, mlib = [],
params = [ [ 'fragment_shader1', uniforms1 ], [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
for( var i = 0; i < params.length; i++ ) {
material = new THREE.MeshShaderMaterial( {
uniforms: params[ i ][ 1 ],
@@ -223,18 +224,18 @@
fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
} );
mlib[ i ] = material;
mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ], false ), new THREE.MeshFaceMaterial() );
mesh.position.x = i - (params.length - 1)/2;
mesh.position.y = i % 2 - 0.5;
scene.addObject( mesh );
meshes[ i ] = mesh;
}
renderer = new THREE.WebGLRenderer();
container.appendChild( renderer.domElement );
@@ -253,28 +254,38 @@
uniforms1.resolution.value.x = window.innerWidth;
uniforms1.resolution.value.y = window.innerHeight;
uniforms2.resolution.value.x = window.innerWidth;
uniforms2.resolution.value.y = window.innerHeight;
renderer.setSize( window.innerWidth, window.innerHeight );
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
uniforms1.time.value += 0.05;
uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
for( var i = 0; i < meshes.length; ++i ) {
meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
}
renderer.render( scene, camera );
stats.update();
}