mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-25 12:55:57 +10:00
alteredq
ecad27eb11
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader. Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
276 lines
7.9 KiB
HTML
276 lines
7.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - Large mesh test</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#000;
|
|
color:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
overflow:hidden;
|
|
font-family:georgia;
|
|
text-align:center;
|
|
}
|
|
h1 { }
|
|
a { color:skyblue }
|
|
canvas { pointer-events:none; z-index:10; position:relative; }
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
#d { text-align:center; margin:1em 0 -18em 0; z-index:0; position:relative; display:block }
|
|
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
|
|
.inactive { background:#999; color:#eee }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="d">
|
|
<h1>Large mesh test</h1>
|
|
|
|
<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>
|
|
(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/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var FLOOR = -250;
|
|
|
|
var container;
|
|
var stats;
|
|
|
|
var camera;
|
|
var scene;
|
|
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 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();
|
|
|
|
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;
|
|
mesh.position.y = y;
|
|
mesh.position.z = z;
|
|
mesh.rotation.x = rx;
|
|
mesh.rotation.y = ry;
|
|
mesh.rotation.z = rz;
|
|
mesh.overdraw = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
|
|
}
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
camera.position.z = 1500;
|
|
camera.updateMatrix();
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x101010 );
|
|
scene.addLight( ambient );
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
directionalLight.position.x = 1;
|
|
directionalLight.position.y = 1;
|
|
directionalLight.position.z = 2;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffaa00 );
|
|
pointLight.position.x = 0;
|
|
pointLight.position.y = 0;
|
|
pointLight.position.z = 0;
|
|
scene.addLight( pointLight );
|
|
|
|
// light representation
|
|
sphere = new Sphere( 100, 16, 8, 1 );
|
|
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
|
|
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
|
|
lightMesh.position = pointLight.position;
|
|
lightMesh.overdraw = true;
|
|
lightMesh.updateMatrix();
|
|
scene.addObject(lightMesh);
|
|
|
|
|
|
if ( render_gl ) {
|
|
try {
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( webglRenderer.domElement );
|
|
has_gl = 1;
|
|
}
|
|
catch (e) {
|
|
}
|
|
}
|
|
|
|
if( render_canvas ) {
|
|
canvasRenderer = new THREE.CanvasRenderer();
|
|
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( canvasRenderer.domElement );
|
|
}
|
|
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
bcanvas.addEventListener("click", toggleCanvas, false);
|
|
bwebgl.addEventListener("click", toggleWebGL, false);
|
|
|
|
|
|
var s = (new Date).getTime();
|
|
|
|
loader = new THREE.Loader( true );
|
|
document.body.appendChild( loader.statusDomElement );
|
|
|
|
//loader.loadAscii( 'obj/lucy/Lucy100k_slim.js', function( geometry ) { createScene( geometry, s ) } );
|
|
loader.loadBinary( 'obj/lucy/Lucy100k_bin.js', function( geometry ) { createScene( geometry, s ) }, "obj/lucy" );
|
|
|
|
}
|
|
|
|
|
|
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 );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
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();
|
|
|
|
r += 0.01;
|
|
|
|
|
|
if ( render_canvas ) canvasRenderer.render( scene, camera );
|
|
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
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>
|
|
|
|
</body>
|
|
</html>
|