Skip to content

Commit

Permalink
- First version of the WebGLRenderer (ColorFillMaterial and FaceColor…
Browse files Browse the repository at this point in the history
…FillMaterial by now)

- Matrix4.lookAt fix (CanvasRenderer and SVGRenderer now handle the -Y)
- Color class now using 0-1 floats instead of 0-255 integers
  • Loading branch information
mrdoob committed Jul 7, 2010
1 parent dfc82f4 commit 7b385cf
Show file tree
Hide file tree
Showing 17 changed files with 555 additions and 462 deletions.
13 changes: 10 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ three.js

[![Flattr this](http://api.flattr.com/button/button-compact-static-100x17.png)](http://flattr.com/thing/287/three-js)

The aim of this project is to create a 3D engine with a very low level of abstraction (aka for dummies). Currently there is no documentation available but feel free to use the examples as a reference and/or read the source code. However, be aware that the syntax may change from revision to revision breaking compatibility.
The aim of this project is to create a 3D engine with a very low level of abstraction (aka for dummies). Currently there is no documentation available but feel free to use the examples as a reference and/or read the source code. However, be aware that the API may change from revision to revision breaking compatibility.

The engine can render using <canvas> and <svg> by now and WebGL renderer will be available soon.
The engine can render using <canvas> and <svg> and WebGL.

[More info...](http://mrdoob.com/blog/post/693)

Expand Down Expand Up @@ -48,7 +48,7 @@ This code creates a camera, then creates a scene object, adds a bunch of random

function init() {

camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 0.0001, 10000 );
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();
Expand Down Expand Up @@ -121,6 +121,13 @@ Thanks to the power of the internets (and github <3) these people have kindly he

### Change Log ###

2010 07 07 - **r12** (28.494 kb)

* First version of the WebGLRenderer (ColorFillMaterial and FaceColorFillMaterial by now)
* Matrix4.lookAt fix (CanvasRenderer and SVGRenderer now handle the -Y)
* Color class now using 0-1 floats instead of 0-255 integers


2010 07 03 - **r11** (23.541 kb)

* Blender 2.5 exporter (utils/export_threejs.py) now exports UV and normals (Thx [kikko](http://github.com/kikko))
Expand Down
4 changes: 2 additions & 2 deletions build/three.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions examples/geometry_cube.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);

camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
Expand All @@ -74,7 +74,7 @@

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 );
geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
}

cube = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
Expand Down
37 changes: 3 additions & 34 deletions examples/geometry_vr.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,38 +30,7 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</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>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/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/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/BitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/FaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/FaceColorStrokeMaterial.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="../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="../build/three.js"></script>
<script type="text/javascript" src="primitives/Plane.js"></script>

<script type="text/javascript">
Expand All @@ -85,7 +54,7 @@

container = document.getElementById( 'container' );

camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );

scene = new THREE.Scene();

Expand Down Expand Up @@ -173,7 +142,7 @@

isUserInteracting = true;

wireframe.color.setRGBA(255, 255, 255, 0.2);
wireframe.color.setRGBA( 1, 1, 1, 0.2 );

onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
Expand Down
155 changes: 155 additions & 0 deletions examples/lines_sphere.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - floor</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 {
background-color: #000000;
margin: 0px;
overflow: hidden;
}

a {
color:#0078ff;
}
</style>
</head>
<body>

<script type="text/javascript" src="../build/three.js"></script>

<script type="text/javascript">

var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,

mouseX = 0, mouseY = 0,

windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,

SEPARATION = 200,
AMOUNTX = 10,
AMOUNTY = 10,

camera, scene, renderer,

stats;

init();
setInterval(loop, 1000 / 60);

function init() {

var container, separation = 100, amountX = 50, amountY = 50,
particles, particle, material;

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();

renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);

// floor

material = new THREE.ColorFillMaterial(0xffffff, 1);

for (var i = 0; i < 1000; i++) {

particle = new THREE.Particle( material );
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar(Math.random() * 10 + 450);
scene.add( particle );

}

// lines

for (var i = 0; i < 300; i++) {

var geometry = new THREE.Geometry();

var vector = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
vector.normalize();
vector.multiplyScalar(450);

geometry.vertices.push(new THREE.Vertex(vector));

var vector2 = vector.clone();
vector2.multiplyScalar(Math.random() * 0.3 + 1);

geometry.vertices.push(new THREE.Vertex(vector2));

var line = new THREE.Line(geometry, new THREE.ColorStrokeMaterial(1, 0xffffff, Math.random()));
scene.add(line);
}

/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
*/

document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
}

