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

Removed Class.js dependency

Browse Source 
Added THREE namespace
Camera.x -> Camera.position.x
Camera.target.x -> Camera.target.position.x
ColorMaterial -> ColorFillMaterial
FaceColorMaterial -> FaceColorFillMaterial
Materials are now multipass (use array)
Added ColorStrokeMaterial and FaceColorStrokeMaterial
geometry.faces.a are now indexes instead of links
This commit is contained in:
Mr.doob
2010-05-16 05:32:43 +01:00
parent 322d59fe4d
commit a6e98d7e9a
43 changed files with 1255 additions and 1154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+51 -30
View File
@@ -37,62 +37,83 @@ This code creates a camera, then creates a scene object, adds a bunch of random
init();
setInterval(loop, 1000 / 60);
function init()
{
camera = new Camera(0, 0, 1000);
function init() {
camera = new THREE.Camera(0, 0, 1000);
scene = new Scene();
scene = new THREE.Scene();
renderer = new CanvasRenderer();
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
for (var i = 0; i < 1000; i++)
{
var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
for (var i = 0; i < 1000; i++) {
var particle = new THREE.Particle( new THREE.ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
particle.size = Math.random() * 10 + 5;
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.updateMatrix();
scene.add( particle );
}
document.body.appendChild(renderer.viewport);
}
function loop()
{
function loop() {
renderer.render(scene, camera);
}
</script>
If you are interested on messing with the actual library, instead of importing the three.js compressed file, you can include the original files in this order:
<script type="text/javascript" src="src/Class.js"></script>
<script type="text/javascript" src="src/core/Color.js"></script>
<script type="text/javascript" src="src/core/Vector3.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/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/Mesh.js"></script>
<script type="text/javascript" src="src/objects/primitives/Plane.js"></script>
<script type="text/javascript" src="src/objects/primitives/Cube.js"></script>
<script type="text/javascript" src="src/objects/Particle.js"></script>
<script type="text/javascript" src="src/materials/ColorMaterial.js"></script>
<script type="text/javascript" src="src/materials/FaceColorMaterial.js"></script>
<script type="text/javascript" src="src/scenes/Scene.js"></script>
<script type="text/javascript" src="src/renderers/Renderer.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="js/three/Three.js"></script>
<script type="text/javascript" src="js/three/core/Color.js"></script>
<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/Matrix4.js"></script>
<script type="text/javascript" src="js/three/core/Vertex.js"></script>
<script type="text/javascript" src="js/three/core/Face3.js"></script>
<script type="text/javascript" src="js/three/core/Face4.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/objects/Object3D.js"></script>
<script type="text/javascript" src="js/three/objects/Mesh.js"></script>
<script type="text/javascript" src="js/three/objects/Particle.js"></script>
<script type="text/javascript" src="js/three/materials/ColorFillMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/ColorStrokeMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/FaceColorFillMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/FaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="js/three/scenes/Scene.js"></script>
<script type="text/javascript" src="js/three/renderers/Renderer.js"></script>
<script type="text/javascript" src="js/three/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="js/three/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="js/three/renderers/renderables/RenderableParticle.js"></script>
### Change Log ###
2010 05 16 - **r5** (17.979 kb)
* Removed Class.js dependency
* Added THREE namespace
* Camera.x -> Camera.position.x
* Camera.target.x -> Camera.target.position.x
* ColorMaterial -> ColorFillMaterial
* FaceColorMaterial -> FaceColorFillMaterial
* Materials are now multipass (use array)
* Added ColorStrokeMaterial and FaceColorStrokeMaterial
* geometry.faces.a are now indexes instead of links
2010 04 26 - **r4** (16.274 kb)
* SVGRenderer Particle rendering
build/three.js
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/geometry/cube.html
Regular → Executable
+34 -28
View File
@@ -17,6 +17,10 @@
<body>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="primitives/Cube.js"></script>
<script type="text/javascript" src="primitives/Plane.js"></script>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
<script type="text/javascript">
@@ -45,8 +49,8 @@
init();
setInterval(loop, 1000/60);
function init()
{
function init() {
container = document.createElement('div');
document.body.appendChild(container);
@@ -58,36 +62,38 @@
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new Camera(0, 150, 400);
camera = new THREE.Camera(0, 150, 400);
camera.focus = 300;
camera.target.y = 150;
camera.target.position.y = 150;
camera.updateMatrix();
scene = new Scene();
scene = new THREE.Scene();
// Cube
geometry = new Cube(200, 200, 200);
for (var i = 0; i < geometry.faces.length; i++)
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 = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
cube.position.y = 150;
cube.updateMatrix();
scene.add(cube);
// Plane
plane = new Mesh(new Plane(200, 200), new ColorMaterial(0xe0e0e0));
plane = new THREE.Mesh(new Plane(200, 200), new THREE.ColorFillMaterial(0xe0e0e0));
plane.rotation.x = 90 * (Math.PI / 180);
plane.updateMatrix();
scene.add(plane);
renderer = new CanvasRenderer();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.viewport);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -101,8 +107,8 @@
//
function onDocumentMouseDown( event )
{
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
@@ -113,31 +119,31 @@
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event )
{
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp( event )
{
function onDocumentMouseUp( event ) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut( event )
{
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)
{
function onDocumentTouchStart( event ) {
if(event.touches.length == 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
@@ -145,10 +151,10 @@
}
}
function onDocumentTouchMove( event )
{
if(event.touches.length == 1)
{
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
@@ -158,8 +164,8 @@
//
function loop()
{
function loop() {
cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
cube.updateMatrix();
examples/geometry/primitives/Cube.js
Executable
+38
View File
@@ -0,0 +1,38 @@
var Cube = function (width, height, depth) {
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( 1, 5, 6, 2 );
f4( 2, 6, 7, 3 );
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) {
scope.faces.push( new THREE.Face4( a, b, c, d ) );
}
}
Cube.prototype = new THREE.Geometry();
Cube.prototype.constructor = Cube;
examples/geometry/primitives/Cylinder.js
+76
View File
@@ -0,0 +1,76 @@
var Cylinder = function (numSegs, topRad, botRad, height, topOffset, botOffset) {
THREE.Geometry.call(this);
var scope = this, i;
// VERTICES
// Top circle vertices
for (i = 0; i < numSegs; i++) {
v(
Math.sin(2 * 3.1415 * i / numSegs)*topRad,
Math.cos(2 * 3.1415 * i / numSegs)*topRad,
0);
}
// Bottom circle vertices
for (i = 0; i < numSegs; i++) {
v(
Math.sin(2 * 3.1415 * i / numSegs)*botRad,
Math.cos(2 * 3.1415 * i / numSegs)*botRad,
height);
}
// FACES
// Body
for (i = 0; i < numSegs; i++) {
f4(i, i + numSegs, numSegs + (i + 1) % numSegs, (i + 1) % numSegs, '#ff0000');
}
// Bottom circle
if (botRad != 0) {
v(0, 0, -topOffset);
for (i = numSegs; i < numSegs + (numSegs / 2); i++) {
f4(2 * numSegs,
(2 * i - 2 * numSegs) % numSegs,
(2 * i - 2 * numSegs + 1) % numSegs,
(2 * i - 2 * numSegs + 2) % numSegs);
}
}
// Top circle
if (topRad != 0) {
v(0, 0, height + topOffset);
for (i = numSegs + (numSegs / 2); i < 2 * numSegs; i++) {
f4( (2 * i - 2 * numSegs + 2) % numSegs + numSegs,
(2 * i - 2 * numSegs + 1) % numSegs + numSegs,
(2 * i - 2 * numSegs) % numSegs+numSegs,
2 * numSegs + 1);
}
}
function v(x, y, z) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f4(a, b, c, d) {
scope.faces.push( new THREE.Face4(a, b, c, d) );
}
}
Cylinder.prototype = new THREE.Geometry();
Cylinder.prototype.constructor = Cylinder;
examples/geometry/primitives/Plane.js
Executable
+28
View File
@@ -0,0 +1,28 @@
var Plane = function (width, height) {
THREE.Geometry.call(this);
var scope = this,
width_half = width / 2,
height_half = height / 2;
v( -width_half, height_half, 0 );
v( width_half, height_half, 0 );
v( width_half, -height_half, 0 );
v( -width_half, -height_half, 0 );
f4( 0, 1, 2, 3 );
function v(x, y, z) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f4(a, b, c, d) {
scope.faces.push( new THREE.Face4(a, b, c, d) );
}
}
Plane.prototype = new THREE.Geometry();
Plane.prototype.constructor = Plane;
examples/particles/floor.html
+12 -12
View File
@@ -5,14 +5,13 @@
<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
{
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a
{
a {
color:#0078ff;
}
</style>
@@ -20,6 +19,7 @@
<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">
@@ -54,23 +54,23 @@
container = document.createElement('div');
document.body.appendChild(container);
camera = new Camera(0, 0, 1000);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new Scene();
scene = new THREE.Scene();
renderer = new CanvasRenderer();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
particles = new Array();
var material = new ColorMaterial(0xffffff, 1);
var material = new THREE.ColorFillMaterial(0xffffff, 1);
for (var ix = 0; ix < AMOUNTX; ix++)
{
for(var iy = 0; iy < AMOUNTY; iy++)
{
particle = new Particle( material );
particle = new THREE.Particle( material );
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
particle.updateMatrix();
@@ -78,7 +78,7 @@
}
}
container.appendChild(renderer.viewport);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -124,8 +124,8 @@
function loop()
{
camera.x += (mouseX - camera.x) * .05;
camera.y += (-mouseY - camera.y) * .05;
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.updateMatrix();
renderer.render(scene, camera);
examples/particles/random.html
+30 -28
View File
@@ -5,20 +5,21 @@
<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
{
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a
{
a {
color:#0078ff;
}
</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">
@@ -41,34 +42,35 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval(loop, 1000 / 60);
function init()
{
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new Camera(0, 0, 1000);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new Scene();
scene = new THREE.Scene();
renderer = new CanvasRenderer();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
for (var i = 0; i < 1000; i++)
{
particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
for (var i = 0; i < 1000; i++) {
particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
particle.size = Math.random() * 10 + 5;
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.updateMatrix();
scene.add( particle );
scene.add(particle);
}
container.appendChild(renderer.viewport);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -82,16 +84,16 @@
//
function onDocumentMouseMove(event)
{
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event )
{
if(event.touches.length == 1)
{
function onDocumentTouchStart(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
@@ -99,10 +101,10 @@
}
}
function onDocumentTouchMove( event )
{
if(event.touches.length == 1)
{
function onDocumentTouchMove(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
@@ -112,10 +114,10 @@
//
function loop()
{
camera.x += (mouseX - camera.x) * .05;
camera.y += (-mouseY - camera.y) * .05;
function loop() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.updateMatrix();
renderer.render(scene, camera);
examples/particles/waves.html
+35 -30
View File
@@ -19,6 +19,7 @@
</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">
@@ -49,29 +50,29 @@
init();
setInterval(loop, 1000 / 60);
function init()
{
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new Camera(0, 0, 1000);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new Scene();
scene = new THREE.Scene();
renderer = new CanvasRenderer();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
particles = new Array();
var i = 0;
var material = new ColorMaterial(0xffffff, 1);
var material = new THREE.ColorFillMaterial(0xffffff, 1);
for (var ix = 0; ix < AMOUNTX; ix++)
{
for(var iy = 0; iy < AMOUNTY; iy++)
{
particle = particles[i++] = new Particle( material );
for (var ix = 0; ix < AMOUNTX; ix++) {
for(var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++] = new THREE.Particle( material );
particle.size = 1;
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
@@ -82,7 +83,7 @@
count = 0;
container.appendChild(renderer.viewport);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
@@ -96,51 +97,55 @@
//
function onDocumentMouseMove(event)
{
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event )
{
if(event.touches.length == 1)
{
function onDocumentTouchStart(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event )
{
if(event.touches.length == 1)
{
function onDocumentTouchMove(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
//
function loop()
{
camera.x += (mouseX - camera.x) * .05;
camera.y += (-mouseY - camera.y) * .05;
function loop() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.updateMatrix();
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++)
{
for(var iy = 0; iy < AMOUNTY; iy++)
{
for (var ix = 0; ix < AMOUNTX; ix++) {
for(var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++];
particle.size = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
particle.position.y = (Math.sin((ix + count) * .3) * 50) + (Math.sin((iy + count) * .5) * 50);
}
}
src/Class.js
-61
View File
@@ -1,61 +0,0 @@
// http://ejohn.org/blog/simple-javascript-inheritance/
// Inspired by base2 and Prototype
(function(){
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();
src/Three.js
+1
View File
@@ -0,0 +1 @@
var THREE = THREE || {}
src/cameras/Camera.js
+27 -31
View File
@@ -1,33 +1,29 @@
var Camera = Vector3.extend
({
up: null,
target: null,
zoom: null,
focus: null,
roll: null,
matrix: null,
init: function(x, y, z)
{
this._super(x, y, z);
this.up = new Vector3( 0, 1, 0 );
this.target = new Vector3( 0, 0, 0 );
this.zoom = 3;
this.focus = 500;
this.roll = 0;
this.matrix = new Matrix4();
this.updateMatrix();
},
updateMatrix: function()
{
this.matrix.lookAt( this, this.target, this.up );
},
THREE.Camera = function (x, y, z) {
toString: function()
{
return 'Camera ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
this.position = new THREE.Vector3(x, y, z);
this.target = {
position: new THREE.Vector3(0, 0, 0)
}
});
this.matrix = new THREE.Matrix4();
this.projectionMatrix = THREE.Matrix4.makePerspective(45, 1 /*SCREEN_WIDTH/SCREEN_HEIGHT*/, 0.001, 1000);
this.up = new THREE.Vector3(0, 1, 0);
this.roll = 0;
// TODO: Need to remove this
this.zoom = 3;
this.focus = 500;
this.updateMatrix = function () {
this.matrix.lookAt(this.position, this.target.position, this.up);
}
this.toString = function () {
return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';
}
this.updateMatrix();
}
src/core/Color.js
+38 -44
View File
@@ -1,55 +1,49 @@
var Color = Class.extend
({
r: null, g: null, b: null, a: null,
hex: null,
THREE.Color = function (hex) {
var _r, _g, _b, _a, _hex;
styleString: null,
this.styleString;
this.setHex = function (hex) {
init: function( hex )
{
this.setHex( hex ? hex : 0xff000000 );
},
setHex: function( hex )
{
this.hex = hex;
_hex = hex;
this.updateRGBA();
this.updateStyleString();
},
}
setRGBA: function( r, g, b, a )
{
this.r = r;
this.g = g;
this.b = b;
this.a = a;
this.setRGBA = function (r, g, b, a) {
_r = r;
_g = g;
_b = b;
_a = a;
this.updateHex();
this.updateStyleString();
},
updateHex: function()
{
this.hex = this.a << 24 | this.r << 16 | this.g << 8 | this.b;
},
updateRGBA: function()
{
this.r = this.hex >> 16 & 0xff;
this.g = this.hex >> 8 & 0xff;
this.b = this.hex & 0xff;
this.a = this.hex >> 24 & 0xff;
},
updateStyleString: function()
{
this.styleString = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + (this.a / 255) + ')';
},
toString: function()
{
return 'Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ', style: ' + this.styleString + ' )';
}
});
this.updateHex = function () {
_hex = _a << 24 | _r << 16 | _g << 8 | _b;
}
this.updateRGBA = function () {
_r = _hex >> 16 & 0xff;
_g = _hex >> 8 & 0xff;
_b = _hex & 0xff;
_a = _hex >> 24 & 0xff;
}
this.updateStyleString = function () {
this.styleString = 'rgba(' + _r + ',' + _g + ',' + _b + ',' + (_a / 255) + ')';
}
this.toString = function () {
return 'THREE.Color ( r: ' + _r + ', g: ' + _g + ', b: ' + _b + ', a: ' + _a + ', hex: ' + _hex + ', style: ' + this.styleString + ' )';
}
this.setHex(hex);
}
src/core/Face3.js
+13 -25
View File
@@ -1,29 +1,17 @@
var Face3 = Vector3.extend
({
a: null, b: null, c: null,
screen: null,
uv: null,
normal: null,
color: null,
THREE.Face3 = function (a, b, c, uv, normal, color) {
init: function(a, b, c, uv, normal, color)
{
this._super((a.x + b.x + c.x) / 3, (a.y + b.y + c.y) / 3, (a.z + b.z + c.z) / 3);
this.a = a;
this.b = b;
this.c = c;
this.a = a;
this.b = b;
this.c = c;
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.uv = uv || [ [0,0], [0,0], [0,0] ];
this.color = color || new THREE.Color();
this.screen = new Vector3();
this.uv = uv ? uv : [ [0, 0], [0, 0], [0, 0] ];
this.normal = normal ? normal : new Vector3();
this.color = color ? color : new Color();
},
toString: function()
{
return 'Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
this.toString = function () {
return 'THREE.Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
}
});
}
src/core/Face4.js
+14 -22
View File
@@ -1,26 +1,18 @@
var Face4 = Vector3.extend
({
a: null, b: null, c: null, d: null,
normal: null,
screen: null,
color: null,
THREE.Face4 = function (a, b, c, d, uv, normal, color) {
init: function(a, b, c, d, uv, normal, color)
{
this._super((a.x + b.x + c.x + d.x) / 4, (a.y + b.y + c.y + d.y) / 4, (a.z + b.z + c.z + d.z) / 4);
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.screen = new Vector3();
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.uv = uv || [ [0,0], [0,0], [0,0], [0, 0] ];
this.color = color || new THREE.Color();
this.color = color ? color : new Color();
},
toString: function()
{
return 'Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ', ' + this.d + ' )';
this.toString = function () {
return 'THREE.Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' ' + this.d + ' )';
}
});
}
src/core/Geometry.js
+5 -10
View File
@@ -1,11 +1,6 @@
var Geometry = Class.extend
({
vertices: null,
faces: null,
THREE.Geometry = function () {
init: function()
{
this.vertices = new Array();
this.faces = new Array();
}
});
this.vertices = [];
this.faces = [];
}
src/core/Matrix3.js
+27 -30
View File
@@ -1,30 +1,25 @@
var Matrix3 = Class.extend
({
n11: null, n12: null, n13: null,
n21: null, n22: null, n23: null,
n31: null, n32: null, n33: null,
THREE.Matrix3 = function () {
init: function()
{
this.identity();
},
identity: function()
{
this.n11 = 1; this.n12 = 0; this.n13 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1;
this.identity = function () {
this.n11 = 1; this.n12 = 0; this.n13 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1;
},
}
assign: function(m)
{
this.assign = function (m) {
this.n11 = m.n11; this.n12 = m.n12; this.n13 = m.n13;
this.n21 = m.n21; this.n22 = m.n22; this.n23 = m.n23;
this.n31 = m.n31; this.n32 = m.n32; this.n33 = m.n33;
},
}
multiplySelf: function(m)
{
this.multiplySelf = function (m) {
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
@@ -40,10 +35,10 @@ var Matrix3 = Class.extend
this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31;
this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32;
this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33;
},
}
inverse: function()
{
this.inverse = function () {
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
@@ -51,21 +46,23 @@ var Matrix3 = Class.extend
this.n11 = n11; this.n12 = n21; this.n13 = n31;
this.n21 = n12; this.n22 = n22; this.n23 = n32;
this.n31 = n13; this.n32 = n23; this.n33 = n33;
},
}
clone: function()
{
var m = new Matrix3();
this.clone = function () {
var m = new THREE.Matrix3();
m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13;
m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23;
m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33;
return m;
},
}
toString: function()
{
this.toString = function () {
return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " |\n" +
"| " + this.n21 + " " + this.n22 + " " + this.n23 + " |\n" +
"| " + this.n31 + " " + this.n32 + " " + this.n33 + " |";
}
});
}
}
src/core/Matrix4.js
+169 -105
View File
@@ -1,125 +1,160 @@
var Matrix4 = Class.extend
({
n11: null, n12: null, n13: null, n14: null,
n21: null, n22: null, n23: null, n24: null,
n31: null, n32: null, n33: null, n34: null,
THREE.Matrix4 = function () {
x: null, y: null, z: null,
var x, y, z;
init: function()
{
this.identity();
},
x = new THREE.Vector3();
y = new THREE.Vector3();
z = new THREE.Vector3();
identity: function()
{
this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
this.identity = function () {
this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
this.x = new Vector3(0,0,0);
this.y = new Vector3(0,0,0);
this.z = new Vector3(0,0,0);
},
this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
}
lookAt: function(eye, center, up)
{
this.z.sub(center, eye);
this.z.normalize();
this.lookAt = function (eye, center, up) {
z.sub(center, eye);
z.normalize();
this.x.copy(this.z);
this.x.cross(up);
this.x.normalize();
x.copy(z);
x.cross(up);
x.normalize();
this.y.copy(this.x);
this.y.cross(this.z);
this.y.normalize();
this.y.negate(); //
y.copy(x);
y.cross(z);
y.normalize();
y.negate(); //
this.n11 = this.x.x;
this.n12 = this.x.y;
this.n13 = this.x.z;
this.n14 = -this.x.dot(eye);
this.n21 = this.y.x;
this.n22 = this.y.y;
this.n23 = this.y.z;
this.n24 = -this.y.dot(eye);
this.n31 = this.z.x;
this.n32 = this.z.y;
this.n33 = this.z.z;
this.n34 = -this.z.dot(eye);
},
this.n11 = x.x;
this.n12 = x.y;
this.n13 = x.z;
this.n14 = -x.dot(eye);
this.n21 = y.x;
this.n22 = y.y;
this.n23 = y.z;
this.n24 = -y.dot(eye);
this.n31 = z.x;
this.n32 = z.y;
this.n33 = z.z;
this.n34 = -z.dot(eye);
}
transform: function(v)
{
var vx = v.x, vy = v.y, vz = v.z;
this.transform = function (v) {
var vx = v.x, vy = v.y, vz = v.z, vw = (v.w ? v.w : 1.0);
v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14;
v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24;
v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34;
},
v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw;
multiply: function(a, b)
{
this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31;
this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32;
this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33;
this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14;
vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31;
this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32;
this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33;
this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24;
if(v.w) {
v.w = vw;
} else {
v.x = v.x / vw;
v.y = v.y / vw;
v.z = v.z / vw;
}
}
this.crossVector = function (a) {
var v = new THREE.Vector4();
v.x = this.n11 * a.x + this.n12 * a.y + this.n13 * a.z + this.n14 * a.w;
v.y = this.n21 * a.x + this.n22 * a.y + this.n23 * a.z + this.n24 * a.w;
v.z = this.n31 * a.x + this.n32 * a.y + this.n33 * a.z + this.n34 * a.w;
v.w = (a.w) ? this.n41 * a.x + this.n42 * a.y + this.n43 * a.z + this.n44 * a.w : 1;
return v;
}
this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31;
this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32;
this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33;
this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34;
},
this.multiply = function (a, b) {
this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41;
this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42;
this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43;
this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44;
multiplySelf: function(m)
{
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41;
this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42;
this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n34;
this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44;
this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31;
this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32;
this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33;
this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14;
this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41;
this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42;
this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43;
this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44;
this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31;
this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32;
this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33;
this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24;
this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41;
this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42;
this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43;
this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44;
}
this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31;
this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32;
this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33;
this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34;
},
this.multiplySelf = function (m) {
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14,
n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24,
n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34,
n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44;
clone: function()
{
var m = new Matrix4();
this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41;
this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42;
this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43;
this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44;
this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41;
this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42;
this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43;
this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44;
this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41;
this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42;
this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43;
this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44;
this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41;
this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42;
this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43;
this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44;
}
this.clone = function () {
var m = new THREE.Matrix4();
m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44;
return m;
},
}
toString: function()
{
this.toString = function() {
return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +
"| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n" +
"| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |";
"| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |\n" +
"| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |";
}
});
}
Matrix4.translationMatrix = function(x, y, z)
{
var m = new Matrix4();
THREE.Matrix4.translationMatrix = function (x, y, z) {
var m = new THREE.Matrix4();
m.n14 = x;
m.n24 = y;
@@ -128,9 +163,9 @@ Matrix4.translationMatrix = function(x, y, z)
return m;
}
Matrix4.scaleMatrix = function(x, y, z)
{
var m = new Matrix4();
THREE.Matrix4.scaleMatrix = function (x, y, z) {
var m = new THREE.Matrix4();
m.n11 = x;
m.n22 = y;
@@ -139,9 +174,9 @@ Matrix4.scaleMatrix = function(x, y, z)
return m;
}
Matrix4.rotationXMatrix = function(theta)
{
var rot = new Matrix4();
THREE.Matrix4.rotationXMatrix = function (theta) {
var rot = new THREE.Matrix4();
rot.n22 = rot.n33 = Math.cos(theta);
rot.n32 = Math.sin(theta);
@@ -150,9 +185,9 @@ Matrix4.rotationXMatrix = function(theta)
return rot;
}
Matrix4.rotationYMatrix = function(theta)
{
var rot = new Matrix4();
THREE.Matrix4.rotationYMatrix = function (theta) {
var rot = new THREE.Matrix4();
rot.n11 = rot.n33 = Math.cos(theta);
rot.n13 = Math.sin(theta);
@@ -161,9 +196,9 @@ Matrix4.rotationYMatrix = function(theta)
return rot;
}
Matrix4.rotationZMatrix = function(theta)
{
var rot = new Matrix4();
THREE.Matrix4.rotationZMatrix = function(theta) {
var rot = new THREE.Matrix4();
rot.n11 = rot.n22 = Math.cos(theta);
rot.n21 = Math.sin(theta);
@@ -171,3 +206,32 @@ Matrix4.rotationZMatrix = function(theta)
return rot;
}
THREE.Matrix4.makeFrustum = function(left,right,bottom,top,near,far) {
var m = new THREE.Matrix4(),
x = 2 * near / (right - left),
y = 2 * near / (top - bottom),
a = (right + left) / (right - left),
b = (top + bottom) / (top - bottom),
c = -(far + near) / (far - near),
d = -2 * far * near / (far - near);
m.n11 = x; m.n13 = a;
m.n22 = y; m.n23 = b;
m.n33 = c; m.n34 = d;
m.n43 = -1; m.n44 = 0;
return m;
}
THREE.Matrix4.makePerspective = function(fovy, aspect, near, far) {
var ymax = near * Math.tan(fovy * 0.00872664625972),
ymin = -ymax,
xmin = ymin * aspect,
xmax = ymax * aspect;
return THREE.Matrix4.makeFrustum(xmin, xmax, ymin, ymax, near, far);
}
src/core/Vector2.js
+50 -71
View File
@@ -1,100 +1,79 @@
var Vector2 = Class.extend
({
x: null, y: null,
THREE.Vector2 = function (x, y) {
this.x = x || 0;
this.y = y || 0;
this.copy = function (v) {
init: function(x, y)
{
this.x = x ? x : 0;
this.y = y ? y : 0;
},
copy: function(v)
{
this.x = v.x;
this.y = v.y;
},
}
this.addSelf = function (v) {
addSelf: function(v)
{
this.x += v.x;
this.y += v.y;
},
}
add: function(v1, v2)
{
this.add = function (v1, v2) {
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
},
}
this.subSelf = function (v) {
subSelf: function(v)
{
this.x -= v.x;
this.y -= v.y;
},
}
sub: function(v1, v2)
{
this.sub = function (v1, v2) {
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
},
}
this.multiply = function (s) {
multiply: function(s)
{
this.x *= s;
this.y *= s;
},
}
this.unit = function () {
unit: function()
{
this.multiply(1 / this.length());
},
}
this.expand = function(v1, v2) {
expand: function(v1, v2)
{
this.unit( this.sub(v2, v1) );
v2.addSelf(this);
// v1.subSelf(this);
},
}
length: function()
{
this.length = function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
lengthSq: function()
{
return this.x * this.x + this.y * this.y;
},
negate: function()
{
this.x = -this.x;
this.y = -this.y;
},
clone: function()
{
return new Vector2(this.x, this.y);
},
toString: function()
{
return 'Vector2 (' + this.x + ', ' + this.y + ')';
}
});
Vector2.add = function(a, b)
{
return new Vector2( a.x + b.x, a.y + b.y );
}
Vector2.sub = function(a, b)
{
return new Vector2( a.x - b.x, a.y - b.y );
}
Vector2.multiply = function(a, s)
{
return new Vector2( a.x * s, a.y * s );
this.lengthSq = function () {
return this.x * this.x + this.y * this.y;
}
this.negate = function() {
this.x = -this.x;
this.y = -this.y;
}
this.clone = function () {
return new THREE.Vector2(this.x, this.y);
}
this.toString = function () {
return 'THREE.Vector2 (' + this.x + ', ' + this.y + ')';
}
}
src/core/Vector3.js
+81 -127
View File
@@ -1,159 +1,113 @@
var Vector3 = Class.extend
({
x: null, y: null, z: null,
// sx: null, sy: null, sz: null,
// userData: null,
dx: null, dy: null, dz: null,
tx: null, ty: null, tz: null,
// oll: null,
init: function(x, y, z)
{
this.x = x ? x : 0;
this.y = y ? y : 0;
this.z = z ? z : 0;
},
THREE.Vector3 = function (x, y, z) {
copy: function(v)
{
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
this.copy = function (v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
},
}
this.add = function(v1, v2) {
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
this.z = v1.z + v2.z;
}
this.addSelf = function (v) {
addSelf: function(v)
{
this.x += v.x;
this.y += v.y;
this.z += v.z;
},
}
add: function(v1, v2)
{
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
this.z = v1.z + v2.z;
},
this.sub = function(v1, v2) {
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
this.z = v1.z - v2.z;
}
this.subSelf = function (v) {
subSelf: function(v)
{
this.x -= v.x;
this.y -= v.y;
this.z -= v.z;
},
sub: function(v1, v2)
{
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
this.z = v1.z - v2.z;
},
}
cross: function(v)
{
this.tx = this.x;
this.ty = this.y;
this.tz = this.z;
this.cross = function (v) {
var tx = this.x, ty = this.y, tz = this.z;
this.x = this.ty * v.z - this.tz * v.y;
this.y = this.tz * v.x - this.tx * v.z;
this.z = this.tx * v.y - this.ty * v.x;
},
this.x = ty * v.z - tz * v.y;
this.y = tz * v.x - tx * v.z;
this.z = tx * v.y - ty * v.x;
}
this.multiply = function (s) {
multiply: function(s)
{
this.x *= s;
this.y *= s;
this.z *= s;
},
}
distanceTo: function(v)
{
this.dx = this.x - v.x;
this.dy = this.y - v.y;
this.dz = this.z - v.z;
return Math.sqrt(this.dx * this.dx + this.dy * this.dy + this.dz * this.dz);
},
this.distanceTo = function (v) {
distanceToSquared: function(v)
{
this.dx = this.x - v.x;
this.dy = this.y - v.y;
this.dz = this.z - v.z;
return this.dx * this.dx + this.dy * this.dy + this.dz * this.dz;
},
var dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
return Math.sqrt(dx * dx + dy * dy + dz * dz);
}
this.distanceToSquared = function (v) {
var dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
return dx * dx + dy * dy + dz * dz;
}
this.length = function () {
length: function()
{
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
},
}
this.lengthSq = function () {
lengthSq: function()
{
return this.x * this.x + this.y * this.y + this.z * this.z;
},
}
this.negate = function () {
negate: function()
{
this.x = -this.x;
this.y = -this.y;
this.z = -this.z;
},
normalize: function()
{
if (this.length() > 0)
this.ool = 1.0 / this.length();
else
this.ool = 0;
this.x *= this.ool;
this.y *= this.ool;
this.z *= this.ool;
return this;
},
dot: function(v)
{
return this.x * v.x + this.y * v.y + this.z * v.z;
},
clone: function()
{
return new Vector3(this.x, this.y, this.z);
},
toString: function()
{
return 'Vector3 (' + this.x + ', ' + this.y + ', ' + this.z + ')';
}
});
Vector3.add = function(a, b)
{
return new Vector3( a.x + b.x, a.y + b.y, a.z + b.z );
}
Vector3.sub = function(a, b)
{
return new Vector3( a.x - b.x, a.y - b.y, a.z - b.z );
}
Vector3.multiply = function(a, s)
{
return new Vector3( a.x * s, a.y * s, a.z * s );
}
Vector3.cross = function(a, b)
{
return new Vector3( a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x );
}
Vector3.dot = function(a, b)
{
return a.x * b.x + a.y * b.y + a.z * b.z;
this.normalize = function () {
if (this.length() > 0) {
this.multiply(1 / this.length());
} else {
this.multiply(0);
}
}
this.dot = function (v) {
return this.x * v.x + this.y * v.y + this.z * v.z;
}
this.clone = function () {
return new Vector3(this.x, this.y, this.z);
}
this.toString = function () {
return 'THREE.Vector3 (' + this.x + ', ' + this.y + ', ' + this.z + ')';
}
}
src/core/Vector4.js
+42 -65
View File
@@ -1,85 +1,62 @@
var Vector4 = Class.extend
({
x: null, y: null, z: null, w: null,
// sx: null, sy: null, sz: null,
// userData: null,
THREE.Vector4 = function (x, y, z, w) {
dx: null, dy: null, dz: null,
tx: null, ty: null, tz: null,
// oll: null,
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
this.w = w || 1;
init: function(x, y, z, w)
{
this.x = x ? x : 0;
this.y = y ? y : 0;
this.z = z ? z : 0;
this.w = w ? w : 1;
},
copy: function(v)
{
this.copy = function (v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
this.w = v.w;
},
}
addSelf: function(v)
{
this.add = function (v1, v2) {
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
this.z = v1.z + v2.z;
this.w = v1.w + v2.w;
}
this.addSelf = function (v) {
this.x += v.x;
this.y += v.y;
this.z += v.z;
this.w += v.w;
},
}
add: function(v1, v2)
{
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
this.z = v1.z + v2.z;
this.w = v1.w + v2.w;
},
subSelf: function(v)
{
this.sub = function (v1, v2) {
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
this.z = v1.z - v2.z;
this.w = v1.w - v2.w;
}
this.subSelf = function (v) {
this.x -= v.x;
this.y -= v.y;
this.z -= v.z;
this.w -= v.w;
},
sub: function(v1, v2)
{
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
this.z = v1.z - v2.z;
this.w = v1.w - v2.w;
},
clone: function()
{
return new Vector4(this.x, this.y, this.z, this.w);
},
toString: function()
{
return 'Vector4 (' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ')';
},
toVector3: function()
{
return new Vector3(this.x/this.w,this.y/this.w,this.z/this.w);
}
});
this.clone = function () {
return new THREE.Vector4(this.x, this.y, this.z, this.w);
}
this.toVector3 = function () {
Vector4.add = function(a, b)
{
return new Vector3( a.x + b.x, a.y + b.y, a.z + b.z , a.w + b.w );
return new THREE.Vector3(this.x / this.w, this.y / this.w, this.z / this.w);
}
this.toString = function () {
return 'THREE.Vector4 (' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ')';
}
}
Vector4.sub = function(a, b)
{
return new Vector3( a.x - b.x, a.y - b.y, a.z - b.z , a.w - b.w );
}
src/core/Vertex.js
+10 -15
View File
@@ -1,18 +1,13 @@
var Vertex = Vector3.extend
({
u: null, v: null,
screen: null,
normal : null,
visible: null,
THREE.Vertex = function (position, normal) {
init: function(x, y, z)
{
this._super(x, y, z);
this.screen = new Vector3();
},
this.position = position || new THREE.Vector3();
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.visible = true; // internal
toString: function()
{
return 'Vertex ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
this.toString = function () {
return 'THREE.Vertex ( ' + this.position + ', ' + this.normal + ' )';
}
});
}
src/materials/ColorFillMaterial.js
Executable
+9
View File
@@ -0,0 +1,9 @@
THREE.ColorFillMaterial = function (hex, opacity) {
this.color = new THREE.Color( (opacity ? (opacity * 0xff) << 24 : 0xff000000) | hex );
this.toString = function () {
return 'THREE.ColorFillMaterial ( color: ' + this.color + ' )';
}
}
src/materials/ColorMaterial.js
-9
View File
@@ -1,9 +0,0 @@
var ColorMaterial = Class.extend
({
color: null,
init: function( hex, opacity )
{
this.color = new Color( (opacity ? (opacity * 0xff) << 24 : 0xff000000) | hex );
}
});
src/materials/ColorStrokeMaterial.js
Executable
+10
View File
@@ -0,0 +1,10 @@
THREE.ColorStrokeMaterial = function (hex, opacity, lineWidth) {
this.lineWidth = lineWidth || 1;
this.color = new THREE.Color( (opacity ? (opacity * 0xff) << 24 : 0xff000000) | hex );
this.toString = function () {
return 'THREE.ColorStrokeMaterial ( lineWidth: ' + this.lineWidth + ', color: ' + this.color + ' )';
}
}
src/materials/FaceColorFillMaterial.js
Executable
+8
View File
@@ -0,0 +1,8 @@
THREE.FaceColorFillMaterial = function () {
this.toString = function () {
return 'THREE.FaceColorFillMaterial ( )';
}
}
src/materials/FaceColorMaterial.js
-3
View File
@@ -1,3 +0,0 @@
var FaceColorMaterial = Class.extend
({
});
src/materials/FaceColorStrokeMaterial.js
Executable
+10
View File
@@ -0,0 +1,10 @@
THREE.FaceColorStrokeMaterial = function (lineWidth) {
this.lineWidth = lineWidth || 1;
this.toString = function () {
return 'THREE.FaceColorStrokeMaterial ( lineWidth: ' + this.lineWidth + ' )';
}
}
src/objects/Line.js
Executable
+10
View File
@@ -0,0 +1,10 @@
THREE.Line = function (geometry, material) {
THREE.Object3D.call(this, material);
this.geometry = geometry;
}
THREE.Line.prototype = new THREE.Object3D();
THREE.Line.prototype.constructor = THREE.Line;
src/objects/Mesh.js
+11 -13
View File
@@ -1,14 +1,12 @@
var Mesh = Object3D.extend
({
geometry: null,
material: null,
doubleSide: null,
THREE.Mesh = function (geometry, material) {
init: function( geometry, material )
{
this._super();
this.geometry = geometry;
this.material = material;
}
});
THREE.Object3D.call(this, material);
this.geometry = geometry;
this.doubleSided = false;
}
THREE.Mesh.prototype = new THREE.Object3D();
THREE.Mesh.prototype.constructor = THREE.Mesh;
src/objects/Object3D.js
+17 -23
View File
@@ -1,29 +1,23 @@
var Object3D = Class.extend
({
position: null,
rotation: null,
scale: null,
THREE.Object3D = function (material) {
matrix: null,
screen: null,
this.position = new THREE.Vector3(0, 0, 0);
this.rotation = new THREE.Vector3(0, 0, 0);
this.scale = new THREE.Vector3(1, 1, 1);
init: function()
{
this.position = new Vector3(0, 0, 0);
this.rotation = new Vector3(0, 0, 0);
this.scale = new Vector3(1, 1, 1);
this.matrix = new THREE.Matrix4();
this.screen = new THREE.Vector3(0, 0, 0);
this.material = material instanceof Array ? material : [material];
this.matrix = new Matrix4();
this.screen = new Vector3(0, 0, 0);
},
this.updateMatrix = function () {
updateMatrix: function()
{
this.matrix.identity();
␍ this.matrix.multiplySelf( Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z) );
this.matrix.multiplySelf( Matrix4.rotationXMatrix( this.rotation.x ) );
this.matrix.multiplySelf( Matrix4.rotationYMatrix( this.rotation.y ) );
this.matrix.multiplySelf( Matrix4.rotationZMatrix( this.rotation.z ) );
this.matrix.multiplySelf( Matrix4.scaleMatrix( this.scale.x, this.scale.y, this.scale.z ) );
this.matrix.multiplySelf(THREE.Matrix4.translationMatrix(this.position.x, this.position.y, this.position.z));
this.matrix.multiplySelf(THREE.Matrix4.rotationXMatrix(this.rotation.x));
this.matrix.multiplySelf(THREE.Matrix4.rotationYMatrix(this.rotation.y));
this.matrix.multiplySelf(THREE.Matrix4.rotationZMatrix(this.rotation.z));
this.matrix.multiplySelf(THREE.Matrix4.scaleMatrix(this.scale.x, this.scale.y, this.scale.z));
}
});
}
src/objects/Particle.js
+8 -10
View File
@@ -1,11 +1,9 @@
var Particle = Object3D.extend
({
size: 1,
material: null,
THREE.Particle = function (material) {
init: function( material )
{
this._super();
this.material = material;
}
});
THREE.Object3D.call(this, material);
this.size = 1;
}
THREE.Particle.prototype = new THREE.Object3D();
THREE.Particle.prototype.constructor = THREE.Particle;
src/objects/primitives/Cube.js
-37
View File
@@ -1,37 +0,0 @@
var Cube = Geometry.extend
({
init: function( width, height, depth )
{
this._super();
var width_half = width / 2;
var height_half = height / 2;
var depth_half = depth / 2;
this.v( width_half, height_half, -depth_half );
this.v( width_half, -height_half, -depth_half );
this.v( -width_half, -height_half, -depth_half );
this.v( -width_half, height_half, -depth_half );
this.v( width_half, height_half, depth_half );
this.v( width_half, -height_half, depth_half );
this.v( -width_half, -height_half, depth_half );
this.v( -width_half, height_half, depth_half );
this.f4( 0, 1, 2, 3 );
this.f4( 4, 7, 6, 5 );
this.f4( 0, 4, 5, 1 );
this.f4( 1, 5, 6, 2 );
this.f4( 2, 6, 7, 3 );
this.f4( 4, 0, 3, 7 );
},
v: function( x, y, z )
{
this.vertices.push( new Vertex( x, y, z ) );
},
f4: function( a, b, c, d )
{
this.faces.push( new Face4( this.vertices[a], this.vertices[b], this.vertices[c], this.vertices[d] ) );
}
});
src/objects/primitives/Plane.js
-27
View File
@@ -1,27 +0,0 @@
var Plane = Geometry.extend
({
init: function( width, height )
{
this._super();
var width_half = width / 2;
var height_half = height / 2;
this.v( -width_half, height_half, 0 );
this.v( width_half, height_half, 0 );
this.v( width_half, -height_half, 0 );
this.v( -width_half, -height_half, 0 );
this.f4( 0, 1, 2, 3 );
},
v: function( x, y, z )
{
this.vertices.push( new Vertex( x, y, z ) );
},
f4: function( a, b, c, d )
{
this.faces.push( new Face4( this.vertices[a], this.vertices[b], this.vertices[c], this.vertices[d] ) );
}
});
src/renderers/CanvasRenderer.js
+85 -63
View File
@@ -1,75 +1,97 @@
var CanvasRenderer = Renderer.extend
({
context: null,
THREE.CanvasRenderer = function () {
init: function()
{
this._super();
THREE.Renderer.call(this);
this.viewport = document.createElement("canvas");
this.viewport.style.position = "absolute";
this.context = this.viewport.getContext("2d");
},
setSize: function( width, height )
{
this._super( width, height );
this.viewport.width = this.width;
this.viewport.height = this.height;
var viewport = document.createElement("canvas"),
context = viewport.getContext("2d");
this.setSize = function (width, height) {
viewport.width = width;
viewport.height = height;
this.context.setTransform(1, 0, 0, 1, this.widthHalf, this.heightHalf);
},
context.setTransform(1, 0, 0, 1, width / 2, height / 2);
}
this.domElement = viewport;
render: function( scene, camera )
{
this._super( scene, camera );
this.render = function (scene, camera) {
var i, j, element, pi2 = Math.PI * 2,
elementsLength, material, materialLength;
var element , pi2 = Math.PI * 2;
context.clearRect (-viewport.width / 2, -viewport.height / 2, viewport.width, viewport.height);
this.context.clearRect (-this.widthHalf, -this.heightHalf, this.width, this.height);
this.project(scene, camera);
elementsLength = this.renderList.length;
for (j = 0; j < this.renderList.length; j++)
{
element = this.renderList[j];
for (i = 0; i < elementsLength; i++) {
element = this.renderList[i];
materialLength = element.material.length;
for (j = 0; j < materialLength; j++) {
material = element.material[j];
if (element.material instanceof ColorMaterial)
{
this.context.fillStyle = element.material.color.styleString;
}
else if (element.material instanceof FaceColorMaterial)
{
this.context.fillStyle = element.color.styleString;
}
context.beginPath();
if (element instanceof THREE.RenderableFace3) {
if (element instanceof Face3)
{
this.context.beginPath();
this.context.moveTo(element.a.screen.x, element.a.screen.y);
this.context.lineTo(element.b.screen.x, element.b.screen.y);
this.context.lineTo(element.c.screen.x, element.c.screen.y);
this.context.fill();
this.context.closePath();
}
else if (element instanceof Face4)
{
this.context.beginPath();
this.context.moveTo(element.a.screen.x, element.a.screen.y);
this.context.lineTo(element.b.screen.x, element.b.screen.y);
this.context.lineTo(element.c.screen.x, element.c.screen.y);
this.context.lineTo(element.d.screen.x, element.d.screen.y);
this.context.fill();
this.context.closePath();
}
else if (element instanceof Particle)
{
this.context.beginPath();
this.context.arc(element.screen.x, element.screen.y, element.size * element.screen.z, 0, pi2, true);
this.context.fill();
this.context.closePath();
}
context.moveTo(element.v1.x, element.v1.y);
context.lineTo(element.v2.x, element.v2.y);
context.lineTo(element.v3.x, element.v3.y);
context.lineTo(element.v1.x, element.v1.y);
} else if (element instanceof THREE.RenderableFace4) {
context.moveTo(element.v1.x, element.v1.y);
context.lineTo(element.v2.x, element.v2.y);
context.lineTo(element.v3.x, element.v3.y);
context.lineTo(element.v4.x, element.v4.y);
context.lineTo(element.v1.x, element.v1.y);
} else if (element instanceof THREE.RenderableParticle) {
context.arc(element.x, element.y, element.size * element.screenZ, 0, pi2, true);
}
if (material instanceof THREE.ColorFillMaterial) {
context.fillStyle = material.color.styleString;
context.fill();
} else if (material instanceof THREE.FaceColorFillMaterial) {
context.fillStyle = element.color.styleString;
context.fill();
} else if (material instanceof THREE.ColorStrokeMaterial) {
context.lineWidth = material.lineWidth;
context.lineJoin = "round";
context.lineCap = "round";
context.strokeStyle = material.color.styleString;
context.stroke();
} else if (material instanceof THREE.FaceColorStrokeMaterial) {
context.lineWidth = material.lineWidth;
context.lineJoin = "round";
context.lineCap = "round";
context.strokeStyle = element.color.styleString;
context.stroke();
}
context.closePath();
}
}
}
});
}
THREE.CanvasRenderer.prototype = new THREE.Renderer();
THREE.CanvasRenderer.prototype.constructor = THREE.CanvasRenderer;
src/renderers/GLRenderer.js
+2 -1
View File
@@ -1,6 +1,7 @@
/* TODO: Refactoring */
var GLRenderer = Renderer.extend
({
init: function()
{
this._super();
src/renderers/Renderer.js
+115 -100
View File
@@ -1,68 +1,48 @@
var Renderer = Class.extend
({
matrix: null,
THREE.Renderer = function() {
viewport: null,
renderList: null,
var face3Pool = [],
face4Pool = [],
particlePool = [],
face3Pool: null,
face4Pool: null,
matrix = new THREE.Matrix4();
width: null,
height: null,
widthHalf: null,
heightHalf: null,
this.renderList;
init: function()
{
this.matrix = new Matrix4();
function sort(a, b) {
return a.screenZ - b.screenZ;
}
this.face3Pool = new Array();
this.face4Pool = new Array();
},
this.project = function (scene, camera) {
var i, j, vertex, face, object, v1, v2, v3, v4,
face3count = 0, face4count = 0, particleCount = 0,
camerafocus = camera.focus, focuszoom = camera.focus * camera.zoom,
verticesLength = 0, facesLength = 0;
setSize: function( width, height )
{
this.width = width;
this.height = height;
this.renderList = [];
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;
this.renderList = new Array();
for (var i = 0; i < scene.objects.length; i++)
{
for (i = 0; i < scene.objects.length; i++) {
object = scene.objects[i];
if (object instanceof Mesh)
{
this.matrix.multiply( camera.matrix, object.matrix );
if (object instanceof THREE.Mesh) {
matrix.multiply(camera.matrix, object.matrix);
// vertices
for (var j = 0; j < object.geometry.vertices.length; j++)
{
verticesLength = object.geometry.vertices.length;
for (j = 0; j < verticesLength; j++) {
vertex = object.geometry.vertices[j];
vertex.screen.copy( vertex );
vertex.screen.copy(vertex.position);
this.matrix.transform( vertex.screen );
matrix.transform(vertex.screen);
vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
vertex.screen.z = focuszoom / (camerafocus + vertex.screen.z);
vertex.visible = vertex.screen.z > 0;
@@ -72,81 +52,116 @@ var Renderer = Class.extend
// faces
for (j = 0; j < object.geometry.faces.length; j++)
{
facesLength = object.geometry.faces.length;
for (j = 0; j < facesLength; 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 (face instanceof THREE.Face3) {
v1 = object.geometry.vertices[face.a];
v2 = object.geometry.vertices[face.b];
v3 = object.geometry.vertices[face.c];
if (v1.visible && v2.visible && v3.visible && (object.doubleSided ||
(v3.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
(v3.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0) ) {
face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z) * 0.3;
if (this.face3Pool[face3count] == null)
this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
if (face3Pool[face3count] == null)
face3Pool[face3count] = new THREE.RenderableFace3();
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;
face3Pool[face3count].v1.x = v1.screen.x;
face3Pool[face3count].v1.y = v1.screen.y;
face3Pool[face3count].v2.x = v2.screen.x;
face3Pool[face3count].v2.y = v2.screen.y;
face3Pool[face3count].v3.x = v3.screen.x;
face3Pool[face3count].v3.y = v3.screen.y;
face3Pool[face3count].screenZ = face.screen.z;
face3Pool[face3count].color = face.color;
face3Pool[face3count].material = object.material;
this.renderList.push( this.face3Pool[face3count] );
this.renderList.push(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;
} else if (face instanceof THREE.Face4) {
if (this.face4Pool[face4count] == null)
this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
v1 = object.geometry.vertices[face.a];
v2 = object.geometry.vertices[face.b];
v3 = object.geometry.vertices[face.c];
v4 = object.geometry.vertices[face.d];
if (v1.visible && v2.visible && v3.visible && v4.visible && (object.doubleSided ||
((v4.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
(v4.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0 ||
(v2.screen.x - v3.screen.x) * (v4.screen.y - v3.screen.y) -
(v2.screen.y - v3.screen.y) * (v4.screen.x - v3.screen.x) > 0)) ) {
face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z + v4.screen.z) * 0.25;
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;
if (face4Pool[face4count] == null)
face4Pool[face4count] = new THREE.RenderableFace4();
this.renderList.push( this.face4Pool[face4count] );
face4Pool[face4count].v1.x = v1.screen.x;
face4Pool[face4count].v1.y = v1.screen.y;
face4Pool[face4count].v2.x = v2.screen.x;
face4Pool[face4count].v2.y = v2.screen.y;
face4Pool[face4count].v3.x = v3.screen.x;
face4Pool[face4count].v3.y = v3.screen.y;
face4Pool[face4count].v4.x = v4.screen.x;
face4Pool[face4count].v4.y = v4.screen.y;
face4Pool[face4count].screenZ = face.screen.z;
face4Pool[face4count].color = face.color;
face4Pool[face4count].material = object.material;
this.renderList.push(face4Pool[face4count]);
face4count++;
}
}
}
}
}
else if (object instanceof Particle)
{
} else if (object instanceof THREE.Particle) {
object.screen.copy(object.position);
camera.matrix.transform(object.screen);
object.screen.z = focuszoom / (camerafocus + object.screen.z);
camera.matrix.transform( object.screen );
object.screen.z = focuszoom / (camera.focus + object.screen.z);
if (object.screen.z < 0)
continue;
if (object.screen.z < 0) {
continue;
}
object.screen.x *= object.screen.z;
object.screen.y *= object.screen.z;
this.renderList.push( object );
if (particlePool[particleCount] == null)
particlePool[particleCount] = new THREE.RenderableParticle();
particlePool[particleCount].x = object.screen.x;
particlePool[particleCount].y = object.screen.y;
particlePool[particleCount].screenZ = object.screen.z;
particlePool[particleCount].size = object.size;
particlePool[particleCount].material = object.material;
particlePool[particleCount].color = object.color;
this.renderList.push( particlePool[particleCount] );
particleCount++;
}
}
this.renderList.sort(this.sort);
this.renderList.sort(sort);
}
});
}
src/renderers/SVGRenderer.js
+103 -89
View File
@@ -1,94 +1,108 @@
var SVGRenderer = Renderer.extend
({
svgPathPool: null,
svgCirclePool: null,
THREE.SVGRenderer = function () {
init: function()
{
this._super();
this.viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.viewport.style.position = "absolute";
this.svgPathPool = new Array();
this.svgCirclePool = new Array();
},
setSize: function( width, height )
{
this.viewport.setAttribute('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height );
this.viewport.setAttribute('width', width);
this.viewport.setAttribute('height', height);
},
THREE.Renderer.call(this);
render: function( scene, camera )
{
this._super( scene, camera );
var viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
svgPathPool = [], svgCirclePool = [];
while (this.viewport.childNodes.length > 0)
{
this.viewport.removeChild(this.viewport.childNodes[0]);
}
var pathCount = 0, circleCount = 0, svgNode;
for (j = 0; j < this.renderList.length; j++)
{
element = this.renderList[j];
if (element instanceof Face3)
{
svgNode = this.getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + 'z');
}
else if (element instanceof Face4)
{
svgNode = this.getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + ' L ' + element.d.screen.x + ',' + element.d.screen.y + 'z');
}
else if (element instanceof Particle)
{
svgNode = this.getCircleNode(circleCount++);
svgNode.setAttribute('cx', element.screen.x);
svgNode.setAttribute('cy', element.screen.y);
svgNode.setAttribute('r', element.size * element.screen.z);
}
if (element.material instanceof ColorMaterial)
{
svgNode.setAttribute('style', 'fill: rgb(' + element.material.color.r + ',' + element.material.color.g + ',' + element.material.color.b + ')');
}
else if (element.material instanceof FaceColorMaterial)
{
svgNode.setAttribute('style', 'fill: rgb(' + element.color.r + ',' + element.color.g + ',' + element.color.b + ')');
}
this.viewport.appendChild(svgNode);
}
},
this.setSize = function (width, height) {
getPathNode: function( id )
{
if (this.svgPathPool[id] == null)
{
this.svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// this.svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
return this.svgPathPool[id];
}
return this.svgPathPool[id];
},
getCircleNode: function( id )
{
if (this.svgCirclePool[id] == null)
{
this.svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
// this.svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
this.svgCirclePool[id].setAttribute('fill', 'red');
return this.svgCirclePool[id];
}
return this.svgCirclePool[id];
viewport.setAttribute('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height );
viewport.setAttribute('width', width);
viewport.setAttribute('height', height);
}
});
this.domElement = viewport;
this.render = function (scene, camera) {
var i, j, element, elementsLength, material, materialLength,
pathCount = 0, circleCount = 0, svgNode;
this.project(scene, camera);
while (viewport.childNodes.length > 0) {
viewport.removeChild(viewport.childNodes[0]);
}
elementsLength = this.renderList.length;
for (i = 0; i < elementsLength; i++) {
element = this.renderList[i];
materialLength = element.material.length;
for (j = 0; j < materialLength; j++) {
material = element.material[j];
if (element instanceof THREE.RenderableFace3) {
svgNode = getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.v1.x + ' ' + element.v1.y + ' L ' + element.v2.x + ' ' + element.v2.y + ' L ' + element.v3.x + ',' + element.v3.y + 'z');
} else if (element instanceof THREE.RenderableFace4) {
svgNode = getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.v1.x + ' ' + element.v1.y + ' L ' + element.v2.x + ' ' + element.v2.y + ' L ' + element.v3.x + ',' + element.v3.y + ' L ' + element.v4.x + ',' + element.v4.y + 'z');
} else if (element instanceof THREE.RenderableParticle) {
svgNode = getCircleNode(circleCount++);
svgNode.setAttribute('cx', element.x);
svgNode.setAttribute('cy', element.y);
svgNode.setAttribute('r', element.size * element.screenZ);
}
if (material instanceof THREE.ColorFillMaterial) {
svgNode.setAttribute('style', 'fill: ' + material.color.styleString + '; stroke-width:10');
} else if (material instanceof THREE.FaceColorFillMaterial) {
svgNode.setAttribute('style', 'fill: ' + element.color.styleString + '; stroke-width:10');
} else if (material instanceof THREE.ColorStrokeMaterial) {
svgNode.setAttribute('style', 'fill: none; stroke: ' + material.color.styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
} else if (material instanceof THREE.FaceColorStrokeMaterial) {
svgNode.setAttribute('style', 'fill: none; stroke: ' + element.color.styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round');
}
viewport.appendChild(svgNode);
}
}
}
function getPathNode(id) {
if (svgPathPool[id] == null) {
svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
return svgPathPool[id];
}
return svgPathPool[id];
}
function getCircleNode(id) {
if (svgCirclePool[id] == null) {
svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
// svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
// svgCirclePool[id].setAttribute('fill', 'red');
return svgCirclePool[id];
}
return svgCirclePool[id];
}
}
THREE.SVGRenderer.prototype = new THREE.Renderer();
THREE.SVGRenderer.prototype.constructor = THREE.CanvasRenderer;
src/renderers/renderables/RenderableFace3.js
+11
View File
@@ -0,0 +1,11 @@
THREE.RenderableFace3 = function () {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.screenZ;
this.color;
this.material;
}
src/renderers/renderables/RenderableFace4.js
+12
View File
@@ -0,0 +1,12 @@
THREE.RenderableFace4 = function () {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.v4 = new THREE.Vector2();
this.screenZ;
this.color;
this.material;
}
src/renderers/renderables/RenderableParticle.js
+9
View File
@@ -0,0 +1,9 @@
THREE.RenderableParticle = function () {
this.x;
this.y;
this.screenZ;
this.color;
this.material;
}
src/scenes/Scene.js
+26 -23
View File
@@ -1,26 +1,29 @@
var Scene = Class.extend
({
objects: null,
THREE.Scene = function () {
init: function()
{
this.objects = new Array();
},
this.objects = [];
add: function( object )
{
this.objects.push( object );
},
remove: function( object )
{
for(var i = 0; i < this.objects.length; i++)
if(object == this.objects[i])
alert("yay");
},
toString: function()
{
return 'Scene ( ' + this.objects + ' )';
this.add = function (object) {
this.objects.push(object);
}
});
/*
this.remove = function (object) {
var nrObjects = this.objects.length;
for(var i = 0; i < nrObjects; i++) {
if(object == this.objects[i]) {
alert("yay");
}
}
}
*/
this.toString = function () {
return 'THREE.Scene ( ' + this.objects + ' )';
}
}
utils/deployer.py
+26 -20
View File
@@ -1,14 +1,16 @@
import sys
import os
# MERGER
rev = 4;
# MERGER
rev = 5;
files = [];
files.append('Class.js');
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/Matrix4.js');
files.append('core/Vertex.js');
files.append('core/Face3.js');
@@ -16,24 +18,28 @@ files.append('core/Face4.js');
files.append('core/Geometry.js');
files.append('cameras/Camera.js');
files.append('objects/Object3D.js');
files.append('objects/Line.js');
files.append('objects/Mesh.js');
files.append('objects/Particle.js');
files.append('objects/primitives/Plane.js');
files.append('objects/primitives/Cube.js');
files.append('materials/ColorMaterial.js');
files.append('materials/FaceColorMaterial.js');
files.append('materials/ColorFillMaterial.js');
files.append('materials/ColorStrokeMaterial.js');
files.append('materials/FaceColorFillMaterial.js');
files.append('materials/FaceColorStrokeMaterial.js');
files.append('scenes/Scene.js');
files.append('renderers/Renderer.js');
files.append('renderers/CanvasRenderer.js');
files.append('renderers/SVGRenderer.js');
string = '';
for item in files:
src_file = open('../src/' + item,'r');
string += src_file.read() + "\n";
dep_file = open('temp.js','w');
files.append('renderers/renderables/RenderableFace3.js');
files.append('renderers/renderables/RenderableFace4.js');
files.append('renderers/renderables/RenderableParticle.js');
string = '';
for item in files:
src_file = open('../src/' + item,'r');
string += src_file.read() + "\n";
dep_file = open('temp.js','w');
dep_file.write(string);
dep_file.close();
@@ -48,9 +54,9 @@ os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/three.js --char
output = '../build/three.js';
string = "// three.js r" + str(rev) + " - http://github.com/mrdoob/three.js\n";
src_file = open(output,'r');
string += src_file.read();
src_file = open(output,'r');
string += src_file.read();
dep_file = open(output,'w');
dep_file = open(output,'w');
dep_file.write(string);
dep_file.close();