mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-24 20:36:00 +10:00
alteredq
81b60ea2f6
Noticeable difference: can't anymore assign Material references to faces directly - "face.materials" became "face.materialIndex". Materials have to go to "geometry.materials" array (to which "face.materialIndex" points). This is necessary to allow run-time changing of face materials (this indirection used to be done by arrays). Some casualties: - multi-materials example, this functionality isn't possible anymore - had to simplify LOD Text examples as LODs don't handle groups (used to fake multi-materials) - multi-materials sphere in materials example can't have faces with undefined materials (this may be fixable I guess, when there'll be some real use-case) - scene format still has materials arrays, only the last material will be used (except when there are face materials, then materials from JSON will be used, as before) Other renderers and their corresponding examples were not touched yet. WebGLRenderer still needs some prettification, some things don't make sense anymore without arrays, code can be cleaned up further.
341 lines
9.1 KiB
HTML
341 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js misc - materials - multi-materials</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
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; }
|
|
|
|
#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 9 or Firefox 4 using WebGL renderer.
|
|
<p>Canvas renderer is very slow on anything other than Chrome.
|
|
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var FLOOR = - 250;
|
|
|
|
var container;
|
|
var stats;
|
|
|
|
var camera, target;
|
|
var scene;
|
|
var canvasRenderer, webglRenderer;
|
|
|
|
var mesh, zmesh, geometry;
|
|
|
|
var directionalLight;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var render_canvas = 0, render_gl = 1;
|
|
var has_gl = 0;
|
|
|
|
var bcanvas = document.getElementById( 'rcanvas' );
|
|
var bwebgl = document.getElementById( 'rwebgl' );
|
|
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
init();
|
|
animate();
|
|
|
|
render_canvas = !has_gl;
|
|
bwebgl.style.display = has_gl ? "inline" : "none";
|
|
bcanvas.className = render_canvas ? "button" : "button inactive";
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
camera.position.z = 500;
|
|
|
|
target = new THREE.Vector3( 0, 0, 0 );
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// SPHERES
|
|
|
|
var m1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );
|
|
var m2 = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1.5, transparent: true } );
|
|
|
|
sphere = new THREE.SphereGeometry( 100, 16, 8 );
|
|
|
|
for ( var i = 0; i < 10; i ++ ) {
|
|
|
|
var group = new THREE.Object3D();
|
|
|
|
group.position.x = 500 * ( Math.random() - 0.5 );
|
|
group.position.y = 500 * ( Math.random() - 0.5 );
|
|
group.position.z = 500 * ( Math.random() - 0.5 );
|
|
|
|
group.scale.x = group.scale.y = group.scale.z = 0.25 * ( Math.random() + 0.5 );
|
|
|
|
scene.add( group );
|
|
|
|
var mesh1 = new THREE.Mesh( sphere, m1 );
|
|
var mesh2 = new THREE.Mesh( sphere, m2 );
|
|
|
|
group.add( mesh1 );
|
|
group.add( mesh2 );
|
|
|
|
}
|
|
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x101010 );
|
|
scene.add( ambient );
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
directionalLight.position.set( 0, -70, 100 ).normalize();
|
|
scene.add( directionalLight );
|
|
|
|
mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
|
|
mesh.scale.set( 0.1, 0.1, 0.1 );
|
|
mesh.position.set( 0, 0, 120 );
|
|
scene.add( mesh );
|
|
|
|
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.BinaryLoader(),
|
|
var loader = new THREE.JSONLoader(),
|
|
callback = function( geometry ) { createScene( geometry ) };
|
|
|
|
loader.load( "obj/female02/Female02_slim.js", callback );
|
|
//loader.load( "obj/female02/Female02_bin.js", callback );
|
|
|
|
}
|
|
|
|
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 ), transparent: true } );
|
|
var xm2 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x2 ), transparent: true } );
|
|
xm1.map.needsUpdate = true;
|
|
xm2.map.needsUpdate = true;
|
|
|
|
geometry.materials[ 0 ] = xm1; // goes to faces with material 0
|
|
geometry.materials[ 1 ] = xm2; // goes to faces with material 1
|
|
|
|
geometry.materials[ 4 ] = new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
|
|
|
|
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
|
|
zmesh.position.set( -80, FLOOR, 50 );
|
|
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
|
|
zmesh.overdraw = true;
|
|
scene.add( 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 THREE.PlaneGeometry( 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;
|
|
scene.add( 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 ), transparent: true } );
|
|
xm.map.needsUpdate = true;
|
|
|
|
mesh = new THREE.Mesh( new THREE.PlaneGeometry( 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;
|
|
scene.add( mesh );
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
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;
|
|
|
|
camera.lookAt( target );
|
|
|
|
if ( render_canvas ) canvasRenderer.render( scene, camera );
|
|
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
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>
|