mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +10:00
alteredq
271ba6c524
Testing on current examples didn't show any noticeable performance degradation when enabling / disabling culling for every object in every frame. "FlipSided" property could be probably done in very similar way, just setting "gl.frontFace( gl.CCW )" or "gl.frontFace( gl.CW )"
328 lines
9.4 KiB
HTML
328 lines
9.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - OBJ converter test</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
overflow:hidden;
|
|
font-family:georgia;
|
|
text-align:center;
|
|
}
|
|
h1 { }
|
|
a { color:skyblue }
|
|
canvas { pointer-events:none; z-index:10; }
|
|
#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
|
|
#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
|
|
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
|
|
.inactive { background:#999; color:#eee }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="d">
|
|
<h1>OBJ to Three.js converter test</h1>
|
|
|
|
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
|
|
<span id="rwebgl" class="button">WebGL renderer</span>
|
|
<br/>
|
|
|
|
<p>Models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion<a>
|
|
<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255">iClone</a>.
|
|
|
|
<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
|
|
|
|
<br/>
|
|
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
|
|
<p>Canvas renderer is very slow on anything other than 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="../src/extras/primitives/Plane.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,stats;
|
|
|
|
var camera, scene;
|
|
var canvasRenderer, webglRenderer;
|
|
|
|
var mesh, zmesh, geometry;
|
|
|
|
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();
|
|
|
|
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');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
camera.position.z = 500;
|
|
camera.updateMatrix();
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// GROUND
|
|
|
|
var x = document.createElement( "canvas" );
|
|
var xc = x.getContext("2d");
|
|
x.width = x.height = 128;
|
|
xc.fillStyle = "#fff";
|
|
xc.fillRect(0, 0, 128, 128);
|
|
xc.fillStyle = "#000";
|
|
xc.fillRect(0, 0, 64, 64);
|
|
xc.fillStyle = "#999";
|
|
xc.fillRect(32, 32, 32, 32);
|
|
xc.fillStyle = "#000";
|
|
xc.fillRect(64, 64, 64, 64);
|
|
xc.fillStyle = "#555";
|
|
xc.fillRect(96, 96, 32, 32);
|
|
|
|
var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping ) } );
|
|
xm.map.image.loaded = 1;
|
|
|
|
geometry = new Plane( 100, 100, 15, 10 );
|
|
for(var i=0; i<geometry.uvs.length; i++) {
|
|
var uvs = geometry.uvs[i];
|
|
for ( j = 0, jl = uvs.length; j < jl; j++ ) {
|
|
uvs[j].u *= 10;
|
|
uvs[j].v *= 10;
|
|
}
|
|
|
|
}
|
|
mesh = new THREE.Mesh( geometry, xm );
|
|
mesh.position.x = 0;
|
|
mesh.position.y = FLOOR;
|
|
mesh.position.z = 0;
|
|
mesh.rotation.x = 1.57;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 10;
|
|
mesh.doubleSided = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
|
|
// SPHERES
|
|
|
|
var material_spheres = new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
|
|
sphere = new Sphere( 100, 16, 8 );
|
|
for (var i=0; i<10; i++) {
|
|
mesh = new THREE.Mesh( sphere, material_spheres );
|
|
mesh.position.x = 500 * (Math.random() - 0.5);
|
|
mesh.position.y = 300 * (Math.random() - 0) + FLOOR;
|
|
mesh.position.z = 100 * (Math.random() - 1);
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
|
|
mesh.overdraw = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
}
|
|
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x221100 );
|
|
scene.addLight( ambient );
|
|
|
|
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
|
|
directionalLight.position.y = -70;
|
|
directionalLight.position.z = 100;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
var pointLight = new THREE.PointLight( 0xff0000, 1 );
|
|
//scene.addLight( pointLight );
|
|
|
|
|
|
if ( render_gl ) {
|
|
try {
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
webglRenderer.domElement.style.position = "relative";
|
|
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 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 } );
|
|
|
|
}
|
|
|
|
function createScene( geometry, x, y, z, b ) {
|
|
|
|
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
|
|
zmesh.position.x = x;
|
|
zmesh.position.z = y;
|
|
zmesh.position.y = z;
|
|
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
|
|
zmesh.overdraw = true;
|
|
zmesh.updateMatrix();
|
|
scene.addObject(zmesh);
|
|
|
|
createMaterialsPalette( geometry.materials, 100, b );
|
|
|
|
}
|
|
|
|
function createMaterialsPalette( materials, size, bottom ) {
|
|
|
|
for ( var i = 0; i < materials.length; ++i ) {
|
|
|
|
// material
|
|
mesh = new THREE.Mesh( new Plane( size, size ), materials[i] );
|
|
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
|
|
mesh.position.y = FLOOR + size/2 + bottom;
|
|
mesh.position.z = -100;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
|
|
mesh.doubleSided = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
|
|
// number
|
|
var x = document.createElement( "canvas" );
|
|
var xc = x.getContext("2d");
|
|
x.width = x.height = 128;
|
|
xc.shadowColor = "#000";
|
|
xc.shadowBlur = 7;
|
|
xc.fillStyle = "orange";
|
|
xc.font = "50pt arial bold";
|
|
xc.fillText(i, 10, 64);
|
|
|
|
var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
|
|
xm.map.image.loaded = 1;
|
|
|
|
mesh = new THREE.Mesh( new Plane( size, size ), xm );
|
|
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
|
|
mesh.position.y = FLOOR + size/2 + bottom;
|
|
mesh.position.z = -99;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
|
|
mesh.doubleSided = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
camera.updateMatrix();
|
|
|
|
if ( zmesh && 0 ) {
|
|
zmesh.rotation.y += 0.005;
|
|
zmesh.updateMatrix();
|
|
}
|
|
|
|
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>
|