//

function onDocumentMouseMove(event) {

mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}

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) {

event.preventDefault();

mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}

//

function loop() {

camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
camera.updateMatrix();

renderer.render(scene, camera);

// stats.update();
}

</script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/materials_video.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
container.appendChild(info);

camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();
Expand Down
2 changes: 1 addition & 1 deletion examples/particles_floor.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();
Expand Down
2 changes: 1 addition & 1 deletion examples/particles_random.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();
Expand Down
2 changes: 1 addition & 1 deletion examples/particles_waves.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();
Expand Down
29 changes: 15 additions & 14 deletions src/core/Color.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,25 @@

THREE.Color = function ( hex ) {

var _r, _g, _b, _a, _hex;
this.r; this.g; this.b; this.a;
this.hex;

this.__styleString = "rgba(0, 0, 0, 1)";
this.__styleString = 'rgba(0, 0, 0, 1)';

this.setHex = function ( hex ) {

_hex = hex;
this.hex = hex;
this.updateRGBA();
this.updateStyleString();

};

this.setRGBA = function ( r, g, b, a ) {

_r = r;
_g = g;
_b = b;
_a = a;
this.r = r;
this.g = g;
this.b = b;
this.a = a;

this.updateHex();
this.updateStyleString();
Expand All @@ -30,28 +31,28 @@ THREE.Color = function ( hex ) {

this.updateHex = function () {

_hex = Math.floor( _a * 255 ) << 24 | _r << 16 | _g << 8 | _b;
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.updateRGBA = function () {

_r = _hex >> 16 & 0xff;
_g = _hex >> 8 & 0xff;
_b = _hex & 0xff;
_a = (_hex >> 24 & 0xff) / 255;
this.a = ( this.hex >> 24 & 0xff ) / 0xff;
this.r = ( this.hex >> 16 & 0xff ) / 0xff;
this.g = ( this.hex >> 8 & 0xff ) / 0xff;
this.b = ( this.hex & 0xff ) / 0xff;

};

this.updateStyleString = function () {

this.__styleString = 'rgba(' + _r + ',' + _g + ',' + _b + ',' + _a + ')';
this.__styleString = 'rgba(' + Math.floor( this.r * 255 ) + ',' + Math.floor( this.g * 255 ) + ',' + Math.floor( this.b * 255 ) + ',' + this.a + ')';

};

this.toString = function () {

return 'THREE.Color ( r: ' + _r + ', g: ' + _g + ', b: ' + _b + ', a: ' + _a + ', hex: ' + _hex + ' )';
return 'THREE.Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ' )';

};

Expand Down
9 changes: 4 additions & 5 deletions src/core/Matrix4.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ THREE.Matrix4 = function () {

y.cross( z, x );
y.normalize();
y.negate();

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 );
Expand Down Expand Up @@ -225,10 +224,10 @@ THREE.Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
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;
m.n11 = x; m.n12 = 0; m.n13 = a; m.n14 = 0;
m.n21 = 0; m.n22 = y; m.n23 = b; m.n24 = 0;
m.n31 = 0; m.n32 = 0; m.n33 = c; m.n34 = d;
m.n41 = 0; m.n42 = 0; m.n43 = - 1; m.n44 = 0;

return m;

Expand Down

0 comments on commit 7b385cf

Please sign in to comment.