home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote branch 'upstream/master'

Browse Source
This commit is contained in:
Julian Walker
2010-11-09 22:14:03 -08:00
parent 038adb701f f34ca2e477
commit 017cb72335
76 changed files with 156065 additions and 2229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AUTHORS
-11
View File
@@ -1,11 +0,0 @@
Authors ordered by first contribution.
http://github.com/mrdoob
http://github.com/supereggbert
http://github.com/sole
http://kile.stravaganza.org
http://github.com/kikko
http://github.com/philogb
http://github.com/julianwa
http://github.com/mindlapse
http://github.com/alteredq
LICENSE
+1 -1
View File
@@ -1,6 +1,6 @@
The MIT License
Copyright (c) 2010 Mr.doob, http://mrdoob.com
Copyright (c) 2010 Three.js Authors. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
README.md
+18 -9
View File
@@ -15,6 +15,9 @@ Other similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://c
### Examples ###
[![large_mesh](http://mrdoob.github.com/three.js/assets/examples/12_large_mesh.png)](http://mrdoob.github.com/three.js/examples/geometry_large_mesh.html)
[![interactive_cubes](http://mrdoob.github.com/three.js/assets/examples/11_interactive.png)](http://mrdoob.github.com/three.js/examples/interactive_cubes.html)
[![camera_ortographic](http://mrdoob.github.com/three.js/assets/examples/10_orthographic.png)](http://mrdoob.github.com/three.js/examples/camera_orthographic.html)
[![lights_pointlights](http://mrdoob.github.com/three.js/assets/examples/09_walthead.png)](http://mrdoob.github.com/three.js/examples/lights_pointlights.html)
[![geometry_birds](http://mrdoob.github.com/three.js/assets/examples/08_birds.png)](http://mrdoob.github.com/three.js/examples/geometry_birds.html)
[![geometry_earth](http://mrdoob.github.com/three.js/assets/examples/07_earth.png)](http://mrdoob.github.com/three.js/examples/geometry_earth.html)
@@ -28,9 +31,10 @@ Other similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://c
### Featured projects ###
[![Voxels](http://mrdoob.github.com/three.js/assets/projects/10_voxels.png)](http://mrdoob.com/projects/voxels/)
[![The Wilderness Downtown](http://mrdoob.github.com/three.js/assets/projects/09_arcadefire.png)](http://thewildernessdowntown.com/)
[![CloudSCAD](http://mrdoob.github.com/three.js/assets/projects/08_cloudscad.png)](http://cloudscad.com/stl_viewer/)
[![Or so they say...](http://mrdoob.github.com/three.js/assets/projects/07_orsotheysay.png)](http://xplsv.com/prods/demos/online/xplsv_orsotheysay/)
[![Or so they say...](http://mrdoob.github.com/three.js/assets/projects/07_orsotheysay.png)](http://xplsv.com/prods/demos/xplsv_orsotheysay/)
[![Rat](http://mrdoob.github.com/three.js/assets/projects/06_rat.png)](http://tech.lab212.org/2010/07/export-textured-models-from-blender2-5-to-three-js/)
[![Failure](http://mrdoob.github.com/three.js/assets/projects/05_failure.png)](http://www.is-real.net/experiments/three/failure/)
[![Space Cannon 3D](http://mrdoob.github.com/three.js/assets/projects/02_spacecannon.png)](http://labs.brian-stoner.com/spacecannon/)
@@ -94,6 +98,7 @@ For creating a customised version of the library, including the source files in
<script type="text/javascript" src="js/three/core/Vector2.js"></script>
<script type="text/javascript" src="js/three/core/Vector3.js"></script>
<script type="text/javascript" src="js/three/core/Vector4.js"></script>
<script type="text/javascript" src="js/three/core/Ray.js"></script>
<script type="text/javascript" src="js/three/core/Rectangle.js"></script>
<script type="text/javascript" src="js/three/core/Matrix3.js"></script>
<script type="text/javascript" src="js/three/core/Matrix4.js"></script>
@@ -103,6 +108,7 @@ For creating a customised version of the library, including the source files in
<script type="text/javascript" src="js/three/core/UV.js"></script>
<script type="text/javascript" src="js/three/core/Geometry.js"></script>
<script type="text/javascript" src="js/three/cameras/Camera.js"></script>
<script type="text/javascript" src="js/three/io/Loader.js"></script>
<script type="text/javascript" src="js/three/lights/Light.js"></script>
<script type="text/javascript" src="js/three/lights/AmbientLight.js"></script>
<script type="text/javascript" src="js/three/lights/DirectionalLight.js"></script>
@@ -131,15 +137,19 @@ For creating a customised version of the library, including the source files in
<script type="text/javascript" src="js/three/renderers/renderables/RenderableLine.js"></script>
### Contributors ###
Thanks to the power of the internets (and github <3) these people have kindly helped out with the project.
[alteredq](http://github.com/alteredq), [philogb](http://github.com/philogb), [supereggbert](http://github.com/supereggbert), [kikko](http://github.com/kikko), [kile](http://kile.stravaganza.org/), ...
### Change Log ###
2010 11 04 - **r28** (62.802 kb)
* `Loader` class allows load geometry asynchronously at runtime. ([alteredq](http://github.com/alteredq))
* `MeshPhongMaterial` working with `WebGLRenderer`. ([alteredq](http://github.com/alteredq))
* Support for *huge* objects. Max 500k polys and counting. ([alteredq](http://github.com/alteredq))
* `Projector.unprojectVector` and `Ray` class to check intersections with faces (based on [mindlapse](https://github.com/mindlapse) work)
* Fixed `CanvasRenderer` and `SVGRenderer` z-sorting (not as jumpy anymore).
* Fixed Orthographic projection (was y-inverted).
* Hmmm.. lib file size starting to get too big...
2010 10 28 - **r25** (54.480 kb)
* `WebGLRenderer` now up to date with other renderers! ([alteredq](http://github.com/alteredq))
@@ -154,7 +164,6 @@ Thanks to the power of the internets (and github <3) these people have kindly he
* Added `PointLight`
* `CanvasRenderer` and `SVGRenderer` basic lighting support (ColorStroke/ColorFill only)
* `Renderer` > `Projector`. `CanvasRenderer`, `SVGRenderer` and `DOMRenderer` do not extend anymore
* Interactivity base code (hdi folder). To be refactored... ([mindlapse](http://github.com/mindlapse))
* Added `computeCentroids` method to `Geometry`
TODO
+3 -1
View File
@@ -1,10 +1,12 @@
Core
* Simple hierarchy system (look at D1plo1d and tamask branches)
* Interaction, 2D to 3D projection. (look at mindlapse branch)
Examples
* DOMRenderer example
Examples/Geometry/Primitives
* Create more primitives. http://code.google.com/p/ogre-procedural/source/browse/#hg/library/src
Materials
* MeshBitmapSphereMappingMaterial. http://en.wikipedia.org/wiki/Sphere_mapping
* MeshBitmapCubeMappingMaterial. http://en.wikipedia.org/wiki/Cube_mapping
build/Three.js
+2 -2
View File
File diff suppressed because one or more lines are too long
build/ThreeDebug.js
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/camera_free.html
+1
View File
@@ -22,6 +22,7 @@
<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/Ray.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
examples/camera_orthographic.html
+39 -48
View File
@@ -18,71 +18,64 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.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 container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var moveForward = false,
moveBackwards = false,
moveUp = false,
moveDown = false,
moveLeft = false,
moveRight = false,
yawLeft = false,
yawRight = false,
pitchUp = false,
pitchDown = false,
rollLeft = false,
rollRight = false;
var container, stats;
var camera, scene, renderer;
init();
setInterval(loop, 1000/60);
setInterval( loop, 1000 / 60 );
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
container.appendChild( info );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
camera.position.x = 100;
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 100;
camera.position.z = 200;
scene = new THREE.Scene();
// Plane
// Grid
plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.2 ) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
scene.addObject( plane );
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
geometry = new Cube( 50, 50, 50 );
for ( var i = 0; i <= 20; i ++ ) {
for (var i = 0; i < 100; i ++ ) {
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
line.position.z = ( i * 50 ) - 500;
scene.addObject( line );
cube = new THREE.Mesh(geometry, new THREE.MeshColorFillMaterial( 0xffffff, Math.random() * 0.5 + 0.5 ) );
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.addObject( line );
}
// Cubes
var geometry = new Cube( 50, 50, 50 );
for ( var i = 0; i < 100; i ++ ) {
var cube = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff, Math.random() * 0.5 + 0.5 ) );
cube.overdraw = true;
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
@@ -115,7 +108,7 @@
scene.addLight( directionalLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
@@ -126,8 +119,6 @@
}
//
function loop() {
var timer = new Date().getTime() * 0.0001;
examples/geometry/cube.html
+176
View File
@@ -0,0 +1,176 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body
{
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval(loop, 1000/60);
function init()
{
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new Camera(0, 150, 400);
camera.focus = 300;
camera.target.y = 150;
camera.updateMatrix();
scene = new Scene();
// Cube
geometry = new Cube(200, 200, 200);
for (var i = 0; i < geometry.faces.length; i++)
geometry.faces[i].color.setRGBA( Math.floor( Math.random() * 128), Math.floor( Math.random() * 128 + 128), Math.floor( Math.random() * 128 + 128), 255 );
cube = new Mesh(geometry, new FaceColorMaterial());
cube.position.y = 150;
cube.updateMatrix();
scene.add(cube);
// Plane
plane = new Mesh(new Plane(200, 200), new ColorMaterial(0xe0e0e0));
plane.rotation.x = 90 * (Math.PI / 180);
plane.updateMatrix();
scene.add(plane);
renderer = new CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.viewport);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
}
//
function onDocumentMouseDown( event )
{
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event )
{
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart( event )
{
if(event.touches.length == 1)
{
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event )
{
if(event.touches.length == 1)
{
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
}
//
function loop()
{
cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
cube.updateMatrix();
plane.rotation.z = -cube.rotation.y;
plane.updateMatrix();
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/geometry/primitives/ClickCube.js
-49
View File
@@ -1,49 +0,0 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
var ClickCube = function ( width, height, depth, onSelect ) {
THREE.Geometry.call( this );
var scope = this,
width_half = width / 2,
height_half = height / 2,
depth_half = depth / 2;
v( width_half, height_half, -depth_half );
v( width_half, -height_half, -depth_half );
v( -width_half, -height_half, -depth_half );
v( -width_half, height_half, -depth_half );
v( width_half, height_half, depth_half );
v( width_half, -height_half, depth_half );
v( -width_half, -height_half, depth_half );
v( -width_half, height_half, depth_half );
f4( 0, 1, 2, 3 );
f4( 4, 7, 6, 5 );
f4( 0, 4, 5, 1 );
f4( 2, 6, 7, 3 );
f4( 1, 5, 6, 2 );
f4( 4, 0, 3, 7 );
function v( x, y, z ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f4( a, b, c, d ) {
var f = new THREE.SelectableFace4( a, b, c, d, onSelect );
scope.faces.push( f );
}
this.computeCentroids();
this.computeNormals();
};
ClickCube.prototype = new THREE.Geometry();
ClickCube.prototype.constructor = ClickCube;
examples/geometry_cube.html
+4 -4
View File
@@ -50,16 +50,16 @@
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement('div');
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
container.appendChild( info );
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 150;
examples/geometry_large_mesh.html
+268
View File
@@ -0,0 +1,268 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - Large mesh test</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#000;
color:#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:100 }
#d { text-align:center; margin:1em 0 -18em 0; z-index:0; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Large mesh test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
<p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
<br/>
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow for this demo and only diffuse material works there.
<p>Use the flag --allow-file-access-from-files if working localy in Chrome.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.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, lightMesh;
var directionalLight, pointLight;
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 addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1500;
camera.updateMatrix();
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
// light representation
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer( scene );
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 s = (new Date).getTime();
var loader = new THREE.Loader();
//loader.loadAsciiOld( "obj/lucy/Lucy100k.js", function() { createScene( new Lucy100k(), s ) } );
//loader.loadAscii( 'obj/lucy/Lucy100k_slim.js', function( geometry ) { createScene( geometry, s ) } );
loader.loadBinary( 'obj/lucy/Lucy100k_bin.js', function( geometry ) { createScene( geometry, s ) }, "obj/lucy" );
}
function createScene( geometry, start ) {
addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x990000, 30, 1.0 ) );
addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x111111, 0xffaa00, 10, 1.0 ) );
addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x555555, 0x666666, 10, 1.0 ) );
log( "geometry.vertices: " + geometry.vertices.length );
log( "geometry.faces: " + geometry.faces.length );
log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
var r = 0;
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
r += 0.01;
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>
examples/hci_clickcube.html
-187
View File
@@ -1,187 +0,0 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<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/Matrix3.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/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.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/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/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.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/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.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="../src/hci/ClickResolver.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
<script type="text/javascript" src="geometry/primitives/ClickCube.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 container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clickResolver;
init();
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.id = 'msg';
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'No click detected';
container.appendChild(info);
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 300;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
clickResolver = new THREE.ClickResolver( camera, scene );
// Click Cube
var opacity = 0.8;
geometry = new ClickCube( 200, 200, 200,
function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
});
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
}
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject(cube);
geometry2 = new ClickCube( 100, 100, 100,
function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
});
for (var i = 0; i < geometry2.faces.length; i++) {
geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
}
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
cube2.position.y = 150;
cube2.position.z = 200;
scene.addObject(cube2);
// Plane
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.getElementById("msg").innerHTML = "";
clickResolver.findIntersectInScene(
event.clientX/window.innerWidth,
event.clientY/window.innerHeight);
}
var radius = 600;
var theta = 0;
function loop() {
theta += 1;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/interactive_cubes.html
+134
View File
@@ -0,0 +1,134 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var container, stats;
var camera, scene, projector, renderer;
init();
setInterval( loop, 1000 / 60 );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - clickable objects';
container.appendChild( info );
camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 300;
camera.position.z = 500;
scene = new THREE.Scene();
var geometry = new Cube( 100, 100, 100 );
for ( var i = 0; i < 10; i ++ ) {
var object = new THREE.Mesh( geometry, [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ), new THREE.MeshColorStrokeMaterial( 0xffffff, 0.5 ) ] );
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
scene.addObject( object );
}
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectScene( scene );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x000000 ) );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 8;
scene.addObject( particle );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
var radius = 600;
var theta = 0;
function loop() {
theta += 0.2;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/interactive_spheres.html
-193
View File
@@ -1,193 +0,0 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - spheres</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<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/Matrix3.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/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.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/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/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.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/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.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="../src/hci/ClickResolver.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.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 container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clickResolver;
init();
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.id = 'msg';
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'No click detected';
container.appendChild(info);
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 300;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
clickResolver = new THREE.ClickResolver( camera, scene );
// Click Cube
var opacity = 0.8;
geometry = new Sphere( 200 );
for (var i = 0, l = geometry.faces.length; i < l; i++) {
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
geometry.faces[i].selectable = true;
geometry.faces[i].onSelect = function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
}
}
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject(cube);
geometry2 = new Sphere( 100 );
for (var i = 0, l = geometry2.faces.length; i < l; i++) {
geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
geometry2.faces[i].selectable = true;
geometry2.faces[i].onSelect = function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
};
}
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
cube2.position.y = 150;
cube2.position.z = 300;
scene.addObject(cube2);
// Plane
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.getElementById("msg").innerHTML = "";
clickResolver.findIntersectInScene(
event.clientX/window.innerWidth,
event.clientY/window.innerHeight);
}
var radius = 600;
var theta = 0;
function loop() {
theta += 1;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
// camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/interactive_voxelpainter.html
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - voxel painter</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.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 container, stats;
var camera, scene, renderer;
var projector, plane, cube;
var mouse2D, mouse3D, ray,
rollOveredFace, isShiftDown = false,
theta = 45, isCtrlDown = false;
init();
setInterval( loop, 1000 / 60 );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter<br /><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
container.appendChild( info );
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 800;
camera.target.position.y = 200;
scene = new THREE.Scene();
// Grid
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
for ( var i = 0; i <= 20; i ++ ) {
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
line.position.z = ( i * 50 ) - 500;
scene.addObject( line );
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.addObject( line );
}
projector = new THREE.Projector();
plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshFaceMaterial() );
plane.rotation.x = - 90 * Math.PI / 180;
scene.addObject( plane );
mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
ray = new THREE.Ray( camera.position, null );
// Lights
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.addLight( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
var directionalLight = new THREE.DirectionalLight( 0x808080 );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var intersects = ray.intersectScene( scene );
if ( intersects.length > 0 ) {
if ( isCtrlDown ) {
if ( intersects[ 0 ].object != plane ) {
scene.removeObject( intersects[ 0 ].object );
}
} else {
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.transform( intersects[ 0 ].face.normal.clone() ) );
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshColorFillMaterial( 0x00ff80, 1 ), new THREE.MeshFaceMaterial() ] );
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;
voxel.overdraw = true;
scene.addObject( voxel );
}
}
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
case 16: isShiftDown = true; break;
case 17: isCtrlDown = true; break;
}
}
function onDocumentKeyUp( event ) {
switch( event.keyCode ) {
case 16: isShiftDown = false; break;
case 17: isCtrlDown = false; break;
}
}
function save() {
window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
}
function loop() {
if ( isShiftDown ) {
theta += mouse2D.x * 3;
}
mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
ray.direction = mouse3D.subSelf( camera.position ).normalize();
var intersects = ray.intersectScene( scene );
// console.log( intersects );
if ( intersects.length > 0 ) {
if ( intersects[ 0 ].face != rollOveredFace ) {
if ( rollOveredFace ) rollOveredFace.material = [];
rollOveredFace = intersects[ 0 ].face;
rollOveredFace.material = [ new THREE.MeshColorFillMaterial( 0xff0000, 0.5 ) ];
}
} else if ( rollOveredFace ) {
rollOveredFace.material = [];
rollOveredFace = null;
}
camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
examples/lights_pointlights_gl.html
+68 -37
View File
@@ -38,10 +38,10 @@
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</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>
@@ -56,6 +56,7 @@
<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/io/Loader.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>
@@ -81,12 +82,11 @@
<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="obj/walt/WaltHead.js"></script>
-->
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
@@ -108,24 +108,52 @@
scene = new THREE.Scene();
//object = new THREE.Mesh( new WaltHead(), [ new THREE.MeshColorStrokeMaterial( 0xffffff ) ] );
//object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
object = new THREE.Mesh( new WaltHead(), new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0 ) );
object.scale.x = object.scale.y = object.scale.z = 0.80;
object.overdraw = true;
scene.addObject( object );
var loader = new THREE.Loader();
loader.loadAsciiOld( "obj/walt/WaltHead.js", function() {
//object = new THREE.Mesh( new WaltHead(), [ new THREE.MeshColorStrokeMaterial( 0xffffff ) ] );
//object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
object = new THREE.Mesh( new WaltHead(), new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0 ) );
object.scale.x = object.scale.y = object.scale.z = 0.80;
object.overdraw = true;
scene.addObject( object );
});
/*
loader.loadAscii( "obj/walt/WaltHead_slim.js", function( geometry ) {
object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0 ) );
object.scale.x = object.scale.y = object.scale.z = 0.80;
object.overdraw = true;
scene.addObject( object );
});
*/
/*
var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.normalize();
scene.addLight( directionalLight );
loader.loadBinary( "obj/walt/WaltHead_bin.js", function( geometry ) {
object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0 ) );
object.scale.x = object.scale.y = object.scale.z = 0.80;
object.overdraw = true;
scene.addObject( object );
}, "obj/walt");
*/
/*
var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.normalize();
scene.addLight( directionalLight );
*/
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
scene.addLight( new THREE.AmbientLight( 0x00000 ) );
scene.addLight( new THREE.AmbientLight( 0x00000 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
@@ -136,30 +164,30 @@
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
var l1 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0xff0040 ) );
l1.position = light1.position;
scene.addObject( l1 );
var l2 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x0040ff ) );
l2.position = light2.position;
scene.addObject( l2 );
var l3 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x80ff80 ) );
l3.position = light3.position;
scene.addObject( l3 );
var l1 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0xff0040 ) );
l1.position = light1.position;
scene.addObject( l1 );
var l2 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x0040ff ) );
l2.position = light2.position;
scene.addObject( l2 );
var l3 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x80ff80 ) );
l3.position = light3.position;
scene.addObject( l3 );
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
/*
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
*/
*/
}
@@ -182,10 +210,13 @@
light3.position.z = Math.sin( time * 0.5 ) * 30;
renderer.render(scene, camera);
//stats.update();
//stats.update();
}
function log() {
}
</script>
</body>
examples/lights_test.html
+172 -180
View File
@@ -6,43 +6,44 @@
<style type="text/css">
body {
background:#fff;
padding:0;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
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:100; }
#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 }
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:100; }
#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>Lights test</h1>
<body>
<div id="d">
<h1>Lights test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<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>
<pre id="log"></pre>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<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="../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>
@@ -57,6 +58,7 @@
<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/io/Loader.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>
@@ -82,8 +84,7 @@
<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>
@@ -104,144 +105,135 @@
var canvasRenderer, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var directionalLight, pointLight;
var directionalLight, pointLight;
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");
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";
//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();
camera.position.z = 500;
camera.updateMatrix();
scene = new THREE.Scene();
// SPHERES
sphere = new Sphere( 100, 16, 8, 0 );
for (var i=0; i<30; i++) {
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffffff ) );
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);
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
// SPHERES
sphere = new Sphere( 100, 16, 8, 0 );
for (var i=0; i<30; i++) {
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffffff ) );
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);
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.y = -70;
directionalLight.position.z = 100;
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 = 0;
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
}
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( scene );
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
}
}
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer( scene );
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;
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
function createModel() {
// MESH
geometry = new Torus( );
zmesh = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
zmesh.position.x = 0;
zmesh.position.z = 0;
zmesh.position.y = 0;
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.addObject(zmesh);
}
loadAsync( "obj/torus/Torus.js", createModel);
var loader = new THREE.Loader();
//loader.loadAsciiOld( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );
//loader.loadAscii( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
loader.loadBinary( "obj/torus/Torus_bin.js", function( geometry ) { createScene( geometry ) }, "obj/torus" );
}
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 createScene( geometry ) {
zmesh = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
zmesh.position.x = 0;
zmesh.position.z = 0;
zmesh.position.y = 0;
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.addObject(zmesh);
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -249,33 +241,33 @@
}
var r = 0;
var r = 0;
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
for(var i=0; i<scene.objects.length; ++i) {
if ( i%3 == 1 )
scene.objects[i].rotation.x += 0.05;
else if ( i%3 == 2 )
scene.objects[i].rotation.y += 0.05;
else if ( i%3 == 0 )
scene.objects[i].rotation.z += 0.05;
scene.objects[i].updateMatrix();
}
lightMesh.position.x = 200*Math.cos(r);
lightMesh.position.z = 200*Math.sin(r);
lightMesh.updateMatrix();
for(var i=0; i<scene.objects.length; ++i) {
if ( i%3 == 1 )
scene.objects[i].rotation.x += 0.05;
else if ( i%3 == 2 )
scene.objects[i].rotation.y += 0.05;
else if ( i%3 == 0 )
scene.objects[i].rotation.z += 0.05;
scene.objects[i].updateMatrix();
}
lightMesh.position.x = 200*Math.cos(r);
lightMesh.position.z = 200*Math.sin(r);
lightMesh.updateMatrix();
r += 0.1;
r += 0.1;
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
@@ -283,42 +275,42 @@
}
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";
}
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>
examples/materials_test.html
+245 -257
View File
@@ -6,46 +6,47 @@
<style type="text/css">
body {
background:#fff;
padding:0;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
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:100 }
#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 }
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:100 }
#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>
<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/>
<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>
<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.
<p><a href="http://code.google.com/p/chromium/issues/detail?id=60124">Line width is not set properly</a> on Chrome in Windows.
</div>
<div id="log"></div>
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion 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>
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<!--
-->
<!--
<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>
@@ -60,6 +61,7 @@
<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/io/Loader.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>
@@ -85,8 +87,7 @@
<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>
@@ -107,248 +108,235 @@
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var directionalLight, pointLight;
var directionalLight, pointLight;
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");
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";
//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();
camera.position.z = 500;
camera.updateMatrix();
scene = new THREE.Scene();
// SPHERES
sphere = new Sphere( 100, 16, 8, 1 );
for (var i=0; i<10; i++) {
//mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffffff ) );
mesh = new THREE.Mesh( sphere, [ new THREE.MeshColorFillMaterial( 0xffffff ), new THREE.MeshColorStrokeMaterial( 0x000000, 1, 1.5 ) ] );
//mesh = new THREE.Mesh( sphere, new THREE.MeshColorStrokeMaterial( 0x00aa00, 1, 1.5 ) );
//mesh = new THREE.Mesh( sphere, new THREE.MeshFaceColorStrokeMaterial( 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);
//mesh.doubleSided = true;
mesh.overdraw = true;
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.MeshColorFillMaterial( 0xffffff ) );
mesh = new THREE.Mesh( sphere, [ new THREE.MeshColorFillMaterial( 0xffffff ), new THREE.MeshColorStrokeMaterial( 0x000000, 1, 1.5 ) ] );
//mesh = new THREE.Mesh( sphere, new THREE.MeshColorStrokeMaterial( 0x00aa00, 1, 1.5 ) );
//mesh = new THREE.Mesh( sphere, new THREE.MeshFaceColorStrokeMaterial( 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);
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.y = -70;
directionalLight.position.z = 100;
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;
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 120;
//scene.addLight( pointLight );
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xff0000 ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.addObject(mesh);
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xff0000 ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.addObject(mesh);
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
}
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) {
}
}
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;
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
function createModel2() {
// MESH
geometry = new Female02( "obj/female02" );
// 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.MeshBitmapMaterial( x1 );
xm1.loaded = 1; // this is procedurally generated texture
var xm2 = new THREE.MeshBitmapMaterial( x2 );
xm2.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.MeshColorFillMaterial(0xff0000, 0.5) );
var materials = [ new THREE.MeshFaceMaterial() ];
// full-mesh wireframe overlay
//materials.push( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
//materials.push( new THREE.MeshColorFillMaterial(0xff0000, 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 );
}
loadAsync( "obj/female02/female02.js", createModel2);
var loader = new THREE.Loader();
loader.loadAsciiOld( "obj/female02/female02.js", function() { createScene( new Female02( "obj/female02" ) ) } );
//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 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 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);
}
}
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.MeshBitmapMaterial( 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.addObject(mesh);
}
}
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.MeshBitmapMaterial( x1 );
xm1.loaded = 1; // this is procedurally generated texture
var xm2 = new THREE.MeshBitmapMaterial( x2 );
xm2.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.MeshColorFillMaterial(0xff0000, 0.5) );
var materials = [ new THREE.MeshFaceMaterial() ];
// full-mesh wireframe overlay
//materials.push( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
//materials.push( new THREE.MeshColorFillMaterial(0xff0000, 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.MeshBitmapMaterial( 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.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 );
@@ -356,42 +344,42 @@
}
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";
}
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>
examples/obj/female02/Female02_bin.bin
BIN
View File
Binary file not shown.
examples/obj/female02/Female02_bin.js
+100
View File
@@ -0,0 +1,100 @@
// Converted from: ../../examples/obj/female02/female02.obj
// vertices: 3274
// faces: 6233
// materials: 6
//
// Generated with OBJ -> Three.js converter
// http://github.com/alteredq/three.js/blob/master/utils/exporters/convert_obj_threejs_slim.py
var model = {
'materials': [ {
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "_03_-_Default1noCulli__03_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_03_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0xee0000,
"a_dbg_index" : 1,
"a_dbg_name" : "_02_-_Default1noCulli__02_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_02_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0x00ee00,
"a_dbg_index" : 2,
"a_dbg_name" : "FrontColorNoCullingID__02_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.80000000000000004, 0.80000000000000004, 0.80000000000000004],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_02_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0x0000ee,
"a_dbg_index" : 3,
"a_dbg_name" : "FrontColorNoCullingID__03_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.80000000000000004, 0.80000000000000004, 0.80000000000000004],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_03_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0xeeee00,
"a_dbg_index" : 4,
"a_dbg_name" : "_01_-_Default1noCulli__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_01_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0x00eeee,
"a_dbg_index" : 5,
"a_dbg_name" : "FrontColorNoCullingID__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.80000000000000004, 0.80000000000000004, 0.80000000000000004],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_01_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
}],
'buffers': 'Female02_bin.bin',
'end': (new Date).getTime()
}
postMessage( model );
examples/obj/female02/Female02_slim.js
+114
View File
File diff suppressed because one or more lines are too long
examples/obj/female02/female02.js
+6 -6
View File
@@ -12,7 +12,7 @@ var Female02 = function ( urlbase ) {
THREE.Geometry.call(this);
var materials = [ {
"a_dbg_color" : 0xffeeeeee,
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "_03_-_Default1noCulli__03_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -26,7 +26,7 @@ var Female02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xffee0000,
"a_dbg_color" : 0xee0000,
"a_dbg_index" : 1,
"a_dbg_name" : "_02_-_Default1noCulli__02_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -40,7 +40,7 @@ var Female02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xff00ee00,
"a_dbg_color" : 0x00ee00,
"a_dbg_index" : 2,
"a_dbg_name" : "FrontColorNoCullingID__02_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -54,7 +54,7 @@ var Female02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xff0000ee,
"a_dbg_color" : 0x0000ee,
"a_dbg_index" : 3,
"a_dbg_name" : "FrontColorNoCullingID__03_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -68,7 +68,7 @@ var Female02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xffeeee00,
"a_dbg_color" : 0xeeee00,
"a_dbg_index" : 4,
"a_dbg_name" : "_01_-_Default1noCulli__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -82,7 +82,7 @@ var Female02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xff00eeee,
"a_dbg_color" : 0x00eeee,
"a_dbg_index" : 5,
"a_dbg_name" : "FrontColorNoCullingID__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
examples/obj/lucy/.htaccess
+3
View File
@@ -0,0 +1,3 @@
<Files *.js>
SetOutputFilter DEFLATE
</Files>
examples/obj/lucy/Lucy100k.js
+150161
View File
File diff suppressed because it is too large Load Diff
examples/obj/lucy/Lucy100k_bin.bin
BIN
View File
Binary file not shown.
examples/obj/lucy/Lucy100k_bin.js
+22
View File
@@ -0,0 +1,22 @@
// Converted from: ../../examples/obj/lucy/lucy100k.obj
// vertices: 50002
// faces: 100000
// materials: 0
//
// Generated with OBJ -> Three.js converter
// http://github.com/alteredq/three.js/blob/master/utils/exporters/convert_obj_threejs_slim.py
var model = {
'materials': [ {
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "default"
}],
'buffers': 'Lucy100k_bin.bin',
'end': (new Date).getTime()
}
postMessage( model );
examples/obj/lucy/Lucy100k_slim.js
+36
View File
File diff suppressed because one or more lines are too long
examples/obj/male02/Male02_bin.bin
BIN
View File
Binary file not shown.
examples/obj/male02/Male02_bin.js
+86
View File
@@ -0,0 +1,86 @@
// Converted from: ../../examples/obj/male02/male02.obj
// vertices: 2746
// faces: 5004
// materials: 5
//
// Generated with OBJ -> Three.js converter
// http://github.com/alteredq/three.js/blob/master/utils/exporters/convert_obj_threejs_slim.py
var model = {
'materials': [ {
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "male-02-1noCullingID_male-02-1noCulling.JP",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "male-02-1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0xee0000,
"a_dbg_index" : 1,
"a_dbg_name" : "orig_02_-_Defaul1noCu_orig_02_-_Defaul1noCu",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "orig_02_-_Defaul1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0x00ee00,
"a_dbg_index" : 2,
"a_dbg_name" : "FrontColorNoCullingID_orig_02_-_Defaul1noCu",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.80000000000000004, 0.80000000000000004, 0.80000000000000004],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "orig_02_-_Defaul1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0x0000ee,
"a_dbg_index" : 3,
"a_dbg_name" : "_01_-_Default1noCulli__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "_01_-_Default1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
},
{
"a_dbg_color" : 0xeeee00,
"a_dbg_index" : 4,
"a_dbg_name" : "FrontColorNoCullingID_male-02-1noCulling.JP",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.80000000000000004, 0.80000000000000004, 0.80000000000000004],
"col_specular" : [0.16500000000000001, 0.16500000000000001, 0.16500000000000001],
"illumination" : 2,
"map_diffuse" : "male-02-1noCulling.JPG",
"optical_density" : 1.0,
"specular_coef" : 154.901961,
"transparency" : 1.0
}],
'buffers': 'Male02_bin.bin',
'end': (new Date).getTime()
}
postMessage( model );
examples/obj/male02/Male02_slim.js
+100
View File
File diff suppressed because one or more lines are too long
examples/obj/male02/male02.js
+5 -5
View File
@@ -12,7 +12,7 @@ var Male02 = function ( urlbase ) {
THREE.Geometry.call(this);
var materials = [ {
"a_dbg_color" : 0xffeeeeee,
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "male-02-1noCullingID_male-02-1noCulling.JP",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -26,7 +26,7 @@ var Male02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xffee0000,
"a_dbg_color" : 0xee0000,
"a_dbg_index" : 1,
"a_dbg_name" : "orig_02_-_Defaul1noCu_orig_02_-_Defaul1noCu",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -40,7 +40,7 @@ var Male02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xff00ee00,
"a_dbg_color" : 0x00ee00,
"a_dbg_index" : 2,
"a_dbg_name" : "FrontColorNoCullingID_orig_02_-_Defaul1noCu",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -54,7 +54,7 @@ var Male02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xff0000ee,
"a_dbg_color" : 0x0000ee,
"a_dbg_index" : 3,
"a_dbg_name" : "_01_-_Default1noCulli__01_-_Default1noCulli",
"col_ambient" : [0.0, 0.0, 0.0],
@@ -68,7 +68,7 @@ var Male02 = function ( urlbase ) {
},
{
"a_dbg_color" : 0xffeeee00,
"a_dbg_color" : 0xeeee00,
"a_dbg_index" : 4,
"a_dbg_name" : "FrontColorNoCullingID_male-02-1noCulling.JP",
"col_ambient" : [0.0, 0.0, 0.0],
examples/obj/torus/Torus.js
+1 -1
View File
@@ -12,7 +12,7 @@ var Torus = function ( urlbase ) {
THREE.Geometry.call(this);
var materials = [ {
"a_dbg_color" : 0xffeeeeee,
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "(null)"
}];
examples/obj/torus/Torus_bin.bin
BIN
View File
Binary file not shown.
examples/obj/torus/Torus_bin.js
+22
View File
@@ -0,0 +1,22 @@
// Converted from: ../../examples/obj/torus/Torus.obj
// vertices: 576
// faces: 576
// materials: 1
//
// Generated with OBJ -> Three.js converter
// http://github.com/alteredq/three.js/blob/master/utils/exporters/convert_obj_threejs_slim.py
var model = {
'materials': [ {
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "(null)"
}],
'buffers': 'Torus_bin.bin',
'end': (new Date).getTime()
}
postMessage( model );
examples/obj/torus/Torus_slim.js
+36
View File
File diff suppressed because one or more lines are too long
examples/obj/walt/WaltHead.js
+1 -1
View File
@@ -12,7 +12,7 @@ var WaltHead = function ( urlbase ) {
THREE.Geometry.call(this);
var materials = [ {
"a_dbg_color" : 0xffeeeeee,
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "lambert2SG.001",
"col_ambient" : [0.0, 0.0, 0.0],
examples/obj/walt/WaltHead_bin.bin
BIN
View File
Binary file not shown.
examples/obj/walt/WaltHead_bin.js
+29
View File
@@ -0,0 +1,29 @@
// Converted from: ../../examples/obj/walt/WaltHead.obj
// vertices: 8146
// faces: 16160
// materials: 1
//
// Generated with OBJ -> Three.js converter
// http://github.com/alteredq/three.js/blob/master/utils/exporters/convert_obj_threejs_slim.py
var model = {
'materials': [ {
"a_dbg_color" : 0xeeeeee,
"a_dbg_index" : 0,
"a_dbg_name" : "lambert2SG.001",
"col_ambient" : [0.0, 0.0, 0.0],
"col_diffuse" : [0.64000000000000001, 0.64000000000000001, 0.64000000000000001],
"col_specular" : [0.25, 0.25, 0.25],
"illumination" : 2,
"optical_density" : 1.0,
"specular_coef" : 92.156863,
"transparency" : 1.0
}],
'buffers': 'WaltHead_bin.bin',
'end': (new Date).getTime()
}
postMessage( model );
examples/obj/walt/WaltHead_slim.js
+43
View File
File diff suppressed because one or more lines are too long
examples/obj_convert_test.html
+224 -250
View File
@@ -6,47 +6,46 @@
<style type="text/css">
body {
background:#fff;
padding:0;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
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 }
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 }
#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>
<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/>
<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>
<!--
-->
<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/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
@@ -61,6 +60,7 @@
<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/io/Loader.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>
@@ -86,7 +86,8 @@
<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>
@@ -108,29 +109,29 @@
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");
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";
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
@@ -140,64 +141,62 @@
document.body.appendChild(container);
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
camera.updateMatrix();
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.MeshBitmapMaterial( 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.addObject(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.addObject(mesh);
}
// 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.MeshBitmapMaterial( 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.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.MeshColorFillMaterial( 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
@@ -205,8 +204,8 @@
scene.addLight( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.y = -70;
directionalLight.position.z = 100;
directionalLight.position.y = -70;
directionalLight.position.z = 100;
directionalLight.position.normalize();
scene.addLight( directionalLight );
@@ -214,124 +213,99 @@
//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_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer();
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 );
}
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;
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, new THREE.MeshFaceMaterial(), 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.addObject(zmesh);
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
var loader = new THREE.Loader();
//loader.loadAsciiOld( "obj/male02/male02.js", function() { createScene( new Male02( "obj/male02" ), 90, 50, FLOOR, 105 ) } );
//loader.loadAsciiOld( "obj/female02/female02.js", function() { createScene( new Female02( "obj/female02" ), -80, 50, FLOOR, 0 ) } );
//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" );
// 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, new THREE.MeshFaceMaterial(), 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 );
}
loadAsync( "obj/male02/male02.js", createModel1);
loadAsync( "obj/female02/female02.js", createModel2);
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 loadAsync( url, callback ) {
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 );
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.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.MeshBitmapMaterial( 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.addObject(mesh);
}
}
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.MeshBitmapMaterial( 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.addObject(mesh);
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -345,11 +319,11 @@
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
if ( zmesh && 0 ) {
zmesh.rotation.y += 0.005;
zmesh.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 );
@@ -357,42 +331,42 @@
}
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";
}
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>
examples/shader_test.html
+200 -198
View File
@@ -6,45 +6,46 @@
<style type="text/css">
body {
background:#000;
color:#fff;
padding:0;
color:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
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:100 }
#d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
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:100 }
#d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Shader test</h1>
<body>
<div id="d">
<h1>Shader test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<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.
<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre id="log"></pre>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<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.
<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<!--
-->
<!--
<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>
@@ -59,6 +60,7 @@
<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/io/Loader.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>
@@ -84,8 +86,7 @@
<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>
@@ -105,171 +106,172 @@
var canvasRenderer, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var directionalLight, pointLight;
var directionalLight, pointLight;
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");
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";
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1000;
camera.updateMatrix();
camera.position.z = 1000;
camera.updateMatrix();
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
// light representation
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
// light representation
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
// material samples
sphere = new Sphere( 100, 32, 32, 1 );
// material samples
sphere = new Sphere( 100, 32, 32, 1 );
var y1 = 0, y2 = -200;
addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
var y1 = 0, y2 = -200;
addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer( scene );
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 );
}
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer( scene );
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;
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
function createModel() {
geometry = new Torus( );
var s = 80, t = s + 20, y = 200;
addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x000000, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x888888, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xff5500, 10, 1.0 ) );
addMesh( geometry, s, 0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xffaa00, 10, 1.0 ) );
addMesh( geometry, s, 2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x55ff00, 10, 1.0 ) );
addMesh( geometry, s, 4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x0055ff, 10, 1.0 ) );
addMesh( geometry, s, 6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x5500ff, 10, 1.0 ) );
}
loadAsync( "obj/torus/Torus.js", createModel);
var loader = new THREE.Loader();
loader.loadAsciiOld( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );
//loader.loadAscii( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
//loader.loadBinary( "obj/torus/Torus_bin.js", function( geometry ) { createScene( geometry ) }, "obj/torus" );
}
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 createScene( geometry ) {
var s = 80, t = s + 20, y = 200;
addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x000000, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x888888, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xff5500, 10, 1.0 ) );
addMesh( geometry, s, 0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xffaa00, 10, 1.0 ) );
addMesh( geometry, s, 2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x55ff00, 10, 1.0 ) );
addMesh( geometry, s, 4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x0055ff, 10, 1.0 ) );
addMesh( geometry, s, 6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x5500ff, 10, 1.0 ) );
}
}
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 onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -277,28 +279,28 @@
}
var r = 0;
var r = 0;
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
/*
for(var i=0; i<scene.objects.length; ++i) {
scene.objects[i].rotation.x += 0.0025;
scene.objects[i].updateMatrix();
}
*/
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
/*
for(var i=0; i<scene.objects.length; ++i) {
scene.objects[i].rotation.x += 0.0025;
scene.objects[i].updateMatrix();
}
*/
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
r += 0.01;
r += 0.01;
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
@@ -306,42 +308,42 @@
}
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";
}
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>
src/cameras/Camera.js
+1 -3
View File
@@ -4,14 +4,12 @@
THREE.Camera = function ( fov, aspect, near, far ) {
this.fov = fov;
this.aspect = aspect;
this.position = new THREE.Vector3( 0, 0, 0 );
this.target = { position: new THREE.Vector3( 0, 0, 0 ) };
this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
this.up = new THREE.Vector3( 0, 1, 0 );
this.matrix = new THREE.Matrix4();
this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
this.autoUpdateMatrix = true;
src/core/Color.js
+1 -7
View File
@@ -4,12 +4,6 @@
THREE.Color = function ( hex ) {
/*
this.r; this.g; this.b; this.a;
this.hex;
this.__styleString;
*/
this.autoUpdate = true;
this.setHex( hex );
@@ -73,7 +67,7 @@ THREE.Color.prototype = {
updateHex: function () {
this.hex = Math.floor( this.a * 255 ) << 24 | Math.floor( this.r * 255 ) << 16 | Math.floor( this.g * 255 ) << 8 | Math.floor( this.b * 255 );
this.hex = Math.floor( this.a * 255 ) << 24 ^ Math.floor( this.r * 255 ) << 16 ^ Math.floor( this.g * 255 ) << 8 ^ Math.floor( this.b * 255 );
},
src/core/Ray.js
+127
View File
@@ -0,0 +1,127 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.Ray = function ( origin, direction ) {
this.origin = origin || new THREE.Vector3();
this.direction = direction || new THREE.Vector3();
}
THREE.Ray.prototype = {
intersectScene: function ( scene ) {
var i, l, object,
objects = scene.objects,
intersects = [];
for ( i = 0, l = objects.length; i < l; i++ ) {
object = objects[i];
if ( object instanceof THREE.Mesh ) {
intersects = intersects.concat( this.intersectObject( object ) );
}
}
intersects.sort( function ( a, b ) { return a.distance - b.distance; } );
return intersects;
},
intersectObject: function ( object ) {
var f, fl, face, a, b, c, d, normal,
dot, scalar,
origin, direction,
geometry = object.geometry,
vertices = geometry.vertices,
intersect, intersects = [],
intersectPoint;
for ( f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
face = geometry.faces[ f ];
origin = this.origin.clone();
direction = this.direction.clone();
a = object.matrix.transform( vertices[ face.a ].position.clone() );
b = object.matrix.transform( vertices[ face.b ].position.clone() );
c = object.matrix.transform( vertices[ face.c ].position.clone() );
d = face instanceof THREE.Face4 ? object.matrix.transform( vertices[ face.d ].position.clone() ) : null;
normal = object.matrixRotation.transform( face.normal.clone() );
dot = direction.dot( normal );
if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
scalar = normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
intersectPoint = origin.addSelf( direction.multiplyScalar( scalar ) );
if ( face instanceof THREE.Face3 ) {
if ( pointInFace3( intersectPoint, a, b, c ) ) {
intersect = {
distance: this.origin.distanceTo( intersectPoint ),
point: intersectPoint,
face: face,
object: object
};
intersects.push( intersect );
}
} else if ( face instanceof THREE.Face4 ) {
if ( pointInFace3( intersectPoint, a, b, d ) || pointInFace3( intersectPoint, b, c, d ) ) {
intersect = {
distance: this.origin.distanceTo( intersectPoint ),
point: intersectPoint,
face: face,
object: object
};
intersects.push( intersect );
}
}
}
}
return intersects;
// http://www.blackpawn.com/texts/pointinpoly/default.html
function pointInFace3( p, a, b, c ) {
var v0 = c.clone().subSelf( a ), v1 = b.clone().subSelf( a ), v2 = p.clone().subSelf( a ),
dot00 = v0.dot( v0 ), dot01 = v0.dot( v1 ), dot02 = v0.dot( v2 ), dot11 = v1.dot( v1 ), dot12 = v1.dot( v2 ),
invDenom = 1 / ( dot00 * dot11 - dot01 * dot01 ),
u = ( dot11 * dot02 - dot01 * dot12 ) * invDenom,
v = ( dot00 * dot12 - dot01 * dot02 ) * invDenom;
return ( u > 0 ) && ( v > 0 ) && ( u + v < 1 );
}
}
};
src/hci/ClickResolver.js
-208
View File
@@ -1,208 +0,0 @@
THREE.ClickResolver = function( camera, scene ) {
this.camera = camera;
this.scene = scene;
this._debug = true;
};
THREE.ClickResolver.prototype = {
findIntersectInScene : function ( xPercent, yPercent ) {
var objects = this.scene.objects;
var intersects = [];
var mouseRayStart = this.translateScreenCoordsToZIndex( xPercent, yPercent, 300 );
var mouseRayEnd = this.translateScreenCoordsToZIndex( xPercent, yPercent, 800 );
var mouseRayDir = new THREE.Vector3().sub( mouseRayEnd, mouseRayStart );
var closestIntersect = null;
for ( var i = 0, l = objects.length; i < l; i++ ) {
var object = objects[i];
if ( object instanceof THREE.Mesh ) {
var intersect = this.getIntersectingFaces( this.scene, camera, object, mouseRayStart, mouseRayDir );
if ( intersect.face != null && (closestIntersect == null || closestIntersect.distance > intersect.distance) ) {
closestIntersect = intersect;
}
}
}
if ( closestIntersect != null && closestIntersect.face.onSelect ) {
closestIntersect.face.onSelect( scene, camera, object, closestIntersect.face, closestIntersect.point );
}
},
translateScreenCoordsToZIndex: function ( xPercent, yPercent, targetZIndex ) {
var maxVisibleXatZIndex, maxVisibleYatZIndex;
var rayToZIndex = new THREE.Vector3();
var left = new THREE.Vector3();
var up = new THREE.Vector3();
var coordAtZIndex = new THREE.Vector3();
rayToZIndex.sub( this.camera.target.position, this.camera.position ).setLength( targetZIndex );
maxVisibleYatZIndex = rayToZIndex.length() * Math.tan( this.camera.fov * Math.PI / 360 );
maxVisibleXatZIndex = maxVisibleYatZIndex * this.camera.aspect;
left.cross( this.camera.up, rayToZIndex );
up .cross( rayToZIndex, left );
return coordAtZIndex.add( this.camera.position, rayToZIndex ).
addSelf( left.setLength( maxVisibleXatZIndex * ( 1 - 2 * xPercent ))).
addSelf( up .setLength( maxVisibleYatZIndex * ( 1 - 2 * yPercent )));
},
logPoint: function( scene, v, hex ) {
if ( this._debug ) {
var p = new THREE.Particle( new THREE.ParticleCircleMaterial( hex, 0.5 ) );
p.position = v.clone();
p.scale.x = p.scale.y = p.scale.z = 5;
scene.addObject( p );
}
},
logLine: function( scene, s, e, hex ) {
if ( this._debug ) {
this.logPoint( scene, s.clone(), 0x000000 );
var lg = new THREE.Geometry();
lg.vertices[0] = new THREE.Vertex( s.clone() );
lg.vertices[1] = new THREE.Vertex( e.clone() );
scene.addObject( new THREE.Line( lg, new THREE.LineColorMaterial( hex, 0.5 ) ) );
}
},
getIntersectingFaces: function( scene, camera, object3d, linePoint, lineDir ) {
var intersect = {
face : null,
point : null,
distance : Number.MAX_VALUE
};
var geometry = object3d.geometry;
var matrix = object3d.matrix;
for ( f = 0; f < geometry.faces.length; f++ ) {
var face = geometry.faces[ f ];
// if ( !face.selectable ) continue;
var a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
var b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
var c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
var d = face.d ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
var lineStart = linePoint.clone();
var lineDirection = lineDir.clone();
var dot = face.normal.dot( lineDirection );
if ( this._debug ) {
/*
this.logLine( scene, a, new THREE.Vector3().add( a, new THREE.Vector3().addSelf( face.normal ).multiplyScalar( 100 ) ), 0x0000FF );
this.logLine( scene, lineStart, lineStart.clone().addSelf( lineDirection ), 0x55FF88 );
this.logPoint( scene, a, 0xFF0000 ); // r
this.logPoint( scene, b, 0x00FF00 ); // g
this.logPoint( scene, c, 0x0000FF ); // b
if ( d ) this.logPoint( scene, d, 0xFFFF00 ); // y
*/
}
if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
var s = face.normal.dot( new THREE.Vector3().sub( a, lineStart ) ) / dot;
var planeIntersect = lineStart.addSelf( lineDirection.multiplyScalar( s ) );
// if ( this._debug ) this.logPoint( scene, planeIntersect, 0x808080 );
if ( d == null ) {
var ab = isInsideBoundary( planeIntersect, a, b, c );
var bc = isInsideBoundary( planeIntersect, b, c, a );
var ca = isInsideBoundary( planeIntersect, c, a, b );
if ( ab && bc && ca ) {
if ( this._debug ) this.logPoint( scene, planeIntersect, 0x0000ff );
logIntersect( planeIntersect, face );
}
} else {
var ab = isInsideBoundary( planeIntersect, a, b, c );
var bc = isInsideBoundary( planeIntersect, b, c, d );
var cd = isInsideBoundary( planeIntersect, c, d, a );
var da = isInsideBoundary( planeIntersect, d, a, b );
if ( ab && bc && cd && da ) {
if ( this._debug ) this.logPoint( scene, planeIntersect, 0x000000 );
logIntersect( planeIntersect, face );
}
}
}
}
function logIntersect( planeIntersect, face ) {
var distance = camera.position.distanceTo( planeIntersect );
if ( distance < intersect.distance ) {
intersect.distance = distance;
intersect.face = face;
intersect.point = planeIntersect;
}
}
function isInsideBoundary( pointOnPlaneToCheck, pointInside, boundaryPointA, boundaryPointB ) {
var toB = boundaryPointB.clone().subSelf( boundaryPointA );
var toI = pointInside.clone().subSelf( boundaryPointA );
var pointMid = toB.setLength( toI.dot( toB ) ).addSelf( boundaryPointA );
var pointMirror = pointMid.subSelf( pointInside ).multiplyScalar( 2 ).addSelf( pointInside );
return pointOnPlaneToCheck.distanceToSquared( pointInside ) < pointOnPlaneToCheck.distanceToSquared( pointMirror );
};
return intersect;
}
};
src/hci/SelectableFace3.js
-10
View File
@@ -1,10 +0,0 @@
THREE.SelectableFace3 = function ( a, b, c, normal, color, onSelect) {
THREE.Face3.call( this, a, b, c, normal, color );
this.selectable = true;
this.onSelect = onSelect;
};
THREE.SelectableFace3.prototype = new THREE.Face3();
THREE.SelectableFace3.prototype.constructor = THREE.SelectableFace3;
src/hci/SelectableFace4.js
-11
View File
@@ -1,11 +0,0 @@
var SelectableFace4 = function ( a, b, c, d, onSelect, normal, color) {
THREE.Face4.call( this, a, b, c, d, normal, color );
this.selectable = true;
this.onSelect = onSelect;
};
SelectableFace4.prototype = new THREE.Face4();
SelectableFace4.prototype.constructor = SelectableFace4;
THREE.SelectableFace4 = SelectableFace4;
src/io/Loader.js
+960
View File
@@ -0,0 +1,960 @@
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.Loader = function() {
};
THREE.Loader.prototype = {
// Load models generated by Blender exporter and original OBJ converter (converter_obj_three.py)
loadAsciiOld: function( url, callback ) {
var element = document.createElement( 'script' );
element.type = 'text/javascript';
element.onload = callback;
element.src = url;
document.getElementsByTagName( "head" )[ 0 ].appendChild( element );
},
// Load models generated by slim OBJ converter with ASCII option (converter_obj_three_slim.py -t ascii)
// - urlbase parameter is optional (it only applies to models with textures)
loadAscii: function ( url, callback, urlbase ) {
var s = (new Date).getTime(),
worker = new Worker( url );
worker.onmessage = function( event ) {
THREE.Loader.prototype.createModel( event.data, callback, urlbase );
};
worker.postMessage( s );
},
// Load models generated by slim OBJ converter with BINARY option (converter_obj_three_slim.py -t binary)
// - urlbase parameter is mandatory (it applies to all models, it tells where to find the file with binary buffers)
// - binary models consist of two files: JS and BIN
loadBinary: function( url, callback, urlbase ) {
// #1 load JS part via web worker
// This isn't really necessary, JS part is tiny,
// could be done by more ordinary means.
var s = (new Date).getTime(),
worker = new Worker( url );
worker.onmessage = function( event ) {
var materials = event.data.materials,
buffers = event.data.buffers;
// #2 load BIN part via Ajax
// For some reason it is faster doing loading from here than from within the worker.
// Maybe passing of ginormous string as message between threads is costly?
// Also, worker loading huge data by Ajax still freezes browser. Go figure,
// worker with baked ascii JSON data keeps browser more responsive.
THREE.Loader.prototype.loadAjaxBuffers( buffers, materials, callback, urlbase );
};
worker.onerror = function (event) {
alert( "worker.onerror: " + event.message + "\n" + event.data );
event.preventDefault();
};
worker.postMessage( s );
},
// Binary AJAX parser based on Magi binary loader
// https://github.com/kig/magi
// Should look more into HTML5 File API
// See also other suggestions by Gregg Tavares
// https://groups.google.com/group/o3d-discuss/browse_thread/thread/a8967bc9ce1e0978
loadAjaxBuffers: function( buffers, materials, callback, urlbase ) {
var xhr = new XMLHttpRequest(),
url = urlbase + "/" + buffers;
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 || xhr.status == 0 ) {
THREE.Loader.prototype.createBinModel( xhr.responseText, callback, urlbase, materials );
} else {
alert( "Couldn't load [" + url + "] [" + xhr.status + "]" );
}
}
}
xhr.open("GET", url, true);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.setRequestHeader("Content-Type", "text/plain");
xhr.send(null);
},
createBinModel: function ( data, callback, urlbase, materials ) {
var Model = function ( urlbase ) {
//var s = (new Date).getTime();
var scope = this,
currentOffset = 0,
md,
normals = [],
uvs = [];
THREE.Geometry.call(this);
THREE.Loader.prototype.init_materials( scope, materials, urlbase );
md = parseMetaData( data, currentOffset );
currentOffset += md.header_bytes;
currentOffset += init_vertices( currentOffset );
currentOffset += init_normals( currentOffset );
currentOffset += init_uvs( currentOffset );
currentOffset += init_triangles_flat( currentOffset );
currentOffset += init_triangles_smooth( currentOffset );
currentOffset += init_triangles_flat_uv( currentOffset );
currentOffset += init_triangles_smooth_uv( currentOffset );
currentOffset += init_quads_flat( currentOffset );
currentOffset += init_quads_smooth( currentOffset );
currentOffset += init_quads_flat_uv( currentOffset );
currentOffset += init_quads_smooth_uv( currentOffset );
this.computeCentroids();
this.computeNormals();
//var e = (new Date).getTime();
//log( "binary data parse time: " + (e-s) + " ms" );
function parseMetaData( data, offset ) {
var metaData = {
'signature' :parseString( data, offset, 8 ),
'header_bytes' :parseUChar8( data, offset + 8 ),
'vertex_coordinate_bytes' :parseUChar8( data, offset + 9 ),
'normal_coordinate_bytes' :parseUChar8( data, offset + 10 ),
'uv_coordinate_bytes' :parseUChar8( data, offset + 11 ),
'vertex_index_bytes' :parseUChar8( data, offset + 12 ),
'normal_index_bytes' :parseUChar8( data, offset + 13 ),
'uv_index_bytes' :parseUChar8( data, offset + 14 ),
'material_index_bytes' :parseUChar8( data, offset + 15 ),
'nvertices' :parseUInt32( data, offset + 16 ),
'nnormals' :parseUInt32( data, offset + 16 + 4*1 ),
'nuvs' :parseUInt32( data, offset + 16 + 4*2 ),
'ntri_flat' :parseUInt32( data, offset + 16 + 4*3 ),
'ntri_smooth' :parseUInt32( data, offset + 16 + 4*4 ),
'ntri_flat_uv' :parseUInt32( data, offset + 16 + 4*5 ),
'ntri_smooth_uv' :parseUInt32( data, offset + 16 + 4*6 ),
'nquad_flat' :parseUInt32( data, offset + 16 + 4*7 ),
'nquad_smooth' :parseUInt32( data, offset + 16 + 4*8 ),
'nquad_flat_uv' :parseUInt32( data, offset + 16 + 4*9 ),
'nquad_smooth_uv' :parseUInt32( data, offset + 16 + 4*10 )
};
/*
log( "signature: " + metaData.signature );
log( "header_bytes: " + metaData.header_bytes );
log( "vertex_coordinate_bytes: " + metaData.vertex_coordinate_bytes );
log( "normal_coordinate_bytes: " + metaData.normal_coordinate_bytes );
log( "uv_coordinate_bytes: " + metaData.uv_coordinate_bytes );
log( "vertex_index_bytes: " + metaData.vertex_index_bytes );
log( "normal_index_bytes: " + metaData.normal_index_bytes );
log( "uv_index_bytes: " + metaData.uv_index_bytes );
log( "material_index_bytes: " + metaData.material_index_bytes );
log( "nvertices: " + metaData.nvertices );
log( "nnormals: " + metaData.nnormals );
log( "nuvs: " + metaData.nuvs );
log( "ntri_flat: " + metaData.ntri_flat );
log( "ntri_smooth: " + metaData.ntri_smooth );
log( "ntri_flat_uv: " + metaData.ntri_flat_uv );
log( "ntri_smooth_uv: " + metaData.ntri_smooth_uv );
log( "nquad_flat: " + metaData.nquad_flat );
log( "nquad_smooth: " + metaData.nquad_smooth );
log( "nquad_flat_uv: " + metaData.nquad_flat_uv );
log( "nquad_smooth_uv: " + metaData.nquad_smooth_uv );
var total = metaData.header_bytes
+ metaData.nvertices * metaData.vertex_coordinate_bytes * 3
+ metaData.nnormals * metaData.normal_coordinate_bytes * 3
+ metaData.nuvs * metaData.uv_coordinate_bytes * 2
+ metaData.ntri_flat * ( metaData.vertex_index_bytes*3 + metaData.material_index_bytes )
+ metaData.ntri_smooth * ( metaData.vertex_index_bytes*3 + metaData.material_index_bytes + metaData.normal_index_bytes*3 )
+ metaData.ntri_flat_uv * ( metaData.vertex_index_bytes*3 + metaData.material_index_bytes + metaData.uv_index_bytes*3 )
+ metaData.ntri_smooth_uv * ( metaData.vertex_index_bytes*3 + metaData.material_index_bytes + metaData.normal_index_bytes*3 + metaData.uv_index_bytes*3 )
+ metaData.nquad_flat * ( metaData.vertex_index_bytes*4 + metaData.material_index_bytes )
+ metaData.nquad_smooth * ( metaData.vertex_index_bytes*4 + metaData.material_index_bytes + metaData.normal_index_bytes*4 )
+ metaData.nquad_flat_uv * ( metaData.vertex_index_bytes*4 + metaData.material_index_bytes + metaData.uv_index_bytes*4 )
+ metaData.nquad_smooth_uv * ( metaData.vertex_index_bytes*4 + metaData.material_index_bytes + metaData.normal_index_bytes*4 + metaData.uv_index_bytes*4 );
log( "total bytes: " + total );
*/
return metaData;
}
function parseString( data, offset, length ) {
return data.substr( offset, length );
}
function parseFloat32( data, offset ) {
var b3 = parseUChar8( data, offset ),
b2 = parseUChar8( data, offset + 1 ),
b1 = parseUChar8( data, offset + 2 ),
b0 = parseUChar8( data, offset + 3 ),
sign = 1 - ( 2 * ( b0 >> 7 ) ),
exponent = ((( b0 << 1 ) & 0xff) | ( b1 >> 7 )) - 127,
mantissa = (( b1 & 0x7f ) << 16) | (b2 << 8) | b3;
if (mantissa == 0 && exponent == -127)
return 0.0;
return sign * ( 1 + mantissa * Math.pow( 2, -23 ) ) * Math.pow( 2, exponent );
}
function parseUInt32( data, offset ) {
var b0 = parseUChar8( data, offset ),
b1 = parseUChar8( data, offset + 1 ),
b2 = parseUChar8( data, offset + 2 ),
b3 = parseUChar8( data, offset + 3 );
return (b3 << 24) + (b2 << 16) + (b1 << 8) + b0;
}
function parseUInt16( data, offset ) {
var b0 = parseUChar8( data, offset ),
b1 = parseUChar8( data, offset + 1 );
return (b1 << 8) + b0;
}
function parseSChar8( data, offset ) {
var b = parseUChar8( data, offset );
return b > 127 ? b - 256 : b;
}
function parseUChar8( data, offset ) {
return data.charCodeAt( offset ) & 0xff;
}
function init_vertices( start ) {
var i, x, y, z,
stride = md.vertex_coordinate_bytes * 3;
for( i = 0; i < md.nvertices; ++i ) {
x = parseFloat32( data, start + i*stride );
y = parseFloat32( data, start + i*stride + md.vertex_coordinate_bytes );
z = parseFloat32( data, start + i*stride + md.vertex_coordinate_bytes*2 );
THREE.Loader.prototype.v( scope, x, y, z );
}
return md.nvertices * stride;
}
function init_normals( start ) {
var i, x, y, z,
stride = md.normal_coordinate_bytes * 3;
for( i = 0; i < md.nnormals; ++i ) {
x = parseSChar8( data, start + i*stride );
y = parseSChar8( data, start + i*stride + md.normal_coordinate_bytes );
z = parseSChar8( data, start + i*stride + md.normal_coordinate_bytes*2 );
normals.push( x/127, y/127, z/127 );
}
return md.nnormals * stride;
}
function init_uvs( start ) {
var i, u, v,
stride = md.uv_coordinate_bytes * 2;
for( i = 0; i < md.nuvs; ++i ) {
u = parseFloat32( data, start + i*stride );
v = parseFloat32( data, start + i*stride + md.uv_coordinate_bytes );
uvs.push( u, v );
}
return md.nuvs * stride;
}
function add_tri( start, i, stride ) {
var a, b, c, m;
a = parseUInt32( data, start + i*stride );
b = parseUInt32( data, start + i*stride + md.vertex_index_bytes );
c = parseUInt32( data, start + i*stride + md.vertex_index_bytes*2 );
m = parseUInt16( data, start + i*stride + md.vertex_index_bytes*3 );
THREE.Loader.prototype.f3( scope, a, b, c, m );
}
function add_tri_n( start, i, stride ) {
var a, b, c, m, na, nb, nc;
a = parseUInt32( data, start + i*stride );
b = parseUInt32( data, start + i*stride + md.vertex_index_bytes );
c = parseUInt32( data, start + i*stride + md.vertex_index_bytes*2 );
m = parseUInt16( data, start + i*stride + md.vertex_index_bytes*3 );
na = parseUInt32( data, start + i*stride + md.vertex_index_bytes*3 + md.material_index_bytes );
nb = parseUInt32( data, start + i*stride + md.vertex_index_bytes*3 + md.material_index_bytes + md.normal_index_bytes );
nc = parseUInt32( data, start + i*stride + md.vertex_index_bytes*3 + md.material_index_bytes + md.normal_index_bytes*2 );
THREE.Loader.prototype.f3n( scope, normals, a, b, c, m, na, nb, nc );
}
function add_quad( start, i, stride ) {
var a, b, c, d, m;
a = parseUInt32( data, start + i*stride );
b = parseUInt32( data, start + i*stride + md.vertex_index_bytes );
c = parseUInt32( data, start + i*stride + md.vertex_index_bytes*2 );
d = parseUInt32( data, start + i*stride + md.vertex_index_bytes*3 );
m = parseUInt16( data, start + i*stride + md.vertex_index_bytes*4 );
THREE.Loader.prototype.f4( scope, a, b, c, d, m );
}
function add_quad_n( start, i, stride ) {
var a, b, c, d, m, na, nb, nc, nd;
a = parseUInt32( data, start + i*stride );
b = parseUInt32( data, start + i*stride + md.vertex_index_bytes );
c = parseUInt32( data, start + i*stride + md.vertex_index_bytes*2 );
d = parseUInt32( data, start + i*stride + md.vertex_index_bytes*3 );
m = parseUInt16( data, start + i*stride + md.vertex_index_bytes*4 );
na = parseUInt32( data, start + i*stride + md.vertex_index_bytes*4 + md.material_index_bytes );
nb = parseUInt32( data, start + i*stride + md.vertex_index_bytes*4 + md.material_index_bytes + md.normal_index_bytes );
nc = parseUInt32( data, start + i*stride + md.vertex_index_bytes*4 + md.material_index_bytes + md.normal_index_bytes*2 );
nd = parseUInt32( data, start + i*stride + md.vertex_index_bytes*4 + md.material_index_bytes + md.normal_index_bytes*3 );
THREE.Loader.prototype.f4n( scope, normals, a, b, c, d, m, na, nb, nc, nd );
}
function add_uv3( start, i, stride, offset ) {
var uva, uvb, uvc, u1, u2, u3, v1, v2, v3;
uva = parseUInt32( data, start + i*stride + offset );
uvb = parseUInt32( data, start + i*stride + offset + md.uv_index_bytes );
uvc = parseUInt32( data, start + i*stride + offset + md.uv_index_bytes * 2 );
u1 = uvs[ uva*2 ];
v1 = uvs[ uva*2 + 1];
u2 = uvs[ uvb*2 ];
v2 = uvs[ uvb*2 + 1];
u3 = uvs[ uvc*2 ];
v3 = uvs[ uvc*2 + 1];
THREE.Loader.prototype.uv( scope, u1, v1, u2, v2, u3, v3 );
}
function add_uv4( start, i, stride, offset ) {
var uva, uvb, uvc, uvd, u1, u2, u3, u4, v1, v2, v3, v4;
uva = parseUInt32( data, start + i*stride + offset );
uvb = parseUInt32( data, start + i*stride + offset + md.uv_index_bytes );
uvc = parseUInt32( data, start + i*stride + offset + md.uv_index_bytes * 2 );
uvd = parseUInt32( data, start + i*stride + offset + md.uv_index_bytes * 3 );
u1 = uvs[ uva*2 ];
v1 = uvs[ uva*2 + 1];
u2 = uvs[ uvb*2 ];
v2 = uvs[ uvb*2 + 1];
u3 = uvs[ uvc*2 ];
v3 = uvs[ uvc*2 + 1];
u4 = uvs[ uvd*2 ];
v4 = uvs[ uvd*2 + 1];
THREE.Loader.prototype.uv( scope, u1, v1, u2, v2, u3, v3, u4, v4 );
}
function init_triangles_flat( start ) {
var i, stride = md.vertex_index_bytes * 3 + md.material_index_bytes;
for( i = 0; i < md.ntri_flat; ++i ) {
add_tri( start, i, stride );
}
return md.ntri_flat * stride;
}
function init_triangles_flat_uv( start ) {
var i, offset = md.vertex_index_bytes * 3 + md.material_index_bytes,
stride = offset + md.uv_index_bytes * 3;
for( i = 0; i < md.ntri_flat_uv; ++i ) {
add_tri( start, i, stride );
add_uv3( start, i, stride, md.vertex_index_bytes*3 + md.material_index_bytes );
}
return md.ntri_flat_uv * stride;
}
function init_triangles_smooth( start ) {
var i, stride = md.vertex_index_bytes * 3 + md.material_index_bytes + md.normal_index_bytes * 3;
for( i = 0; i < md.ntri_smooth; ++i ) {
add_tri_n( start, i, stride );
}
return md.ntri_smooth * stride;
}
function init_triangles_smooth_uv( start ) {
var i, offset = md.vertex_index_bytes * 3 + md.material_index_bytes + md.normal_index_bytes * 3,
stride = offset + md.uv_index_bytes * 3;
for( i = 0; i < md.ntri_smooth_uv; ++i ) {
add_tri_n( start, i, stride );
add_uv3( start, i, stride, offset );
}
return md.ntri_smooth * stride;
}
function init_quads_flat( start ) {
var i, stride = md.vertex_index_bytes * 4 + md.material_index_bytes;
for( i = 0; i < md.nquad_flat; ++i ) {
add_quad( start, i, stride );
}
return md.nquad_flat * stride;
}
function init_quads_flat_uv( start ) {
var i, offset = md.vertex_index_bytes * 4 + md.material_index_bytes,
stride = offset + md.uv_index_bytes * 4;
for( i = 0; i < md.nquad_flat_uv; ++i ) {
add_quad( start, i, stride );
add_uv4( start, i, offset );
}
return md.nquad_flat * stride;
}
function init_quads_smooth( start ) {
var i, stride = md.vertex_index_bytes * 4 + md.material_index_bytes + md.normal_index_bytes * 4;
for( i = 0; i < md.nquad_smooth; ++i ) {
add_quad_n( start, i, stride );
}
return md.nquad_smooth * stride;
}
function init_quads_smooth_uv( start ) {
var i, offset = md.vertex_index_bytes * 4 + md.material_index_bytes + md.normal_index_bytes * 4,
stride = offset + md.uv_index_bytes * 4;
for( i = 0; i < md.nquad_smooth_uv; ++i ) {
add_quad_n( start, i, stride );
add_uv4( start, i, stride, offset );
}
return md.nquad_smooth * stride;
}
}
Model.prototype = new THREE.Geometry();
Model.prototype.constructor = Model;
callback( new Model( urlbase ) );
},
createModel: function ( data, callback, urlbase ) {
var Model = function ( urlbase ) {
var scope = this;
THREE.Geometry.call(this);
THREE.Loader.prototype.init_materials( scope, data.materials, urlbase );
init_vertices();
init_faces();
this.computeCentroids();
this.computeNormals();
function init_vertices() {
var i, l, x, y, z;
for( i = 0, l = data.vertices.length/3; i < l; i++ ) {
x = data.vertices[ i*3 ];
y = data.vertices[ i*3 + 1 ];
z = data.vertices[ i*3 + 2 ];
THREE.Loader.prototype.v( scope, x, y, z );
}
}
function init_faces() {
function add_tri( src, i, stride ) {
var a, b, c, m;
a = src[ i*stride ];
b = src[ i*stride + 1 ];
c = src[ i*stride + 2 ];
m = src[ i*stride + 3 ];
THREE.Loader.prototype.f3( scope, a, b, c, m );
}
function add_tri_n( src, i, stride ) {
var a, b, c, m, na, nb, nc;
a = src[ i*stride ];
b = src[ i*stride + 1 ];
c = src[ i*stride + 2 ];
m = src[ i*stride + 3 ];
na = src[ i*stride + 4 ];
nb = src[ i*stride + 5 ];
nc = src[ i*stride + 6 ];
THREE.Loader.prototype.f3n( scope, data.normals, a, b, c, m, na, nb, nc );
}
function add_quad( src, i, stride ) {
var a, b, c, d, m;
a = src[ i*stride ];
b = src[ i*stride + 1 ];
c = src[ i*stride + 2 ];
d = src[ i*stride + 3 ];
m = src[ i*stride + 4 ];
THREE.Loader.prototype.f4( scope, a, b, c, d, m );
}
function add_quad_n( src, i, stride ) {
var a, b, c, d, m, na, nb, nc, nd;
a = src[ i*stride ];
b = src[ i*stride + 1 ];
c = src[ i*stride + 2 ];
d = src[ i*stride + 3 ];
m = src[ i*stride + 4 ];
na = src[ i*stride + 5 ];
nb = src[ i*stride + 6 ];
nc = src[ i*stride + 7 ];
nd = src[ i*stride + 8 ];
THREE.Loader.prototype.f4n( scope, data.normals, a, b, c, d, m, na, nb, nc, nd );
}
function add_uv3( src, i, stride, offset ) {
var uva, uvb, uvc, u1, u2, u3, v1, v2, v3;
uva = src[ i*stride + offset ];
uvb = src[ i*stride + offset + 1 ];
uvc = src[ i*stride + offset + 2 ];
u1 = data.uvs[ uva*2 ];
v1 = data.uvs[ uva*2 + 1 ];
u2 = data.uvs[ uvb*2 ];
v2 = data.uvs[ uvb*2 + 1 ];
u3 = data.uvs[ uvc*2 ];
v3 = data.uvs[ uvc*2 + 1 ];
THREE.Loader.prototype.uv( scope, u1, v1, u2, v2, u3, v3 );
}
function add_uv4( src, i, stride, offset ) {
var uva, uvb, uvc, uvd, u1, u2, u3, u4, v1, v2, v3, v4;
uva = src[ i*stride + offset ];
uvb = src[ i*stride + offset + 1 ];
uvc = src[ i*stride + offset + 2 ];
uvd = src[ i*stride + offset + 3 ];
u1 = data.uvs[ uva*2 ];
v1 = data.uvs[ uva*2 + 1 ];
u2 = data.uvs[ uvb*2 ];
v2 = data.uvs[ uvb*2 + 1 ];
u3 = data.uvs[ uvc*2 ];
v3 = data.uvs[ uvc*2 + 1 ];
u4 = data.uvs[ uvd*2 ];
v4 = data.uvs[ uvd*2 + 1 ];
THREE.Loader.prototype.uv( scope, u1, v1, u2, v2, u3, v3, u4, v4 );
}
var i, l;
for( i = 0, l = data.triangles.length/4; i < l; i++ ) {
add_tri( data.triangles, i, 4 );
}
for( i = 0, l = data.triangles_uv.length/7; i < l; i++ ) {
add_tri( data.triangles_uv, i, 7 );
add_uv3( data.triangles_uv, i, 7, 4 );
}
for( i = 0, l = data.triangles_n.length/7; i < l; i++ ) {
add_tri_n( data.triangles_n, i, 7 );
}
for( i = 0, l = data.triangles_n_uv.length/10; i < l; i++ ) {
add_tri_n( data.triangles_n_uv, i, 10 );
add_uv3( data.triangles_n_uv, i, 10, 7 );
}
for( i = 0, l = data.quads.length/5; i < l; i++ ) {
add_quad( data.quads, i, 5 );
}
for( i = 0, l = data.quads_uv.length/9; i < l; i++ ) {
add_quad( data.quads_uv, i, 9 );
add_uv4( data.quads_uv, i, 9, 5 );
}
for( i = 0, l = data.quads_n.length/9; i < l; i++ ) {
add_quad_n( data.quads_n, i, 9 );
}
for( i = 0, l = data.quads_n_uv.length/13; i < l; i++ ) {
add_quad_n( data.quads_n_uv, i, 13 );
add_uv4( data.quads_n_uv, i, 13, 9 );
}
}
}
Model.prototype = new THREE.Geometry();
Model.prototype.constructor = Model;
callback( new Model( urlbase ) );
},
v: function( scope, x, y, z ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
},
f3: function( scope, a, b, c, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
},
f4: function( scope, a, b, c, d, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
},
f3n: function( scope, normals, a, b, c, mi, na, nb, nc ) {
var material = scope.materials[ mi ],
nax = normals[ na*3 ],
nay = normals[ na*3 + 1 ],
naz = normals[ na*3 + 2 ],
nbx = normals[ nb*3 ],
nby = normals[ nb*3 + 1 ],
nbz = normals[ nb*3 + 2 ],
ncx = normals[ nc*3 ],
ncy = normals[ nc*3 + 1 ],
ncz = normals[ nc*3 + 2 ];
scope.faces.push( new THREE.Face3( a, b, c,
[new THREE.Vector3( nax, nay, naz ),
new THREE.Vector3( nbx, nby, nbz ),
new THREE.Vector3( ncx, ncy, ncz )],
material ) );
},
f4n: function( scope, normals, a, b, c, d, mi, na, nb, nc, nd ) {
var material = scope.materials[ mi ],
nax = normals[ na*3 ],
nay = normals[ na*3 + 1 ],
naz = normals[ na*3 + 2 ],
nbx = normals[ nb*3 ],
nby = normals[ nb*3 + 1 ],
nbz = normals[ nb*3 + 2 ],
ncx = normals[ nc*3 ],
ncy = normals[ nc*3 + 1 ],
ncz = normals[ nc*3 + 2 ],
ndx = normals[ nd*3 ],
ndy = normals[ nd*3 + 1 ],
ndz = normals[ nd*3 + 2 ];
scope.faces.push( new THREE.Face4( a, b, c, d,
[new THREE.Vector3( nax, nay, naz ),
new THREE.Vector3( nbx, nby, nbz ),
new THREE.Vector3( ncx, ncy, ncz ),
new THREE.Vector3( ndx, ndy, ndz )],
material ) );
},
uv: function( scope, u1, v1, u2, v2, u3, v3, u4, v4 ) {
var uv = [];
uv.push( new THREE.UV( u1, v1 ) );
uv.push( new THREE.UV( u2, v2 ) );
uv.push( new THREE.UV( u3, v3 ) );
if ( u4 && v4 ) uv.push( new THREE.UV( u4, v4 ) );
scope.uvs.push( uv );
},
init_materials: function( scope, materials, urlbase ) {
scope.materials = [];
for( var i = 0; i < materials.length; ++i ) {
scope.materials[i] = [ THREE.Loader.prototype.createMaterial( materials[i], urlbase ) ];
}
},
createMaterial: function( m, urlbase ) {
function is_pow2( n ) {
var l = Math.log(n) / Math.LN2;
return Math.floor(l) == l;
}
function nearest_pow2( n ) {
var l = Math.log(n) / Math.LN2;
return Math.pow( 2, Math.round(l) );
}
var material, texture, image, color;
if( m.map_diffuse && urlbase ) {
texture = document.createElement( 'canvas' );
material = new THREE.MeshBitmapMaterial( texture );
image = new Image();
image.onload = function () {
if ( !is_pow2( this.width ) || !is_pow2( this.height ) ) {
var w = nearest_pow2( this.width ),
h = nearest_pow2( this.height );
material.bitmap.width = w;
material.bitmap.height = h;
material.bitmap.getContext("2d").drawImage( this, 0, 0, w, h );
} else {
material.bitmap = this;
}
material.loaded = 1;
};
image.src = urlbase + "/" + m.map_diffuse;
} else if( m.col_diffuse ) {
color = (m.col_diffuse[0]*255 << 16) + (m.col_diffuse[1]*255 << 8) + m.col_diffuse[2]*255;
material = new THREE.MeshColorFillMaterial( color, m.transparency );
} else if( m.a_dbg_color ) {
material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
} else {
material = new THREE.MeshColorFillMaterial( 0xeeeeee );
}
return material;
}
};
src/materials/LineColorMaterial.js
+1 -2
View File
@@ -5,8 +5,7 @@
THREE.LineColorMaterial = function ( hex, opacity, lineWidth ) {
this.lineWidth = lineWidth || 1;
this.color = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );
this.color = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ hex );
};
src/materials/MeshBitmapMaterial.js
+4 -5
View File
@@ -4,11 +4,11 @@
THREE.MeshBitmapMaterial = function ( bitmap, mode ) {
this.id = THREE.MeshBitmapMaterialCounter.value ++;
this.bitmap = bitmap;
this.mode = mode || THREE.MeshBitmapMaterialMode.UVMAPPING;
this.id = THREE.MeshBitmapMaterialCounter.value++;
this.toString = function () {
return 'THREE.MeshBitmapMaterial ( bitmap: ' + this.bitmap + ', mode: ' + this.mode + ', id: ' + this.id + ' )';
@@ -17,6 +17,5 @@ THREE.MeshBitmapMaterial = function ( bitmap, mode ) {
};
THREE.MeshBitmapMaterialCounter = { value:0 };
THREE.MeshBitmapMaterialCounter = { value: 0 };
THREE.MeshBitmapMaterialMode = { UVMAPPING: 0 };
src/materials/MeshColorFillMaterial.js
+1 -1
View File
@@ -4,7 +4,7 @@
THREE.MeshColorFillMaterial = function ( hex, opacity ) {
this.color = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );
this.color = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ hex );
this.toString = function () {
src/materials/MeshColorStrokeMaterial.js
+1 -1
View File
@@ -6,7 +6,7 @@ THREE.MeshColorStrokeMaterial = function ( hex, opacity, lineWidth ) {
this.lineWidth = lineWidth || 1;
this.color = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );
this.color = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ hex );
this.toString = function () {
src/materials/MeshPhongMaterial.js
+6 -5
View File
@@ -4,11 +4,12 @@
THREE.MeshPhongMaterial = function ( ambient, diffuse, specular, shininess, opacity ) {
this.ambient = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | ambient );
this.diffuse = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | diffuse );
this.specular = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | specular );
this.shininess = shininess;
this.opacity = opacity;
this.ambient = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ ambient );
this.diffuse = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ diffuse );
this.specular = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ specular );
this.shininess = shininess;
this.opacity = opacity;
this.toString = function () {
src/materials/ParticleCircleMaterial.js
+1 -1
View File
@@ -4,7 +4,7 @@
THREE.ParticleCircleMaterial = function ( hex, opacity ) {
this.color = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );
this.color = new THREE.Color( ( opacity !== undefined ? opacity : 1 ) * 0xff << 24 ^ hex );
this.toString = function () {
src/objects/Mesh.js
+34 -9
View File
@@ -32,11 +32,11 @@ THREE.Mesh.prototype.sortFacesByMaterial = function () {
// which could then use vertex color attributes instead of each being
// in its separate VBO
var i, l, f, fl, face, material, hash_array;
var i, l, f, fl, face, material, vertices, mhash, ghash, hash_map = {};
function materialHash( material ) {
hash_array = [];
var hash_array = [];
for ( i = 0, l = material.length; i < l; i++ ) {
@@ -52,7 +52,7 @@ THREE.Mesh.prototype.sortFacesByMaterial = function () {
}
return hash_array.join("_");
return hash_array.join( '_' );
}
@@ -61,19 +61,44 @@ THREE.Mesh.prototype.sortFacesByMaterial = function () {
face = this.geometry.faces[ f ];
material = face.material;
hash = materialHash( material);
mhash = materialHash( material );
if ( this.materialFaceGroup[ hash ] == undefined ) {
if ( hash_map[ mhash ] == undefined ) {
this.materialFaceGroup[ hash ] = { 'faces': [], 'material': material };
hash_map[ mhash ] = { 'hash': mhash, 'counter': 0 };
}
this.materialFaceGroup[ hash ].faces.push( f );
ghash = hash_map[ mhash ].hash + '_' + hash_map[ mhash ].counter;
if ( this.materialFaceGroup[ ghash ] == undefined ) {
this.materialFaceGroup[ ghash ] = { 'faces': [], 'material': material, 'vertices': 0 };
}
vertices = face instanceof THREE.Face3 ? 3 : 4;
if ( this.materialFaceGroup[ ghash ].vertices + vertices > 65535 ) {
hash_map[ mhash ].counter += 1;
ghash = hash_map[ mhash ].hash + '_' + hash_map[ mhash ].counter;
if ( this.materialFaceGroup[ ghash ] == undefined ) {
this.materialFaceGroup[ ghash ] = { 'faces': [], 'material': material, 'vertices': 0 };
}
}
this.materialFaceGroup[ ghash ].faces.push( f );
this.materialFaceGroup[ ghash ].vertices += vertices;
}
}
};
THREE.Mesh.prototype.normalizeUVs = function () {
@@ -95,4 +120,4 @@ THREE.Mesh.prototype.normalizeUVs = function () {
}
}
};
src/renderers/CanvasRenderer.js
+4 -4
View File
@@ -278,7 +278,7 @@ THREE.CanvasRenderer = function () {
var l, ll, light;
color.setRGBA( 1, 1, 1, 1 );
color.setRGBA( 0, 0, 0, 1 );
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
@@ -286,9 +286,9 @@ THREE.CanvasRenderer = function () {
if ( light instanceof THREE.AmbientLight ) {
color.r *= light.color.r;
color.g *= light.color.g;
color.b *= light.color.b;
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
}
src/renderers/Projector.js
+11
View File
@@ -238,4 +238,15 @@ THREE.Projector = function() {
};
this.unprojectVector = function ( vector, camera ) {
var matrix = new THREE.Matrix4();
matrix.multiply( THREE.Matrix4.makeInvert( camera.matrix ), THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
matrix.transform( vector );
return vector;
};
};
src/renderers/Renderer.js
Executable
+155
View File
@@ -0,0 +1,155 @@
var Renderer = Class.extend
({
matrix: null,
viewport: null,
renderList: null,
face3Pool: null,
face4Pool: null,
width: null,
height: null,
widthHalf: null,
heightHalf: null,
init: function()
{
this.matrix = new Matrix4();
this.face3Pool = new Array();
this.face4Pool = new Array();
},
setSize: function( width, height )
{
this.width = width;
this.height = height;
this.widthHalf = this.width / 2;
this.heightHalf = this.height / 2;
},
sort: function(a, b)
{
return a.screen.z - b.screen.z;
},
render: function( scene, camera )
{
var vertex, face, object;
var face3count = 0, face4count = 0;
var focuszoom = camera.focus * camera.zoom;
var matrixMultiply = this.matrix.multiply;
var matrixTransform = this.matrix.transform;
this.renderList = new Array();
for (var i = 0; i < scene.objects.length; i++)
{
object = scene.objects[i];
if (object instanceof Mesh)
{
matrixMultiply( camera.matrix, object.matrix );
// vertices
for (var j = 0; j < object.geometry.vertices.length; j++)
{
vertex = object.geometry.vertices[j];
vertex.screen.copy( vertex );
matrixTransform( vertex.screen );
vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
vertex.visible = vertex.screen.z > 0;
vertex.screen.x *= vertex.screen.z;
vertex.screen.y *= vertex.screen.z;
}
// faces
for (j = 0; j < object.geometry.faces.length; j++)
{
face = object.geometry.faces[j];
// TODO: Use normals for culling
if (face instanceof Face3)
{
if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
(face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
(face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
{
face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
if (this.face3Pool[face3count] == null)
this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
this.face3Pool[face3count].a.screen.copy(face.a.screen);
this.face3Pool[face3count].b.screen.copy(face.b.screen);
this.face3Pool[face3count].c.screen.copy(face.c.screen);
this.face3Pool[face3count].screen.z = face.screen.z;
this.face3Pool[face3count].color = face.color;
this.face3Pool[face3count].material = object.material;
this.renderList.push( this.face3Pool[face3count] );
face3count++;
}
}
else if (face instanceof Face4)
{
if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
((face.d.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
(face.d.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0 ||
(face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
(face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
{
face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;
if (this.face4Pool[face4count] == null)
this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
this.face4Pool[face4count].a.screen.copy(face.a.screen);
this.face4Pool[face4count].b.screen.copy(face.b.screen);
this.face4Pool[face4count].c.screen.copy(face.c.screen);
this.face4Pool[face4count].d.screen.copy(face.d.screen);
this.face4Pool[face4count].screen.z = face.screen.z;
this.face4Pool[face4count].color = face.color;
this.face4Pool[face4count].material = object.material;
this.renderList.push( this.face4Pool[face4count] );
face4count++;
}
}
}
}
else if (object instanceof Particle)
{
object.screen.copy(object.position);
camera.matrix.transform( object.screen );
object.screen.z = focuszoom / (camera.focus + object.screen.z);
if (object.screen.z < 0)
continue;
object.screen.x *= object.screen.z;
object.screen.y *= object.screen.z;
this.renderList.push( object );
}
}
this.renderList.sort(this.sort);
}
});
src/renderers/SVGRenderer.js
+5 -5
View File
@@ -102,7 +102,7 @@ THREE.SVGRenderer = function () {
}/* else if ( element instanceof THREE.RenderableLine ) {
}*/ else if ( element instanceof THREE.RenderableFace3 ) {
@@ -200,7 +200,7 @@ THREE.SVGRenderer = function () {
var l, ll, light;
color.setRGBA( 1, 1, 1, 1 );
color.setRGBA( 0, 0, 0, 1 );
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
@@ -208,9 +208,9 @@ THREE.SVGRenderer = function () {
if ( light instanceof THREE.AmbientLight ) {
color.r *= light.color.r;
color.g *= light.color.g;
color.b *= light.color.b;
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
}
src/renderers/WebGLRenderer.js
+3 -1
View File
@@ -974,6 +974,7 @@ THREE.WebGLRenderer = function ( scene ) {
};
/* DEBUG
function getGLParams() {
var params = {
@@ -1003,5 +1004,6 @@ THREE.WebGLRenderer = function ( scene ) {
return str;
}
*/
};
src/scenes/Scene.js
+6 -12
View File
@@ -15,14 +15,11 @@ THREE.Scene = function () {
this.removeObject = function ( object ) {
for ( var i = 0, l = this.objects.length; i < l; i++ ) {
var i = this.objects.indexOf( object );
if ( object == this.objects[ i ] ) {
if ( i !== -1 ) {
this.objects.splice( i, 1 );
return;
}
this.objects.splice( i, 1 );
}
@@ -36,14 +33,11 @@ THREE.Scene = function () {
this.removeLight = function ( light ) {
for ( var i = 0, l = this.lights.length; i < l; i++ ) {
var i = this.lights.indexOf( light );
if ( light == this.lights[ i ] ) {
if ( i !== -1 ) {
this.lights.splice( i, 1 );
return;
}
this.lights.splice( i, 1 );
}
utils/Builder.py
-81
View File
@@ -1,81 +0,0 @@
import sys
import os
filename = 'Three.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('core/Geometry.js')
files.append('cameras/Camera.js')
files.append('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/SVGRenderer.js')
files.append('renderers/WebGLRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
files.append('renderers/renderables/RenderableParticle.js')
files.append('renderers/renderables/RenderableLine.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js")
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/BuilderCanvas.py
-77
View File
@@ -1,77 +0,0 @@
import sys
import os
filename = 'ThreeCanvas.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('core/Geometry.js')
files.append('cameras/Camera.js')
files.append('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Projector.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
files.append('renderers/renderables/RenderableParticle.js')
files.append('renderers/renderables/RenderableLine.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js")
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/BuilderDOM.py
-60
View File
@@ -1,60 +0,0 @@
import sys
import os
filename = 'ThreeDOM.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('cameras/Camera.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/renderables/RenderableParticle.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js")
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/BuilderDebug.py
-91
View File
@@ -1,91 +0,0 @@
import sys
import os
filename = 'ThreeDebug.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('core/Geometry.js')
files.append('cameras/Camera.js')
files.append('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/SVGRenderer.js')
files.append('renderers/WebGLRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
files.append('renderers/renderables/RenderableParticle.js')
files.append('renderers/renderables/RenderableLine.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
position = 0
while True:
position = string.find("/* DEBUG", position)
if position == -1:
break
string = string[0:position] + string[position+8:]
position = string.find("*/", position)
string = string[0:position] + string[position+2:]
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js");
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/BuilderSVG.py
-76
View File
@@ -1,76 +0,0 @@
import sys
import os
filename = 'ThreeSVG.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('core/Geometry.js')
files.append('cameras/Camera.js')
files.append('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Projector.js')
files.append('renderers/SVGRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
files.append('renderers/renderables/RenderableParticle.js')
files.append('renderers/renderables/RenderableLine.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js")
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/BuilderWebGL.py
-72
View File
@@ -1,72 +0,0 @@
import sys
import os
filename = 'ThreeWebGL.js'
# MERGER
files = []
files.append('Three.js')
files.append('core/Color.js')
files.append('core/Vector2.js')
files.append('core/Vector3.js')
files.append('core/Vector4.js')
files.append('core/Rectangle.js')
files.append('core/Matrix3.js')
files.append('core/Matrix4.js')
files.append('core/Vertex.js')
files.append('core/Face3.js')
files.append('core/Face4.js')
files.append('core/UV.js')
files.append('core/Geometry.js')
files.append('cameras/Camera.js')
files.append('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/WebGLRenderer.js')
string = ''
for item in files:
src_file = open('../src/' + item,'r')
string += src_file.read() + "\n"
tmp_file = open('temp.js','w')
tmp_file.write(string)
tmp_file.close()
# YUICOMPRESSOR
os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/" + filename + " --charset utf-8 -v")
os.unlink("temp.js")
# HEADER
rev_file = open('REVISION','r')
rev = rev_file.read().rstrip()
output = '../build/' + filename
string = "// " + filename + " r" + rev + " - http://github.com/mrdoob/three.js\n"
src_file = open(output,'r')
string += src_file.read()
dep_file = open(output,'w')
dep_file.write(string)
dep_file.close()
utils/REVISION
+1 -1
View File
@@ -1 +1 @@
26
28
utils/build.bat
+2
View File
@@ -0,0 +1,2 @@
python build.py
python build.py --debug
utils/build.py
+356
View File
@@ -0,0 +1,356 @@
#!/usr/bin/env python
try:
import argparse
ap = 1
except ImportError:
import optparse
ap = 0
import os
import tempfile
def merge(files):
text = ""
for filename in files:
with open(os.path.join('..', 'src', filename), 'r') as f:
text = text + f.read()
return text
def output(text, filename):
with open(os.path.join('..', 'build', filename), 'w') as f:
f.write(text)
def compress(text):
in_tuple = tempfile.mkstemp()
with os.fdopen(in_tuple[0], 'w') as handle:
handle.write(text)
out_tuple = tempfile.mkstemp()
os.system("java -jar yuicompressor-2.4.2.jar %s --type js -o %s --charset utf-8 -v" % (in_tuple[1], out_tuple[1]))
with os.fdopen(out_tuple[0], 'r') as handle:
compressed = handle.read()
os.unlink(in_tuple[1])
os.unlink(out_tuple[1])
return compressed
def addHeader(text, endFilename):
with open(os.path.join('.', 'REVISION'), 'r') as handle:
revision = handle.read().rstrip()
return ("// %s r%s - http://github.com/mrdoob/three.js\n" % (endFilename, revision)) + text
def makeDebug(text):
position = 0
while True:
position = text.find("/* DEBUG", position)
if position == -1:
break
text = text[0:position] + text[position+8:]
position = text.find("*/", position)
text = text[0:position] + text[position+2:]
return text
def build(files, debug, outputFilename):
text = merge(files)
if debug:
text = makeDebug(text)
outputFilename = outputFilename + 'Debug'
outputFilename = outputFilename + '.js'
print "=" * 40
print "Compiling", outputFilename
print "=" * 40
output(addHeader(compress(text), outputFilename), outputFilename)
def buildFull(debug):
files = [
'Three.js',
'core/Color.js',
'core/Vector2.js',
'core/Vector3.js',
'core/Vector4.js',
'core/Ray.js',
'core/Rectangle.js',
'core/Matrix3.js',
'core/Matrix4.js',
'core/Vertex.js',
'core/Face3.js',
'core/Face4.js',
'core/UV.js',
'core/Geometry.js',
'cameras/Camera.js',
'io/Loader.js',
'lights/Light.js',
'lights/AmbientLight.js',
'lights/DirectionalLight.js',
'lights/PointLight.js',
'objects/Object3D.js',
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleCircleMaterial.js',
'materials/ParticleDOMMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/DOMRenderer.js',
'renderers/CanvasRenderer.js',
'renderers/SVGRenderer.js',
'renderers/WebGLRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
build(files, debug, 'Three')
def buildCanvas(debug):
files = [
'Three.js',
'core/Color.js',
'core/Vector2.js',
'core/Vector3.js',
'core/Vector4.js',
'core/Ray.js',
'core/Rectangle.js',
'core/Matrix3.js',
'core/Matrix4.js',
'core/Vertex.js',
'core/Face3.js',
'core/Face4.js',
'core/UV.js',
'core/Geometry.js',
'cameras/Camera.js',
'io/Loader.js',
'lights/Light.js',
'lights/AmbientLight.js',
'lights/DirectionalLight.js',
'lights/PointLight.js',
'objects/Object3D.js',
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/CanvasRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
build(files, debug, 'ThreeCanvas')
def buildWebGL(debug):
files = [
'Three.js',
'core/Color.js',
'core/Vector2.js',
'core/Vector3.js',
'core/Vector4.js',
'core/Ray.js',
'core/Rectangle.js',
'core/Matrix3.js',
'core/Matrix4.js',
'core/Vertex.js',
'core/Face3.js',
'core/Face4.js',
'core/UV.js',
'core/Geometry.js',
'cameras/Camera.js',
'io/Loader.js',
'lights/Light.js',
'lights/AmbientLight.js',
'lights/DirectionalLight.js',
'lights/PointLight.js',
'objects/Object3D.js',
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/WebGLRenderer.js',
]
build(files, debug, 'ThreeWebGL')
def buildSVG(debug):
files = [
'Three.js',
'core/Color.js',
'core/Vector2.js',
'core/Vector3.js',
'core/Vector4.js',
'core/Ray.js',
'core/Rectangle.js',
'core/Matrix3.js',
'core/Matrix4.js',
'core/Vertex.js',
'core/Face3.js',
'core/Face4.js',
'core/UV.js',
'core/Geometry.js',
'cameras/Camera.js',
'io/Loader.js',
'lights/Light.js',
'lights/AmbientLight.js',
'lights/DirectionalLight.js',
'lights/PointLight.js',
'objects/Object3D.js',
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/SVGRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
build(files, debug, 'ThreeSVG')
def buildDOM(debug):
files = [
'Three.js',
'core/Color.js',
'core/Vector2.js',
'core/Vector3.js',
'core/Vector4.js',
'core/Ray.js',
'core/Rectangle.js',
'core/Matrix3.js',
'core/Matrix4.js',
'core/Vertex.js',
'core/Face3.js',
'core/Face4.js',
'core/UV.js',
'cameras/Camera.js',
'io/Loader.js',
'objects/Object3D.js',
'objects/Particle.js',
'materials/ParticleDOMMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/DOMRenderer.js',
'renderers/CanvasRenderer.js',
'renderers/SVGRenderer.js',
'renderers/WebGLRenderer.js',
'renderers/renderables/RenderableParticle.js',
]
build(files, debug, 'ThreeDOM')
def parse_args():
if ap:
parser = argparse.ArgumentParser(description='Build and compress Three.js')
parser.add_argument('--full', help='Build Three.js', action='store_const', const=True, default=True)
parser.add_argument('--canvas', help='Build ThreeCanvas.js', action='store_true')
parser.add_argument('--webgl', help='Build ThreeWebGL.js', action='store_true')
parser.add_argument('--svg', help='Build ThreeSVG.js', action='store_true')
parser.add_argument('--dom', help='Build ThreeDOM.js', action='store_true')
parser.add_argument('--debug', help='Generate debug versions', action='store_const', const=True, default=False)
parser.add_argument('--all', help='Build all Three.js versions', action='store_true')
args = parser.parse_args()
else:
parser = optparse.OptionParser(description='Build and compress Three.js')
parser.add_option('--full', dest='full', help='Build Three.js', action='store_const', const=True, default=True)
parser.add_option('--canvas', dest='canvas', help='Build ThreeCanvas.js', action='store_true')
parser.add_option('--webgl', dest='webgl', help='Build ThreeWebGL.js', action='store_true')
parser.add_option('--svg', dest='svg', help='Build ThreeSVG.js', action='store_true')
parser.add_option('--dom', dest='dom', help='Build ThreeDOM.js', action='store_true')
parser.add_option('--debug', dest='debug', help='Generate debug versions', action='store_const', const=True, default=False)
parser.add_option('--all', dest='all', help='Build all Three.js versions', action='store_true')
args, remainder = parser.parse_args()
return args
def main(argv=None):
args = parse_args()
debug = args.debug
if args.full or args.all:
buildFull(debug)
if args.canvas or args.all:
buildCanvas(debug)
if args.webgl or args.all:
buildWebGL(debug)
if args.svg or args.all:
buildSVG(debug)
if args.dom or args.all:
buildDOM(debug)
if __name__ == "__main__":
main()
utils/build.sh
+3 -16
View File
@@ -1,19 +1,6 @@
#!/bin/sh
echo Compiling Three.js
python Builder.py
python build.py
python build.py --debug
echo Compiling ThreeDebug.js
python BuilderDebug.py
# echo Compiling ThreeDOM.js
# python BuilderDOM.py
# echo Compiling ThreeCanvas.js
# python BuilderCanvas.py
# echo Compiling ThreeSVG.js
# python BuilderSVG.py
# echo Compiling ThreeWebGL.js
# python BuilderWebGL.py
# python build.py --help
utils/exporters/blender/2.54/scripts/op/io_mesh_threejs_slim/__init__.py
+78
View File
@@ -0,0 +1,78 @@
# ##### BEGIN GPL LICENSE BLOCK #####
#
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software Foundation,
# Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
#
# ##### END GPL LICENSE BLOCK #####
# To support reload properly, try to access a package var, if it's there, reload everything
if "bpy" in locals():
import sys
reload(sys.modules.get("io_mesh_threejs_slim.export_threejs_slim", sys))
import bpy
from bpy.props import *
from io_utils import ExportHelper
class ExportTHREEJSSlim(bpy.types.Operator, ExportHelper):
'''Export selected object for Three.js (ASCII JSON format).'''
bl_idname = "export.threejs_slim"
bl_label = "Export Three.js Slim"
filename_ext = ".js"
use_modifiers = BoolProperty(name="Apply Modifiers", description="Apply modifiers to the exported mesh", default=True)
use_normals = BoolProperty(name="Normals", description="Export normals", default=True)
use_uv_coords = BoolProperty(name="UVs", description="Export texture coordinates", default=True)
@classmethod
def poll(cls, context):
return context.active_object != None
def execute(self, context):
print("Selected: " + context.active_object.name)
if not self.properties.filepath:
raise Exception("filename not set")
filepath = self.filepath
import io_mesh_threejs_slim.export_threejs_slim
return io_mesh_threejs_slim.export_threejs_slim.save(self, context, **self.properties)
def draw(self, context):
layout = self.layout
row = layout.row()
row.prop(self.properties, "use_modifiers")
row.prop(self.properties, "use_normals")
row = layout.row()
row.prop(self.properties, "use_uv_coords")
def menu_func(self, context):
default_path = bpy.data.filepath.replace(".blend", ".js")
self.layout.operator(ExportTHREEJSSlim.bl_idname, text="Three.js (.js) Slim").filepath = default_path
def register():
bpy.types.INFO_MT_file_export.append(menu_func)
def unregister():
bpy.types.INFO_MT_file_export.remove(menu_func)
if __name__ == "__main__":
register()
utils/exporters/blender/2.54/scripts/op/io_mesh_threejs_slim/export_threejs_slim.py
+521
View File
@@ -0,0 +1,521 @@
# ##### BEGIN GPL LICENSE BLOCK #####
#
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software Foundation,
# Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
#
# ##### END GPL LICENSE BLOCK #####
# Based on export_obj.py and export_ply.py
# Contributors: Mr.doob, Kikko, alteredq
"""
Blender exporter for Three.js (ASCII JSON format).
TODO
- model alignment
- copy used images to folder where exported file goes
- export all selected meshes
- binary format
"""
import bpy
import mathutils
import os
import os.path
import math
import operator
import random
# #####################################################
# Configuration
# #####################################################
ALIGN = "center" # center bottom top none
SHADING = "smooth" # smooth flat
TYPE = "ascii" # ascii binary
# default colors for debugging (each material gets one distinct color):
# white, red, green, blue, yellow, cyan, magenta
COLORS = [0xeeeeee, 0xee0000, 0x00ee00, 0x0000ee, 0xeeee00, 0x00eeee, 0xee00ee]
# #####################################################
# Templates
# #####################################################
TEMPLATE_FILE_ASCII = """\
// vertices: %(nvertex)d
// faces: %(nface)d
// materials: %(nmaterial)d
//
// Generated with Blender 2.54 slim exporter
// https://github.com/alteredq/three.js/tree/master/utils/exporters/blender/
var model = {
'materials': [%(materials)s],
'normals': [%(normals)s],
'vertices': [%(vertices)s],
'uvs': [%(uvs)s],
'triangles': [%(triangles)s],
'triangles_n': [%(triangles_n)s],
'triangles_uv': [%(triangles_uv)s],
'triangles_n_uv': [%(triangles_n_uv)s],
'quads': [%(quads)s],
'quads_n': [%(quads_n)s],
'quads_uv': [%(quads_uv)s],
'quads_n_uv': [%(quads_n_uv)s],
'end': (new Date).getTime()
}
postMessage( model );
"""
TEMPLATE_VERTEX = "%f,%f,%f"
TEMPLATE_UV_TRI = "%f,%f,%f,%f,%f,%f"
TEMPLATE_UV_QUAD = "%f,%f,%f,%f,%f,%f,%f,%f"
TEMPLATE_TRI = "%d,%d,%d,%d"
TEMPLATE_QUAD = "%d,%d,%d,%d,%d"
TEMPLATE_TRI_UV = "%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_QUAD_UV = "%d,%d,%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_TRI_N = "%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_QUAD_N = "%d,%d,%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_TRI_N_UV = "%d,%d,%d,%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_QUAD_N_UV = "%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d"
TEMPLATE_N = "%f,%f,%f"
TEMPLATE_UV = "%f,%f"
# #####################################################
# Utils
# #####################################################
def veckey3d(v):
return round(v.x, 6), round(v.y, 6), round(v.z, 6)
def veckey2d(v):
return round(v[0], 6), round(v[1], 6)
def get_normal_indices(v, normals, mesh):
n = []
mv = mesh.vertices
for i in v:
n.append( normals[veckey3d(mv[i].normal)] )
return n
def get_uv_indices(f, uvs, mesh):
uv = []
face_index = f[1]
uv_layer = mesh.uv_textures.active.data
for i in uv_layer[face_index].uv:
uv.append( uvs[veckey2d(i)] )
return uv
# #####################################################
# Elements
# #####################################################
def generate_vertex(v):
return TEMPLATE_VERTEX % (v.co.x, v.co.y, v.co.z)
def generate_normal(n):
return TEMPLATE_N % (n[0], n[1], n[2])
def generate_uv(uv):
return TEMPLATE_UV % (uv[0], 1.0 - uv[1])
def generate_triangle(f):
v = f[0].vertices
m = f[0].material_index
return TEMPLATE_TRI % (v[0], v[1], v[2],
m)
def generate_quad(f):
v = f[0].vertices
m = f[0].material_index
return TEMPLATE_QUAD % (v[0], v[1], v[2], v[3],
m)
def generate_triangle_n(f, normals, mesh):
v = f[0].vertices
m = f[0].material_index
n = get_normal_indices(v, normals, mesh)
return TEMPLATE_TRI_N % (v[0], v[1], v[2],
m,
n[0], n[1], n[2])
def generate_quad_n(f, normals, mesh):
v = f[0].vertices
m = f[0].material_index
n = get_normal_indices(v, normals, mesh)
return TEMPLATE_QUAD_N % (v[0], v[1], v[2], v[3],
m,
n[0], n[1], n[2], n[3])
def generate_triangle_uv(f, uvs, mesh):
v = f[0].vertices
m = f[0].material_index
uv = get_uv_indices(f, uvs, mesh)
return TEMPLATE_TRI_UV % (v[0], v[1], v[2],
m,
uv[0], uv[1], uv[2])
def generate_quad_uv(f, uvs, mesh):
v = f[0].vertices
m = f[0].material_index
uv = get_uv_indices(f, uvs, mesh)
return TEMPLATE_QUAD_UV % (v[0], v[1], v[2], v[3],
m,
uv[0], uv[1], uv[2], uv[3])
def generate_triangle_n_uv(f, normals, uvs, mesh):
v = f[0].vertices
m = f[0].material_index
n = get_normal_indices(v, normals, mesh)
uv = get_uv_indices(f, uvs, mesh)
return TEMPLATE_TRI_N_UV % (v[0], v[1], v[2],
m,
n[0], n[1], n[2],
uv[0], uv[1], uv[2])
def generate_quad_n_uv(f, normals, uvs, mesh):
v = f[0].vertices
m = f[0].material_index
n = get_normal_indices(v, normals, mesh)
uv = get_uv_indices(f, uvs, mesh)
return TEMPLATE_QUAD_N_UV % (v[0], v[1], v[2], v[3],
m,
n[0], n[1], n[2], n[3],
uv[0], uv[1], uv[2], uv[3])
# #####################################################
# Faces
# #####################################################
def sort_faces(faces, use_normals, use_uv_coords):
data = {
'triangles_flat': [],
'triangles_flat_uv': [],
'triangles_smooth': [],
'triangles_smooth_uv': [],
'quads_flat': [],
'quads_flat_uv': [],
'quads_smooth': [],
'quads_smooth_uv': []
}
for i, f in enumerate(faces):
if len(f.vertices) == 3:
if use_normals and use_uv_coords:
data['triangles_smooth_uv'].append([f,i])
elif use_normals and not use_uv_coords:
data['triangles_smooth'].append([f,i])
elif use_uv_coords:
data['triangles_flat_uv'].append([f,i])
else:
data['triangles_flat'].append([f,i])
elif len(f.vertices) == 4:
if use_normals and use_uv_coords:
data['quads_smooth_uv'].append([f,i])
elif use_normals and not use_uv_coords:
data['quads_smooth'].append([f,i])
elif use_uv_coords:
data['quads_flat_uv'].append([f,i])
else:
data['quads_flat'].append([f,i])
return data
# #####################################################
# Normals
# #####################################################
def extract_vertex_normals(mesh, use_normals):
if not use_normals:
return {}
count = 0
normals = {}
for f in mesh.faces:
for v in f.vertices:
key = veckey3d(mesh.vertices[v].normal)
if key not in normals:
normals[key] = count
count += 1
return normals
def generate_normals(normals, use_normals):
if not use_normals:
return ""
chunks = []
for key, index in sorted(normals.items(), key=operator.itemgetter(1)):
chunks.append(key)
return ",".join(generate_normal(n) for n in chunks)
# #####################################################
# UVs
# #####################################################
def extract_uvs(mesh, use_uv_coords):
if not use_uv_coords:
return {}
count = 0
uvs = {}
uv_layer = mesh.uv_textures.active.data
for face_index, face in enumerate(mesh.faces):
for uv_index, uv in enumerate(uv_layer[face_index].uv):
key = veckey2d(uv)
if key not in uvs:
uvs[key] = count
count += 1
return uvs
def generate_uvs(uvs, use_uv_coords):
if not use_uv_coords:
return ""
chunks = []
for key, index in sorted(uvs.items(), key=operator.itemgetter(1)):
chunks.append(key)
return ",".join(generate_uv(n) for n in chunks)
# #####################################################
# Materials
# #####################################################
def generate_color(i):
"""Generate hex color corresponding to integer.
Colors should have well defined ordering.
First N colors are hardcoded, then colors are random
(must seed random number generator with deterministic value
before getting colors).
"""
if i < len(COLORS):
return "0x%06x" % COLORS[i]
else:
return "0x%06x" % int(0xffffff * random.random())
def generate_mtl(materials):
"""Generate dummy materials.
"""
mtl = {}
for m in materials:
index = materials[m]
mtl[m] = {
'a_dbg_name': m,
'a_dbg_index': index,
'a_dbg_color': generate_color(index)
}
return mtl
def value2string(v):
if type(v)==str and v[0] != "0":
return '"%s"' % v
return str(v)
def generate_materials(mtl, materials):
"""Generate JS array of materials objects
"""
mtl_array = []
for m in mtl:
index = materials[m]
# add debug information
# materials should be sorted according to how
# they appeared in OBJ file (for the first time)
# this index is identifier used in face definitions
mtl[m]['a_dbg_name'] = m
mtl[m]['a_dbg_index'] = index
mtl[m]['a_dbg_color'] = generate_color(index)
mtl_raw = ",\n".join(['\t"%s" : %s' % (n, value2string(v)) for n,v in sorted(mtl[m].items())])
mtl_string = "\t{\n%s\n\t}" % mtl_raw
mtl_array.append([index, mtl_string])
return ",\n\n".join([m for i,m in sorted(mtl_array)])
def extract_materials(mesh, scene):
world = scene.world
materials = {}
for m in mesh.materials:
materials[m.name] = {}
materials[m.name]['col_diffuse'] = [m.diffuse_intensity * m.diffuse_color[0],
m.diffuse_intensity * m.diffuse_color[1],
m.diffuse_intensity * m.diffuse_color[2]]
materials[m.name]['col_specular'] = [m.specular_intensity * m.specular_color[0],
m.specular_intensity * m.specular_color[1],
m.specular_intensity * m.specular_color[2]]
materials[m.name]['col_ambient'] = [m.ambient * world.ambient_color[0],
m.ambient * world.ambient_color[1],
m.ambient * world.ambient_color[2]]
materials[m.name]['transparency'] = m.alpha
# not sure about mapping values to Blinn-Phong shader
# Blender uses INT from [1,511] with default 0
# http://www.blender.org/documentation/blender_python_api_2_54_0/bpy.types.Material.html#bpy.types.Material.specular_hardness
materials[m.name]["specular_coef"] = m.specular_hardness
if m.active_texture:
fn = bpy.path.abspath(m.active_texture.image.filepath)
fn = os.path.normpath(fn)
fn_strip = os.path.basename(fn)
materials[m.name]['map_diffuse'] = fn_strip
return materials
def generate_materials_string(mesh, scene):
random.seed(42) # to get well defined color order for debug materials
materials = {}
for i, m in enumerate(mesh.materials):
materials[m.name] = i
if not materials:
materials = { 'default':0 }
# default dummy materials
mtl = generate_mtl(materials)
# extract real materials from the mesh
mtl.update(extract_materials(mesh, scene))
return generate_materials(mtl, materials)
# #####################################################
# ASCII exporter
# #####################################################
def generate_ascii_model(mesh, scene, use_normals, use_uv_coords):
sfaces = sort_faces(mesh.faces, use_normals, use_uv_coords)
normals = extract_vertex_normals(mesh, use_normals)
uvs = extract_uvs(mesh, use_uv_coords)
text = TEMPLATE_FILE_ASCII % {
"vertices" : ",".join(generate_vertex(v) for v in mesh.vertices),
"triangles" : ",".join(generate_triangle(f) for f in sfaces['triangles_flat']),
"triangles_n" : ",".join(generate_triangle_n(f, normals, mesh) for f in sfaces['triangles_smooth']),
"triangles_uv" : ",".join(generate_triangle_uv(f, uvs, mesh) for f in sfaces['triangles_flat_uv']),
"triangles_n_uv": ",".join(generate_triangle_n_uv(f, normals, uvs, mesh) for f in sfaces['triangles_smooth_uv']),
"quads" : ",".join(generate_quad(f) for f in sfaces['quads_flat']),
"quads_n" : ",".join(generate_quad_n(f, normals, mesh) for f in sfaces['quads_smooth']),
"quads_uv" : ",".join(generate_quad_uv(f, uvs, mesh) for f in sfaces['quads_flat_uv']),
"quads_n_uv" : ",".join(generate_quad_n_uv(f, normals, uvs, mesh) for f in sfaces['quads_smooth_uv']),
"uvs" : generate_uvs(uvs, use_uv_coords),
"normals" : generate_normals(normals, use_normals),
"materials" : generate_materials_string(mesh, scene),
"nvertex" : len(mesh.vertices),
"nface" : len(mesh.faces),
"nmaterial" : 0
}
return text
# #####################################################
# Main
# #####################################################
def save(operator, context, filepath="", use_modifiers=True, use_normals=True, use_uv_coords=True):
def rvec3d(v):
return round(v[0], 6), round(v[1], 6), round(v[2], 6)
def rvec2d(v):
return round(v[0], 6), round(v[1], 6)
scene = context.scene
obj = context.object
if not filepath.lower().endswith('.js'):
filepath += '.js'
classname = os.path.basename(filepath).split(".")[0]
if not obj:
raise Exception("Error, Select 1 active object")
if scene.objects.active:
bpy.ops.object.mode_set(mode='OBJECT')
if use_modifiers:
mesh = obj.create_mesh(scene, True, 'PREVIEW')
else:
mesh = obj.data
if not mesh:
raise Exception("Error, could not get mesh data from active object")
# that's what Blender's native export_obj.py does
x_rot = mathutils.Matrix.Rotation(-math.pi/2, 4, 'X')
mesh.transform(x_rot * obj.matrix_world)
mesh.calc_normals()
faceUV = (len(mesh.uv_textures) > 0)
vertexUV = (len(mesh.sticky) > 0)
if (not faceUV) and (not vertexUV):
use_uv_coords = False
if faceUV:
active_uv_layer = mesh.uv_textures.active
if not active_uv_layer:
use_uv_coords = False
text = generate_ascii_model(mesh, scene, use_normals, use_uv_coords)
file = open(filepath, 'w')
file.write(text)
file.close()
print("writing", filepath, "done")
if use_modifiers:
bpy.data.meshes.remove(mesh)
return {'FINISHED'}
utils/exporters/convert_obj_threejs.py
+39 -28
View File
@@ -4,9 +4,11 @@
How to use this converter
-------------------------
python convert_obj_threejs.py -i filename.obj -o filename.js [-a center|top|bottom]
python convert_obj_threejs.py -i filename.obj -o filename.js [-a center|top|bottom] [-s smooth|flat]
Note: by default, model is centered (middle of bounding box goes to 0,0,0).
Note: by default, model is centered (middle of bounding box goes to 0,0,0)
and uses smooth shading (if there were vertex normals in the original
model).
--------------------------------------------------
How to use generated JS file in your HTML document
@@ -41,19 +43,16 @@ Current limitations
- for the moment, only diffuse color and texture are used
(will need to extend shaders / renderers / materials in Three)
- models cannot have more than 65,536 vertices
(this comes from WebGL using just 16-bit indices,
could be worked around by expanding indexed
faces into full vertex definitions)
- models can have more than 65,536 vertices,
but in most cases it will not work well with browsers,
which currently seem to have troubles with handling
large JS files
- texture coordinates can be wrong in canvas renderer
(there is crude normalization, but it doesn't
work for all cases)
- everything is using smoothing
(if you want flat shading for whole mesh,
don't export normals, then Three will
compute own normals)
- smoothing can be turned on/off only for the whole mesh
----------------------------------------------
How to get proper OBJ + MTL files with Blender
@@ -97,7 +96,7 @@ How to get proper OBJ + MTL files with Blender
------
Author
------
AlteredQualia http://alteredqualia.com
AlteredQualia http://alteredqualia.com
"""
@@ -113,9 +112,11 @@ import sys
# #####################################################
ALIGN = "center" # center bottom top none
SHADING = "smooth" # flat smooth
# default colors for debugging (each material gets one distinct color):
# white, red, green, blue, yellow, cyan, magenta
COLORS = [0xffeeeeee, 0xffee0000, 0xff00ee00, 0xff0000ee, 0xffeeee00, 0xff00eeee, 0xffee00ee]
COLORS = [0xeeeeee, 0xee0000, 0x00ee00, 0x0000ee, 0xeeee00, 0x00eeee, 0xee00ee]
# #####################################################
# Templates
@@ -424,22 +425,22 @@ def parse_mtl(fname):
# Diffuse color
# Kd 1.000 1.000 1.000
if chunks[0] == "Kd" and len(chunks) == 4:
if chunks[0] == "Kd" and len(chunks) == 4:
materials[identifier]["col_diffuse"] = [float(chunks[1]), float(chunks[2]), float(chunks[3])]
# Ambient color
# Ka 1.000 1.000 1.000
if chunks[0] == "Ka" and len(chunks) == 4:
if chunks[0] == "Ka" and len(chunks) == 4:
materials[identifier]["col_ambient"] = [float(chunks[1]), float(chunks[2]), float(chunks[3])]
# Specular color
# Ks 1.000 1.000 1.000
if chunks[0] == "Ks" and len(chunks) == 4:
if chunks[0] == "Ks" and len(chunks) == 4:
materials[identifier]["col_specular"] = [float(chunks[1]), float(chunks[2]), float(chunks[3])]
# Specular coefficient
# Ns 154.000
if chunks[0] == "Ns" and len(chunks) == 2:
if chunks[0] == "Ns" and len(chunks) == 2:
materials[identifier]["specular_coef"] = float(chunks[1])
# Transparency
@@ -449,12 +450,12 @@ def parse_mtl(fname):
# Optical density
# Ni 1.0
if chunks[0] == "Ni" and len(chunks) == 2:
if chunks[0] == "Ni" and len(chunks) == 2:
materials[identifier]["optical_density"] = float(chunks[1])
# Diffuse texture
# map_Kd texture_diffuse.jpg
if chunks[0] == "map_Kd" and len(chunks) == 2:
if chunks[0] == "map_Kd" and len(chunks) == 2:
materials[identifier]["map_diffuse"] = chunks[1]
# Ambient texture
@@ -651,7 +652,7 @@ def generate_uv(f, uvs):
def generate_face(f):
vi = f['vertex']
if f["normal"]:
if f["normal"] and SHADING == "smooth":
ni = f['normal']
if len(vi) == 3:
return TEMPLATE_FACE3N % (vi[0]-1, vi[1]-1, vi[2]-1, f['material'], ni[0]-1, ni[1]-1, ni[2]-1)
@@ -677,9 +678,9 @@ def generate_color(i):
"""
if i < len(COLORS):
return "0x%x" % COLORS[i]
return "0x%06x" % COLORS[i]
else:
return "0x%x" % (int(0xffffff * random.random()) + 0xff000000)
return "0x%06x" % int(0xffffff * random.random())
def value2string(v):
if type(v)==str and v[0] != "0":
@@ -756,8 +757,10 @@ def convert(infile, outfile):
# default materials with debug colors for when
# there is no specified MTL, if loading failed
# or there were null materials
# there is no specified MTL / MTL loading failed,
# or if there were no materials / null materials
if not materials:
materials = { 'default':0 }
mtl = generate_mtl(materials)
if mtllib:
@@ -773,12 +776,16 @@ def convert(infile, outfile):
else:
print "Couldn't find [%s]" % fname
normals_string = ""
if SHADING == "smooth":
normals_string = ",".join(generate_normal(n) for n in normals)
text = TEMPLATE_FILE % {
"name" : get_name(outfile),
"vertices" : "\n".join([generate_vertex(v) for v in vertices]),
"faces" : "\n".join([generate_face(f) for f in faces]),
"uvs" : uv_string,
"normals" : ",".join(generate_normal(n) for n in normals),
"normals" : normals_string,
"materials" : generate_materials(mtl, materials),
@@ -798,8 +805,8 @@ def convert(infile, outfile):
# Helpers
# #############################################################################
def usage():
print "Usage: %s -i filename.obj -o filename.js [-a center|top|bottom]" % os.path.basename(sys.argv[0])
print "Usage: %s -i filename.obj -o filename.js [-a center|top|bottom] [-s flat|smooth]" % os.path.basename(sys.argv[0])
# #####################################################
# Main
# #####################################################
@@ -807,7 +814,7 @@ if __name__ == "__main__":
# get parameters from the command line
try:
opts, args = getopt.getopt(sys.argv[1:], "hi:o:a:", ["help", "input=", "output=", "align="])
opts, args = getopt.getopt(sys.argv[1:], "hi:o:a:s:", ["help", "input=", "output=", "align=", "shading="])
except getopt.GetoptError:
usage()
@@ -829,7 +836,11 @@ if __name__ == "__main__":
elif o in ("-a", "--align"):
if a in ("top", "bottom", "center"):
ALIGN = a
elif o in ("-s", "--shading"):
if a in ("flat", "smooth"):
SHADING = a
if infile == "" or outfile == "":
usage()
sys.exit(2)
utils/exporters/convert_obj_threejs_slim.py
+1195
View File
File diff suppressed because it is too large Load Diff