mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +10:00
alteredq
dde831bf6f
For decals you need to set "decalIndex" property of the material (corresponding to materials index of the original mesh UV material). Added multimaterials example. Fixed forgotten sphere smoothing in OBJ converter example.
399 lines
16 KiB
HTML
399 lines
16 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: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 7/8 or Firefox 4 using WebGL renderer.
|
|
<p>Canvas renderer is very slow on anything other than Chrome.
|
|
</div>
|
|
|
|
<div id="log"></div>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<!--
|
|
-->
|
|
|
|
<!--
|
|
<script type="text/javascript" src="../src/Three.js"></script>
|
|
<script type="text/javascript" src="../src/core/Color.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector2.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
|
|
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vertex.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face4.js"></script>
|
|
<script type="text/javascript" src="../src/core/UV.js"></script>
|
|
<script type="text/javascript" src="../src/core/Geometry.js"></script>
|
|
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
|
|
<script type="text/javascript" src="../src/lights/Light.js"></script>
|
|
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Particle.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Line.js"></script>
|
|
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
|
|
-->
|
|
|
|
|
|
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
|
|
<script type="text/javascript" src="geometry/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.MeshBitmapUVMappingMaterial( x );
|
|
xm.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.add(mesh);
|
|
|
|
// SPHERES
|
|
|
|
sphere = new Sphere( 100, 16, 8, 1 );
|
|
for (var i=0; i<10; i++) {
|
|
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffdddddd ) );
|
|
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.doubleSided = true;
|
|
mesh.overdraw = true;
|
|
mesh.updateMatrix();
|
|
scene.add(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 );
|
|
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);
|
|
|
|
function createModel1() {
|
|
|
|
// MESH
|
|
|
|
geometry = new Male02( "obj/male02" );
|
|
zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
|
|
zmesh.position.x = 90;
|
|
zmesh.position.z = 50;
|
|
zmesh.position.y = FLOOR;
|
|
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
|
|
zmesh.overdraw = true;
|
|
zmesh.updateMatrix();
|
|
scene.add(zmesh);
|
|
|
|
// PLANES with all materials from the model
|
|
|
|
createMaterialsPalette( geometry.materials, 100, 105 );
|
|
}
|
|
|
|
function createModel2() {
|
|
|
|
// MESH
|
|
|
|
geometry = new Female02( "obj/female02" );
|
|
zmesh = new THREE.Mesh( geometry, 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.add(zmesh);
|
|
|
|
// PLANES with all materials from the model
|
|
|
|
createMaterialsPalette( geometry.materials, 100, 0 );
|
|
}
|
|
|
|
loadAsync( "obj/male02/male02.js", createModel1);
|
|
loadAsync( "obj/female02/female02.js", createModel2);
|
|
|
|
}
|
|
|
|
function loadAsync( url, callback ) {
|
|
|
|
var el = document.createElement( 'script' );
|
|
el.type = 'text/javascript';
|
|
el.onload = callback;
|
|
el.src = url;
|
|
document.getElementsByTagName("head")[0].appendChild(el);
|
|
|
|
}
|
|
|
|
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.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.MeshBitmapUVMappingMaterial( x );
|
|
xm.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.add(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>
|