mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 21:15:56 +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.
337 lines
10 KiB
HTML
337 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - multi-materials 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:50px; text-align:left; display:block; z-index:1; 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>Multi-materials test</h1>
|
|
|
|
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
|
|
<span id="rwebgl" class="button">WebGL renderer</span>
|
|
<br/>
|
|
|
|
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>
|
|
|
|
<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/2;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var FLOOR = -250;
|
|
|
|
var container;
|
|
var stats;
|
|
|
|
var camera;
|
|
var scene;
|
|
var canvasRenderer, webglRenderer;
|
|
|
|
var mesh, zmesh, geometry;
|
|
|
|
var directionalLight, pointLight;
|
|
|
|
var mouseX = 0;
|
|
var 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();
|
|
|
|
// SPHERES
|
|
|
|
sphere = new Sphere( 100, 16, 8 );
|
|
for (var i=0; i<10; i++) {
|
|
//mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( ) );
|
|
mesh = new THREE.Mesh( sphere, [ new THREE.MeshLambertMaterial( { color: 0xffffff } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframe_linewidth: 1.5 } ) ] );
|
|
//mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( { color: 0x00aa00, wireframe: true, wireframe_linewidth: 1.5 } ) );
|
|
//mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { wireframe: true, wireframe_linewidth: 2.5 } ) );
|
|
mesh.position.x = 500 * ( Math.random() - 0.5 );
|
|
mesh.position.y = 500 * ( Math.random() - 0.5 );
|
|
mesh.position.z = 500 * ( Math.random() - 0.5 );
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
|
|
scene.addObject(mesh);
|
|
}
|
|
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x101010 );
|
|
scene.addLight( ambient );
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
directionalLight.position.y = -70;
|
|
directionalLight.position.z = 100;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffaa00 );
|
|
pointLight.position.x = 0;
|
|
pointLight.position.y = 0;
|
|
pointLight.position.z = 120;
|
|
//scene.addLight( pointLight );
|
|
|
|
mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
|
|
mesh.position = pointLight.position;
|
|
scene.addObject(mesh);
|
|
|
|
if( render_canvas ) {
|
|
canvasRenderer = new THREE.CanvasRenderer();
|
|
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( canvasRenderer.domElement );
|
|
}
|
|
|
|
if ( render_gl ) {
|
|
try {
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( webglRenderer.domElement );
|
|
has_gl = 1;
|
|
}
|
|
catch (e) {
|
|
}
|
|
}
|
|
|
|
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/female02/Female02_slim.js", function( geometry ) { createScene( geometry) }, "obj/female02" );
|
|
//loader.loadBinary( "obj/female02/Female02_bin.js", function( geometry ) { createScene( geometry) }, "obj/female02" );
|
|
|
|
}
|
|
|
|
function createScene( geometry ) {
|
|
|
|
// PROCEDURAL TEXTURES (decals)
|
|
|
|
var x1 = document.createElement( "canvas" );
|
|
var xc1 = x1.getContext("2d");
|
|
x1.width = x1.height = 256;
|
|
|
|
xc1.shadowBlur = 3;
|
|
xc1.shadowColor = "#000";
|
|
xc1.font = "7pt arial";
|
|
xc1.fillStyle = "hsla("+0+",90%,50%,1);"
|
|
xc1.fillText("Three", 57, 29);
|
|
|
|
xc1.fillStyle = "hsla("+0+",90%,50%,0.15);"
|
|
xc1.fillRect(40, 70, 60, 50);
|
|
|
|
for(var i=0;i<500;i++) {
|
|
xc1.fillStyle = "hsla("+60*Math.random()+",90%,50%,0.5);"
|
|
xc1.fillRect(40+60*Math.random(), 118+10*Math.random(), 2, 10);
|
|
}
|
|
|
|
var x2 = document.createElement( "canvas" );
|
|
var xc2 = x2.getContext("2d");
|
|
x2.width = x2.height = 128;
|
|
xc2.fillStyle = "rgba(0,0,0,0.5)";
|
|
for(var i=0;i<14;i++) {
|
|
xc2.fillRect(0, 5+i*4, 54, 2);
|
|
xc2.fillRect(i*4, 5, 2, 54);
|
|
}
|
|
|
|
var xm1 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x1 ) } );
|
|
xm1.map.image.loaded = 1; // this is procedurally generated texture
|
|
|
|
var xm2 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x2 ) } );
|
|
xm2.map.image.loaded = 1; // this is procedurally generated texture
|
|
|
|
geometry.materials[0].push ( xm1 ); // goes to faces with material 0
|
|
geometry.materials[1].push ( xm2 ); // goes to faces with material 1
|
|
|
|
geometry.materials[4].push ( new THREE.MeshLambertMaterial( { color: 0xff0000, opacity:0.5 } ) );
|
|
|
|
var materials = [ new THREE.MeshFaceMaterial() ];
|
|
|
|
// full-mesh wireframe overlay
|
|
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, wireframe_linewidth: 1.5 } ) );
|
|
|
|
// full-mesh color overlay
|
|
//materials.push( new THREE.MeshBasicMaterial { color: 0xff0000, opacity: 0.5 } ) );
|
|
|
|
zmesh = new THREE.Mesh( geometry, materials, 1 );
|
|
zmesh.position.x = -80;
|
|
zmesh.position.z = 50;
|
|
zmesh.position.y = FLOOR;
|
|
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
|
|
zmesh.overdraw = true;
|
|
zmesh.updateMatrix();
|
|
scene.addObject(zmesh);
|
|
|
|
// PLANES with all materials from the model
|
|
|
|
createMaterialsPalette( geometry.materials, 100, 0 );
|
|
|
|
}
|
|
|
|
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 ( 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>
|