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

- Added Camera3D.autoUpdateMatrix

Browse Source 
- Added Object3D.autoUpdateMatrix
This commit is contained in:
Mr.doob
2010-06-05 21:16:16 +01:00
parent 6c43304a6c
commit 06c7ec335f
10 changed files with 162 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -53,7 +53,6 @@ This code creates a camera, then creates a scene object, adds a bunch of random
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 );
}
@@ -104,10 +103,11 @@ If you are interested on messing with the actual library, instead of importing t
### Change Log ###
2010 06 05 - **r7** (22.225 kb)
2010 06 05 - **r7** (22.387 kb)
* Added Line Object
* Workaround for WebKit not supporting rgba() in SVG yet
* No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (thx (Gregory Athons)[http://github.com/gregmax17])
2010 05 17 - **r6** (21.003 kb)
build/three.js
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/geometry/cube.html
+32 -37
View File
@@ -5,8 +5,7 @@
<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 {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
@@ -17,10 +16,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">
@@ -36,7 +35,7 @@
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
@@ -50,10 +49,10 @@
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';
@@ -61,7 +60,7 @@
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new THREE.Camera(0, 150, 400);
camera.focus = 300;
camera.target.position.y = 150;
@@ -74,22 +73,20 @@
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 THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
cube.position.y = 150;
cube.updateMatrix();
scene.add(cube);
// Plane
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 THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -99,7 +96,7 @@
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);
@@ -108,42 +105,42 @@
//
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;
@@ -152,11 +149,11 @@
}
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
@@ -165,17 +162,15 @@
//
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>
examples/particles/floor.html
+19 -21
View File
@@ -10,16 +10,16 @@
margin: 0px;
overflow: hidden;
}
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">
@@ -50,15 +50,15 @@
setInterval(loop, 1000 / 60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -67,13 +67,12 @@
var material = new THREE.ColorFillMaterial(0xffffff, 1);
for (var ix = 0; ix < AMOUNTX; ix++) {
for(var iy = 0; iy < AMOUNTY; iy++) {
particle = new THREE.Particle( material );
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
particle.updateMatrix();
scene.add( particle );
}
}
@@ -84,7 +83,7 @@
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);
@@ -93,15 +92,15 @@
//
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;
@@ -110,29 +109,28 @@
}
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 - camera.position.y) * .05;
camera.updateMatrix();
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/particles/random.html
+19 -21
View File
@@ -10,16 +10,16 @@
margin: 0px;
overflow: hidden;
}
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">
@@ -47,26 +47,25 @@
setInterval(loop, 1000 / 60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
document.body.appendChild(container);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
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);
}
@@ -76,7 +75,7 @@
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);
@@ -85,15 +84,15 @@
//
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;
@@ -102,29 +101,28 @@
}
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 - camera.position.y) * .05;
camera.updateMatrix();
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/particles/waves.html
+24 -26
View File
@@ -19,7 +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">
@@ -51,15 +51,15 @@
setInterval(loop, 1000 / 60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
document.body.appendChild(container);
camera = new THREE.Camera(0, 0, 1000);
camera.focus = 200;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -69,14 +69,13 @@
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 THREE.Particle( material );
particle.size = 1;
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
particle.updateMatrix();
scene.add( particle );
}
}
@@ -89,63 +88,62 @@
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);
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 - camera.position.y) * .05;
camera.updateMatrix();
var i = 0;
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/cameras/Camera.js
+11 -10
View File
@@ -5,29 +5,30 @@
THREE.Camera = function (x, y, z) {
this.position = new THREE.Vector3(x, y, z);
this.target = {
position: new THREE.Vector3(0, 0, 0)
}
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
// TODO: Need to remove this
this.zoom = 3;
this.focus = 500;
this.autoUpdateMatrix = true;
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/objects/Object3D.js
+2
View File
@@ -13,6 +13,8 @@ THREE.Object3D = function (material) {
this.material = material instanceof Array ? material : [material];
this.autoUpdateMatrix = true;
this.updateMatrix = function () {
this.matrix.identity();
src/objects/Particle.js
+1
View File
@@ -7,6 +7,7 @@ THREE.Particle = function (material) {
THREE.Object3D.call(this, material);
this.size = 1;
this.autoUpdateMatrix = false;
}
THREE.Particle.prototype = new THREE.Object3D();
src/renderers/Renderer.js
+51 -38
View File
@@ -28,10 +28,22 @@ THREE.Renderer = function() {
this.renderList = [];
if(camera.autoUpdateMatrix) {
camera.updateMatrix();
}
for (i = 0; i < scene.objects.length; i++) {
object = scene.objects[i];
if(object.autoUpdateMatrix) {
object.updateMatrix();
}
if (object instanceof THREE.Mesh) {
matrix.multiply(camera.matrix, object.matrix);
@@ -62,29 +74,29 @@ THREE.Renderer = function() {
facesLength = object.geometry.faces.length;
for (j = 0; j < facesLength; j++) {
face = object.geometry.faces[j];
// TODO: Use normals for culling
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 (!face3Pool[face3count]) {
face3Pool[face3count] = new THREE.RenderableFace3();
}
face3Pool[face3count].v1.x = v1.screen.x;
face3Pool[face3count].v1.y = v1.screen.y;
face3Pool[face3count].v2.x = v2.screen.x;
@@ -92,7 +104,7 @@ THREE.Renderer = function() {
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;
@@ -100,28 +112,28 @@ THREE.Renderer = function() {
face3count++;
}
} else if (face instanceof THREE.Face4) {
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;
if (!face4Pool[face4count]) {
face4Pool[face4count] = new THREE.RenderableFace4();
}
face4Pool[face4count].v1.x = v1.screen.x;
face4Pool[face4count].v1.y = v1.screen.y;
face4Pool[face4count].v2.x = v2.screen.x;
@@ -131,7 +143,7 @@ THREE.Renderer = function() {
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;
@@ -149,7 +161,7 @@ THREE.Renderer = function() {
verticesLength = object.geometry.vertices.length;
for (j = 0; j < verticesLength; j++) {
vertex = object.geometry.vertices[j];
vertex.screen.copy(vertex.position);
@@ -162,45 +174,45 @@ THREE.Renderer = function() {
vertex.screen.x *= vertex.screen.z;
vertex.screen.y *= vertex.screen.z;
if (j > 0) {
vertex2 = object.geometry.vertices[j-1];
if (!vertex.visible || !vertex2.visible) {
continue;
}
if (!linePool[lineCount]) {
linePool[lineCount] = new THREE.RenderableLine();
}
linePool[lineCount].v1.x = vertex.screen.x;
linePool[lineCount].v1.y = vertex.screen.y;
linePool[lineCount].v2.x = vertex2.screen.x;
linePool[lineCount].v2.y = vertex2.screen.y;
linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;
linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;
linePool[lineCount].material = object.material;
this.renderList.push( linePool[lineCount] );
lineCount++;
}
}
} else if (object instanceof THREE.Particle) {
object.screen.copy(object.position);
camera.matrix.transform(object.screen);
object.screen.z = focuszoom / (camerafocus + object.screen.z);
if (object.screen.z < 0) {
continue;
}
@@ -208,25 +220,26 @@ THREE.Renderer = function() {
object.screen.y *= object.screen.z;
if (!particlePool[particleCount]) {
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].size = object.size;
particlePool[particleCount].material = object.material;
particlePool[particleCount].color = object.color;
this.renderList.push( particlePool[particleCount] );
particleCount++;
}
}
this.renderList.sort(sort);
}
}