mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 21:45:57 +10:00
alteredq
fbd12838b1
This commit has handful of things going on:
- had to sacrifice one light to please ANGLE, making it again up to 4 instead of up to 5 total lights :(
- Basic / Lambert / Phong materials now have new parameters:
"combine": THREE.Mix | THREE.Multiply [default]
- tells how to combine environment map with the original material:
- "Multiply" creates chrome-like metallic look (it's what was already there),
color of the underlying material is multiplied with the environment map,
this creates different colored metals
- "Mix" creates shiny plastic look
color of the underlying material is lerped with the environment map,
amount of the contribution from the environment map is controlled
by another new parameter "reflectivity"
"reflectivity": <float> [from <0.0, 1.0>]
- controls mixing of underlying material and environment map for "Mix" combine mode
0: pure underlying material, zero contribution from environment map (Basic/Lambert/Phong)
1: pure environment map, zero contribution from underlying material (uncolored chrome look)
"refraction_ratio": <float>
- controls refractive mapping, ratio of the index of refraction in the medium containing the incident ray
to that of the medium being entered
- sensible values seem to be from ~0.6 - 1.0
(in theory, e.g. air/glass should be 0.75, but this looks weird, values between 0.9 - 1.0 give the most interesting results,
though maybe there is bug somewhere in my code)
- for use refraction mapping, just add parameter to TextureCube like this (default is reflection mapping)
"new THREE.TextureCube( images, THREE.RefractionMap )"
326 lines
9.5 KiB
HTML
326 lines
9.5 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; position:relative; }
|
|
#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;
|
|
var stats;
|
|
|
|
var camera;
|
|
var scene;
|
|
var canvasRenderer, webglRenderer;
|
|
|
|
var mesh, zmesh, geometry;
|
|
|
|
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 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 ) } );
|
|
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.updateMatrix();
|
|
scene.addObject(mesh);
|
|
|
|
// SPHERES
|
|
|
|
sphere = new Sphere( 100, 16, 8, 1 );
|
|
for (var i=0; i<10; i++) {
|
|
mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
|
|
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( scene );
|
|
webglRenderer.setFaceCulling(0);
|
|
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 loader = new THREE.Loader();
|
|
//loader.loadAscii( "obj/male02/Male02_slim.js", function( geometry ) { createScene( geometry, 90, 50, FLOOR, 105 ) }, "obj/male02" );
|
|
//loader.loadAscii( "obj/female02/Female02_slim.js", function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) }, "obj/female02" );
|
|
|
|
loader.loadBinary( "obj/male02/Male02_bin.js", function( geometry ) { createScene( geometry, 90, 50, FLOOR, 105 ) }, "obj/male02" );
|
|
loader.loadBinary( "obj/female02/Female02_bin.js", function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) }, "obj/female02" );
|
|
|
|
}
|
|
|
|
function createScene( geometry, x, y, z, b ) {
|
|
|
|
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(), 1 );
|
|
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>
|