Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 647b4a57 编写于 作者: M Mr.doob
浏览文件
操作

* Added `PointLight` 

* `CanvasRenderer` and `SVGRenderer` basic lighting support (`*ColorStroke`/`*ColorFill` only)
* `Renderer` > `Projector`. `CanvasRenderer`, `SVGRenderer` and `DOMRenderer` do not extend anymore
* Interactivity base code (hdi folder). To be refactored... ([mindlapse](http://github.com/mindlapse))
* Added `computeCentroids` method to `Geometry`
* Included `Stats.js` directly in the `/examples` folder to avoid the need of internet for playing around
上级 a89865bd
展开全部 隐藏空白更改
内联 并排
Showing with 961 addition and 544 deletion
README.md
浏览文件 @ 647b4a57
......@@ -101,13 +101,14 @@ For creating a customised version of the library, including the source files in
<script type="text/javascript" src="js/three/core/UV.js"></script>
<script type="text/javascript" src="js/three/core/Geometry.js"></script>
<script type="text/javascript" src="js/three/cameras/Camera.js"></script>
<script type="text/javascript" src="js/three/objects/Object3D.js"></script>
<script type="text/javascript" src="js/three/objects/Line.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/lights/Light.js"></script>
<script type="text/javascript" src="js/three/lights/AmbientLight.js"></script>
<script type="text/javascript" src="js/three/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="js/three/lights/PointLight.js"></script>
<script type="text/javascript" src="js/three/objects/Object3D.js"></script>
<script type="text/javascript" src="js/three/objects/Particle.js"></script>
<script type="text/javascript" src="js/three/objects/Line.js"></script>
<script type="text/javascript" src="js/three/objects/Mesh.js"></script>
<script type="text/javascript" src="js/three/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/MeshColorFillMaterial.js"></script>
......@@ -117,7 +118,7 @@ For creating a customised version of the library, including the source files in
<script type="text/javascript" src="js/three/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="js/three/materials/ParticleCircleMaterial.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/Projector.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/WebGLRenderer.js"></script>
......@@ -136,6 +137,15 @@ Thanks to the power of the internets (and github <3) these people have kindly he
### Change Log ###
2010 10 06 - **r18** (44.420 kb)
* Added `PointLight`
* `CanvasRenderer` and `SVGRenderer` basic lighting support (ColorStroke/ColorFill only)
* `Renderer` > `Projector`. `CanvasRenderer`, `SVGRenderer` and `DOMRenderer` do not extend anymore
* Interactivity base code (hdi folder). To be refactored... ([mindlapse](http://github.com/mindlapse))
* Added `computeCentroids` method to `Geometry`
2010 09 17 - **r17** (39.487 kb)
* Added `Light`, `AmbientLight` and `DirectionalLight` ([philogb](http://github.com/philogb))
......
build/Three.js
浏览文件 @ 647b4a57
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 647b4a57
此差异已折叠。
examples/camera_free.html
浏览文件 @ 647b4a57
......@@ -30,6 +30,10 @@
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
......@@ -43,7 +47,7 @@
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Renderer.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
......@@ -54,10 +58,10 @@
<script type="text/javascript" src="cameras/FreeCamera.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="geometry/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" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -99,6 +103,7 @@
var debugContext;
init();
loop();
setInterval(loop, 1000/60);
function init() {
......@@ -113,18 +118,21 @@
scene = new THREE.Scene();
// Cube
// Plane
geometry = new Cube(200, 200, 200);
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.5, 1 ) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.doubleSided = true;
scene.add( plane );
for (var i = 0; i < geometry.faces.length; i++) {
// Spheres
geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
}
geometry = new Sphere( 100, 16, 8 );
for (var i = 0; i < 10; i ++ ) {
cube = new THREE.Mesh(geometry, new THREE.MeshFaceColorFillMaterial() );
cube = new THREE.Mesh(geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
cube.overdraw = true;
cube.position.x = Math.random() * 1000 - 500;
cube.position.y = Math.random() * 1000 - 500;
......@@ -140,16 +148,26 @@
}
// Plane
// Lights
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.5, 1 ) );
plane.rotation.x = -90 * (Math.PI / 180);
scene.add(plane);
var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
scene.addLight( ambientLight );
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
var pointLight = new THREE.PointLight( 0xff0000, 1 );
scene.addLight( pointLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
var debugCanvas = document.createElement( 'canvas' );
debugCanvas.width = 512;
......@@ -169,8 +187,8 @@
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
}
function onDocumentKeyDown( event ) {
......@@ -251,9 +269,12 @@
debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
debugContext.rect( - 50, - 50, 100, 100 );
for ( var i = 0; i < scene.objects.length; i++ ) {
for ( var i = 1; i < scene.objects.length; i++ ) {
var object = scene.objects[i];
object.rotation.x += 0.01;
object.rotation.y += 0.005;
object.position.y = Math.sin( object.rotation.x ) * 200;
debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
......
examples/geometry/Qrcode.js
浏览文件 @ 647b4a57
......@@ -1431,6 +1431,7 @@ var Qrcode = function () {
f4(20,21,363,362,0xffc0c0c0);
f4(19,20,362,361,0xffc0c0c0);
this.computeCentroids();
this.computeNormals();
function v( x, y, z ) {
......
examples/geometry/primitives/ClickCube.js
浏览文件 @ 647b4a57
......@@ -38,6 +38,7 @@ var ClickCube = function (width, height, depth, onSelect) {
scope.faces.push(f);
}
this.computeCentroids();
this.computeNormals();
};
......
examples/geometry/primitives/Cube.js
浏览文件 @ 647b4a57
......@@ -37,6 +37,7 @@ var Cube = function (width, height, depth) {
scope.faces.push( new THREE.Face4( a, b, c, d ) );
}
this.computeCentroids();
this.computeNormals();
}
......
examples/geometry/primitives/Cylinder.js
浏览文件 @ 647b4a57
......@@ -65,6 +65,7 @@ var Cylinder = function (numSegs, topRad, botRad, height, topOffset, botOffset)
}
}
this.computeCentroids();
this.computeNormals();
function v(x, y, z) {
......
examples/geometry/primitives/Plane.js
浏览文件 @ 647b4a57
......@@ -52,6 +52,7 @@ var Plane = function ( width, height, segments_width, segments_height ) {
}
this.computeCentroids();
this.computeNormals();
}
......
examples/geometry/primitives/Sphere.js
浏览文件 @ 647b4a57
......@@ -86,6 +86,9 @@ var Sphere = function ( radius, segments_width, segments_height ) {
}
}
}
this.computeCentroids();
this.computeNormals();
}
Sphere.prototype = new THREE.Geometry();
......
examples/geometry_birds.html
浏览文件 @ 647b4a57
......@@ -26,7 +26,7 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/Bird.js"></script>
......
examples/geometry_cube.html
浏览文件 @ 647b4a57
......@@ -20,7 +20,7 @@
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -79,27 +79,27 @@
cube = new THREE.Mesh(geometry, new THREE.MeshFaceColorFillMaterial() );
cube.position.y = 150;
scene.addObject(cube);
scene.addObject( cube );
// Plane
plane = new THREE.Mesh( new Plane( 200, 200, 4, 4 ), new THREE.MeshColorFillMaterial( 0xe0e0e0 ) );
plane = new THREE.Mesh( new Plane( 200, 200 ), new THREE.MeshColorFillMaterial( 0xe0e0e0 ) );
plane.rotation.x = -90 * ( Math.PI / 180 );
scene.addObject(plane);
scene.addObject( plane );
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
container.appendChild( stats.domElement );
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
//
......@@ -108,9 +108,9 @@
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
......@@ -120,30 +120,30 @@
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
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);
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
......@@ -151,12 +151,12 @@
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
......@@ -165,7 +165,7 @@
function loop() {
plane.rotation.z = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
renderer.render(scene, camera);
stats.update();
......
examples/geometry_earth.html
浏览文件 @ 647b4a57
......@@ -33,7 +33,7 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
......
examples/geometry_terrain.html
浏览文件 @ 647b4a57
......@@ -33,7 +33,7 @@
<div id="container"><br /><br /><br /><br /><br />Generating...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
......
examples/hci_clickcube.html
浏览文件 @ 647b4a57
......@@ -16,50 +16,50 @@
<body>
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/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/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../src/hci/ClickResolver.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
<script type="text/javascript" src="geometry/primitives/ClickCube.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../src/hci/ClickResolver.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
<script type="text/javascript" src="geometry/primitives/ClickCube.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......
examples/js/Stats.js 0 → 100644
浏览文件 @ 647b4a57
// stats.js r5 - http://github.com/mrdoob/stats.js
var Stats=function(){var j=0,u=2,r,C=0,E=new Date().getTime(),w=E,f=E,m=0,e=1000,i=0,F,q,c,d,B,k=0,G=1000,a=0,A,t,p,D,l,v=0,o=1000,s=0,h,n,z,g,b,y={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mem:{bg:{r:48,g:16,b:26},fg:{r:255,g:0,b:128}}};r=document.createElement("div");r.style.fontFamily="Helvetica, Arial, sans-serif";r.style.textAlign="left";r.style.fontSize="9px";r.style.opacity="0.9";r.style.width="80px";r.style.cursor="pointer";r.addEventListener("click",H,false);F=document.createElement("div");F.style.backgroundColor="rgb("+Math.floor(y.fps.bg.r/2)+","+Math.floor(y.fps.bg.g/2)+","+Math.floor(y.fps.bg.b/2)+")";F.style.padding="2px 0px 3px 0px";r.appendChild(F);q=document.createElement("div");q.innerHTML="<strong>FPS</strong>";q.style.color="rgb("+y.fps.fg.r+","+y.fps.fg.g+","+y.fps.fg.b+")";q.style.margin="0px 0px 1px 3px";F.appendChild(q);c=document.createElement("canvas");c.width=74;c.height=30;c.style.display="block";c.style.marginLeft="3px";F.appendChild(c);d=c.getContext("2d");d.fillStyle="rgb("+y.fps.bg.r+","+y.fps.bg.g+","+y.fps.bg.b+")";d.fillRect(0,0,c.width,c.height);B=d.getImageData(0,0,c.width,c.height);A=document.createElement("div");A.style.backgroundColor="rgb("+Math.floor(y.ms.bg.r/2)+","+Math.floor(y.ms.bg.g/2)+","+Math.floor(y.ms.bg.b/2)+")";A.style.padding="2px 0px 3px 0px";A.style.display="none";r.appendChild(A);t=document.createElement("div");t.innerHTML="<strong>MS</strong>";t.style.color="rgb("+y.ms.fg.r+","+y.ms.fg.g+","+y.ms.fg.b+")";t.style.margin="0px 0px 1px 3px";A.appendChild(t);p=document.createElement("canvas");p.width=74;p.height=30;p.style.display="block";p.style.marginLeft="3px";A.appendChild(p);D=p.getContext("2d");D.fillStyle="rgb("+y.ms.bg.r+","+y.ms.bg.g+","+y.ms.bg.b+")";D.fillRect(0,0,p.width,p.height);l=D.getImageData(0,0,p.width,p.height);try{if(webkitPerformance&&webkitPerformance.memory.totalJSHeapSize){u=3}}catch(x){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(y.mem.bg.r/2)+","+Math.floor(y.mem.bg.g/2)+","+Math.floor(y.mem.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";r.appendChild(h);n=document.createElement("div");n.innerHTML="<strong>MEM</strong>";n.style.color="rgb("+y.mem.fg.r+","+y.mem.fg.g+","+y.mem.fg.b+")";n.style.margin="0px 0px 1px 3px";h.appendChild(n);z=document.createElement("canvas");z.width=74;z.height=30;z.style.display="block";z.style.marginLeft="3px";h.appendChild(z);g=z.getContext("2d");g.fillStyle="#301010";g.fillRect(0,0,z.width,z.height);b=g.getImageData(0,0,z.width,z.height);function I(N,M,K){var J,O,L;for(O=0;O<30;O++){for(J=0;J<73;J++){L=(J+O*74)*4;N[L]=N[L+4];N[L+1]=N[L+5];N[L+2]=N[L+6]}}for(O=0;O<30;O++){L=(73+O*74)*4;if(O<M){N[L]=y[K].bg.r;N[L+1]=y[K].bg.g;N[L+2]=y[K].bg.b}else{N[L]=y[K].fg.r;N[L+1]=y[K].fg.g;N[L+2]=y[K].fg.b}}}function H(){j++;j==u?j=0:j;F.style.display="none";A.style.display="none";h.style.display="none";switch(j){case 0:F.style.display="block";break;case 1:A.style.display="block";break;case 2:h.style.display="block";break}}return{domElement:r,update:function(){C++;E=new Date().getTime();k=E-w;G=Math.min(G,k);a=Math.max(a,k);I(l.data,Math.min(30,30-(k/200)*30),"ms");t.innerHTML="<strong>"+k+" MS</strong> ("+G+"-"+a+")";D.putImageData(l,0,0);w=E;if(E>f+1000){m=Math.round((C*1000)/(E-f));e=Math.min(e,m);i=Math.max(i,m);I(B.data,Math.min(30,30-(m/100)*30),"fps");q.innerHTML="<strong>"+m+" FPS</strong> ("+e+"-"+i+")";d.putImageData(B,0,0);if(u==3){v=webkitPerformance.memory.usedJSHeapSize*9.54e-7;o=Math.min(o,v);s=Math.max(s,v);I(b.data,Math.min(30,30-(v/2)),"mem");n.innerHTML="<strong>"+Math.round(v)+" MEM</strong> ("+Math.round(o)+"-"+Math.round(s)+")";g.putImageData(b,0,0)}f=E;C=0}}}};
examples/materials_video.html
浏览文件 @ 647b4a57
......@@ -15,7 +15,7 @@
</head>
<body>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
......
examples/particles_floor.html
浏览文件 @ 647b4a57
......@@ -19,7 +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" src="js/Stats.js"></script>
<script type="text/javascript">
......
examples/particles_random.html
浏览文件 @ 647b4a57
......@@ -20,7 +20,7 @@
<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" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -44,7 +44,7 @@
init();
setInterval(loop, 1000 / 60);
setInterval( loop, 1000 / 60 );
function init() {
......@@ -66,48 +66,48 @@
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
scene.add(particle);
scene.add( particle );
}
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
container.appendChild( stats.domElement );
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
//
function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event) {
function onDocumentTouchStart( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event) {
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
......@@ -115,10 +115,10 @@
function loop() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render(scene, camera);
renderer.render( scene, camera );
stats.update();
}
......
examples/particles_waves.html
浏览文件 @ 647b4a57
......@@ -18,7 +18,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" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -50,8 +50,8 @@
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
......@@ -59,67 +59,67 @@
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
particles = new Array();
var i = 0;
var material = new THREE.ParticleCircleMaterial(0xffffff, 1);
var material = new THREE.ParticleCircleMaterial( 0xffffff, 1 );
for (var ix = 0; ix < AMOUNTX; ix++) {
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for(var iy = 0; iy < AMOUNTY; iy++) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[i++] = new THREE.Particle( material );
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
particle = particles[ i ++ ] = new THREE.Particle( material );
particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
scene.add( particle );
}
}
count = 0;
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
container.appendChild( stats.domElement );
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
//
function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event) {
function onDocumentTouchStart( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event) {
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
......@@ -128,23 +128,23 @@
function loop() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++) {
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for(var iy = 0; iy < AMOUNTY; iy++) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[i++];
particle.position.y = (Math.sin((ix + count) * .3) * 50) + (Math.sin((iy + count) * .5) * 50);
particle.scale.x = particle.scale.y = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
particle = particles[ i++ ];
particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
}
}
renderer.render(scene, camera);
renderer.render( scene, camera );
stats.update();
......
examples/test.html
浏览文件 @ 647b4a57
......@@ -28,13 +28,14 @@
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
......@@ -44,7 +45,7 @@
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Renderer.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
......@@ -58,7 +59,7 @@
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="geometry/primitives/Cylinder.js"></script>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/Stats.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -73,7 +74,7 @@
var scene;
var canvasRenderer, svgRenderer, webglRenderer;
var mesh;
var mesh, qrcode;
var mouseX = 0;
var mouseY = 0;
......@@ -103,7 +104,7 @@
// QRCODE
mesh = new THREE.Mesh(new Qrcode(), new THREE.MeshFaceColorFillMaterial());
qrcode = mesh = new THREE.Mesh(new Qrcode(), new THREE.MeshFaceColorFillMaterial());
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
......@@ -167,6 +168,8 @@
geometry.faces.push( face );
}
geometry.computeNormals();
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
mesh.doubleSided = true;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
......@@ -186,12 +189,12 @@
}
// LIGHTS
var ambient = new THREE.AmbientLight( new THREE.Color( Math.random() * 0xffffff ) );
scene.addLight(ambient);
var directional = new THREE.DirectionalLight( new THREE.Color( Math.random() * 0xffffff ),
new THREE.Vector3( 600, 0, 0 ) );
scene.addLight(directional);
var ambient = new THREE.AmbientLight( 0x80ffff );
scene.addLight( ambient );
var directional = new THREE.DirectionalLight( 0xffff00 );
scene.addLight( directional );
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
......@@ -229,6 +232,11 @@
mesh.rotation.y += 0.01;
mesh.updateMatrix();
/*
qrcode.rotation.x += 0.01;
qrcode.rotation.z += 0.02;
*/
canvasRenderer.render( scene, camera );
svgRenderer.render( scene, camera );
webglRenderer.render( scene, camera );
......
src/core/Color.js
浏览文件 @ 647b4a57
......@@ -4,29 +4,70 @@
THREE.Color = function ( hex ) {
/*
this.r; this.g; this.b; this.a;
this.hex;
this.__styleString;
*/
this.autoUpdate = true;
this.setHex( hex );
}
THREE.Color.prototype = {
setRGBA: function ( r, g, b, a ) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
if ( this.autoUpdate ) {
this.updateHex();
this.updateStyleString();
}
},
setHex: function ( hex ) {
this.hex = hex;
this.updateRGBA();
this.updateStyleString();
if ( this.autoUpdate ) {
this.updateRGBA();
this.updateStyleString();
}
},
setRGBA: function ( r, g, b, a ) {
copyRGB: function ( color ) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
this.r = color.r;
this.g = color.g;
this.b = color.b;
},
copyRGBA: function ( color ) {
this.r = color.r;
this.g = color.g;
this.b = color.b;
this.a = color.a;
},
multiplySelfRGB: function ( color ) {
this.updateHex();
this.updateStyleString();
this.r *= color.r;
this.g *= color.g;
this.b *= color.b;
},
......
src/core/Face3.js
浏览文件 @ 647b4a57
......@@ -8,15 +8,23 @@ THREE.Face3 = function ( a, b, c, normal, color ) {
this.b = b;
this.c = c;
this.centroid = new THREE.Vector3();
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.color = color || new THREE.Color( 0x000000 );
this.color = color || new THREE.Color( 0xff000000 );
};
THREE.Face3.prototype = {
// TODO: Dupe? (Geometry/computeCentroid)
getCenter : function(){
return this.a.clone().addSelf( this.b ).addSelf( this.c ).divideScalar( 3 );
},
toString: function () {
return 'THREE.Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
......
src/core/Face4.js
浏览文件 @ 647b4a57
......@@ -9,26 +9,27 @@ THREE.Face4 = function ( a, b, c, d, normal, color ) {
this.c = c;
this.d = d;
this.centroid = new THREE.Vector3();
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.color = color || new THREE.Color( 0x000000 );
this.color = color || new THREE.Color( 0xff000000 );
};
THREE.Face4.prototype = {
toString: function () {
// TODO: Dupe? (Geometry/computeCentroid)
return 'THREE.Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' ' + this.d + ' )';
getCenter : function(){
return this.a.clone().addSelf( this.b ).addSelf( this.c ).addSelf( this.d ).divideScalar( 4 );
},
getCenter : function(){
return this.a.clone().addSelf(this.b).addSelf(this.c).addSelf(this.d).divideScalar(4);
toString: function () {
return 'THREE.Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' ' + this.d + ' )';
}
}
src/core/Geometry.js
浏览文件 @ 647b4a57
......@@ -13,24 +13,54 @@ THREE.Geometry = function () {
THREE.Geometry.prototype = {
computeCentroids: function () {
var f, fl, face;
for ( f = 0, fl = this.faces.length; f < fl; f++ ) {
face = this.faces[ f ];
face.centroid.set( 0, 0, 0 );
if ( face instanceof THREE.Face3 ) {
face.centroid.addSelf( this.vertices[ face.a ].position );
face.centroid.addSelf( this.vertices[ face.b ].position );
face.centroid.addSelf( this.vertices[ face.c ].position );
face.centroid.divideScalar( 3 );
} else if ( face instanceof THREE.Face4 ) {
face.centroid.addSelf( this.vertices[ face.a ].position );
face.centroid.addSelf( this.vertices[ face.b ].position );
face.centroid.addSelf( this.vertices[ face.c ].position );
face.centroid.addSelf( this.vertices[ face.d ].position );
face.centroid.divideScalar( 4 );
}
}
},
computeNormals: function () {
var v, f, vA, vB, vC, cb, ab;
var v, vl, vertex, f, fl, face, vA, vB, vC, cb = new THREE.Vector3(), ab = new THREE.Vector3();
for ( v = 0; v < this.vertices.length; v++ ) {
for ( v = 0, vl = this.vertices.length; v < vl; v++ ) {
this.vertices[ v ].normal.set( 0, 0, 0 );
vertex = this.vertices[ v ];
vertex.normal.set( 0, 0, 0 );
}
for ( f = 0; f < this.faces.length; f++ ) {
for ( f = 0, fl = this.faces.length; f < fl; f++ ) {
vA = this.vertices[ this.faces[ f ].a ];
vB = this.vertices[ this.faces[ f ].b ];
vC = this.vertices[ this.faces[ f ].c ];
face = this.faces[ f ];
cb = new THREE.Vector3();
ab = new THREE.Vector3();
vA = this.vertices[ face.a ];
vB = this.vertices[ face.b ];
vC = this.vertices[ face.c ];
cb.sub( vC.position, vB.position );
ab.sub( vA.position, vB.position );
......@@ -42,7 +72,7 @@ THREE.Geometry.prototype = {
}
this.faces[ f ].normal = cb;
face.normal.copy( cb );
}
......
src/core/Matrix4.js
浏览文件 @ 647b4a57
......@@ -30,6 +30,15 @@ THREE.Matrix4.prototype = {
},
copy: function ( m ) {
this.n11 = m.n11; this.n12 = m.n12; this.n13 = m.n13; this.n14 = m.n14;
this.n21 = m.n21; this.n22 = m.n22; this.n23 = m.n23; this.n24 = m.n24;
this.n31 = m.n31; this.n32 = m.n32; this.n33 = m.n33; this.n34 = m.n34;
this.n41 = m.n41; this.n42 = m.n42; this.n43 = m.n43; this.n44 = m.n44;
},
lookAt: function ( eye, center, up ) {
var x = this._x, y = this._y, z = this._z;
......@@ -70,7 +79,7 @@ THREE.Matrix4.prototype = {
v.z = v.z / vw;
}
return v;
},
......@@ -222,19 +231,19 @@ THREE.Matrix4.prototype = {
flatten: function() {
return [this.n11, this.n21, this.n31, this.n41,
this.n12, this.n22, this.n32, this.n42,
this.n13, this.n23, this.n33, this.n43,
this.n14, this.n24, this.n34, this.n44];
return [this.n11, this.n21, this.n31, this.n41,
this.n12, this.n22, this.n32, this.n42,
this.n13, this.n23, this.n33, this.n43,
this.n14, this.n24, this.n34, this.n44];
},
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 + " |\n" +
"| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |";
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 + " |\n" +
"| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |";
}
......
src/core/Vector2.js
浏览文件 @ 647b4a57
......@@ -16,7 +16,7 @@ THREE.Vector2.prototype = {
this.x = x;
this.y = y;
return this;
},
......@@ -25,7 +25,7 @@ THREE.Vector2.prototype = {
this.x = v.x;
this.y = v.y;
return this;
},
......@@ -34,7 +34,7 @@ THREE.Vector2.prototype = {
this.x += v.x;
this.y += v.y;
return this;
},
......@@ -43,7 +43,7 @@ THREE.Vector2.prototype = {
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
return this;
},
......@@ -61,7 +61,7 @@ THREE.Vector2.prototype = {
this.x = v1.x - v2.x;
this.y = v1.y - v2.y;
return this;
},
......@@ -80,7 +80,7 @@ THREE.Vector2.prototype = {
this.multiplyScalar( 1 / this.length() );
return this;
},
length: function () {
......@@ -99,7 +99,7 @@ THREE.Vector2.prototype = {
this.x = - this.x;
this.y = - this.y;
return this;
},
......
src/core/Vector3.js
浏览文件 @ 647b4a57
......@@ -19,7 +19,7 @@ THREE.Vector3.prototype = {
this.x = x;
this.y = y;
this.z = z;
return this;
},
......@@ -31,7 +31,7 @@ THREE.Vector3.prototype = {
this.z = v.z;
return this;
},
add: function( v1, v2 ) {
......@@ -39,7 +39,7 @@ THREE.Vector3.prototype = {
this.x = v1.x + v2.x;
this.y = v1.y + v2.y;
this.z = v1.z + v2.z;
return this;
},
......@@ -71,7 +71,7 @@ THREE.Vector3.prototype = {
this.z = v1.z - v2.z;
return this;
},
subSelf: function ( v ) {
......@@ -91,7 +91,7 @@ THREE.Vector3.prototype = {
this.z = v1.x * v2.y - v1.y * v2.x;
return this;
},
crossSelf: function ( v ) {
......@@ -190,13 +190,13 @@ THREE.Vector3.prototype = {
}
return this;
},
setLength: function( len ) {
return this.normalize().multiplyScalar( len );
},
isZero: function () {
......
src/core/Vertex.js
浏览文件 @ 647b4a57
......@@ -5,8 +5,12 @@
THREE.Vertex = function ( position, normal ) {
this.position = position || new THREE.Vector3();
this.positionWorld = new THREE.Vector3();
this.positionScreen = new THREE.Vector3();
this.normal = normal || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.normalWorld = new THREE.Vector3();
this.normalScreen = new THREE.Vector3();
this.__visible = true;
......
src/hci/ClickResolver.js
浏览文件 @ 647b4a57
......@@ -199,4 +199,4 @@ THREE.ClickResolver.prototype = {
}
};
\ No newline at end of file
};
src/lights/AmbientLight.js
浏览文件 @ 647b4a57
THREE.AmbientLight = function(color) {
THREE.Light.call(this, color);
THREE.AmbientLight = function ( hex ) {
THREE.Light.call( this, hex );
};
THREE.AmbientLight.prototype = new THREE.Light();
THREE.AmbientLight.prototype.constructor = THREE.AmbientLight;
\ No newline at end of file
THREE.AmbientLight.prototype.constructor = THREE.AmbientLight;
src/lights/DirectionalLight.js
浏览文件 @ 647b4a57
THREE.DirectionalLight = function(color, direction) {
THREE.Light.call(this, color);
this.direction = direction || new Vector3(1, 1, 1);
this.direction.normalize();
THREE.DirectionalLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.intensity = intensity || 1;
};
THREE.DirectionalLight.prototype = new THREE.Light();
THREE.DirectionalLight.prototype.constructor = THREE.DirectionalLight;
\ No newline at end of file
THREE.DirectionalLight.prototype.constructor = THREE.DirectionalLight;
src/lights/Light.js
浏览文件 @ 647b4a57
THREE.Light = function(color) {
THREE.Light = function ( hex ) {
this.color = color;
this.color = new THREE.Color( 0xff << 24 | hex );
};
\ No newline at end of file
};
src/lights/PointLight.js 0 → 100644
浏览文件 @ 647b4a57
THREE.PointLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 0, 0 );
this.intensity = intensity || 1;
};
THREE.DirectionalLight.prototype = new THREE.Light();
THREE.DirectionalLight.prototype.constructor = THREE.PointLight;
src/objects/Object3D.js
浏览文件 @ 647b4a57
......@@ -9,19 +9,27 @@ THREE.Object3D = function ( material ) {
this.scale = new THREE.Vector3( 1, 1, 1 );
this.matrix = new THREE.Matrix4();
this.matrixTranslation = new THREE.Matrix4();
this.matrixRotation = new THREE.Matrix4();
this.matrixScale = new THREE.Matrix4();
this.screen = new THREE.Vector3();
this.autoUpdateMatrix = true;
this.updateMatrix = function () {
this.matrix.identity();
this.matrixPosition = THREE.Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z );
this.matrixRotation = THREE.Matrix4.rotationXMatrix( this.rotation.x );
this.matrixRotation.multiplySelf( THREE.Matrix4.rotationYMatrix( this.rotation.y ) );
this.matrixRotation.multiplySelf( THREE.Matrix4.rotationZMatrix( this.rotation.z ) );
this.matrixScale = THREE.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 ) );
this.matrix.copy( this.matrixPosition );
this.matrix.multiplySelf( this.matrixRotation );
this.matrix.multiplySelf( this.matrixScale );
};
......
src/renderers/CanvasRenderer.js
浏览文件 @ 647b4a57
......@@ -4,17 +4,23 @@
THREE.CanvasRenderer = function () {
THREE.Renderer.call( this );
var _renderList = null,
_projector = new THREE.Projector(),
var _canvas = document.createElement( 'canvas' ),
_canvas = document.createElement( 'canvas' ),
_context = _canvas.getContext( '2d' ),
_width, _height, _widthHalf, _heightHalf,
_clipRect = new THREE.Rectangle(),
_clearRect = new THREE.Rectangle(),
_bboxRect = new THREE.Rectangle(),
_vector2 = new THREE.Vector2(),
v5 = new THREE.Vector2(), v6 = new THREE.Vector2(),
_color = new THREE.Color( 0xffffffff ),
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xffffffff ),
_vector2 = new THREE.Vector2(), // Needed for expand
_vector3 = new THREE.Vector3(), // Needed for PointLight
v5 = new THREE.Vector2(), v6 = new THREE.Vector2(), // Needed for latter splitting tris to quads
uv1 = new THREE.UV(), uv2 = new THREE.UV(), uv3 = new THREE.UV(), uv4 = new THREE.UV();
this.domElement = _canvas;
......@@ -39,14 +45,14 @@ THREE.CanvasRenderer = function () {
_clearRect.inflate( 1 );
_clearRect.minSelf( _clipRect );
/*
_context.setTransform( 1, 0, 0, - 1, _widthHalf, _heightHalf );
_context.clearRect( _clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight() );
*/
/*
// Opera workaround
_context.setTransform( 1, 0, 0, 1, _widthHalf, _heightHalf );
_context.clearRect( _clearRect.getX(), - ( _clearRect.getHeight() + _clearRect.getY() ), _clearRect.getWidth(), _clearRect.getHeight() );
*/
_clearRect.empty();
......@@ -55,19 +61,19 @@ THREE.CanvasRenderer = function () {
this.render = function ( scene, camera ) {
var e, el, m, ml, element, material, pi2 = Math.PI * 2,
var e, el, element, m, ml, material, pi2 = Math.PI * 2,
v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y,
width, height, scaleX, scaleY, offsetX, offsetY,
bitmap, bitmapWidth, bitmapHeight;
this.project( scene, camera );
if ( this.autoClear ) {
this.clear();
}
_renderList = _projector.projectScene( scene, camera );
_context.setTransform( 1, 0, 0, - 1, _widthHalf, _heightHalf );
/* DEBUG
......@@ -75,9 +81,11 @@ THREE.CanvasRenderer = function () {
_context.fillRect( _clipRect.getX(), _clipRect.getY(), _clipRect.getWidth(), _clipRect.getHeight() );
*/
for ( e = 0, el = this.renderList.length; e < el; e++ ) {
calculateAmbientLight( scene, _ambientLight );
element = this.renderList[ e ];
for ( e = 0, el = _renderList.length; e < el; e++ ) {
element = _renderList[ e ];
_bboxRect.empty();
......@@ -91,6 +99,12 @@ THREE.CanvasRenderer = function () {
if ( material instanceof THREE.ParticleCircleMaterial ) {
_light.copyRGB( _ambientLight );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
width = element.scale.x * _widthHalf;
height = element.scale.y * _heightHalf;
......@@ -111,7 +125,7 @@ THREE.CanvasRenderer = function () {
_context.arc( 0, 0, 1, 0, pi2, true );
_context.closePath();
_context.fillStyle = material.color.__styleString;
_context.fillStyle = _color.__styleString;
_context.fill();
_context.restore();
......@@ -191,11 +205,17 @@ THREE.CanvasRenderer = function () {
if ( material instanceof THREE.LineColorMaterial ) {
_light.copyRGB( _ambientLight );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = material.color.__styleString;
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
......@@ -238,6 +258,13 @@ THREE.CanvasRenderer = function () {
if ( material instanceof THREE.MeshColorFillMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -245,11 +272,18 @@ THREE.CanvasRenderer = function () {
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = material.color.__styleString;
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -261,13 +295,20 @@ THREE.CanvasRenderer = function () {
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = material.color.__styleString;
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -275,11 +316,18 @@ THREE.CanvasRenderer = function () {
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = element.color.__styleString;
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -291,7 +339,7 @@ THREE.CanvasRenderer = function () {
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = element.color.__styleString;
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
......@@ -385,6 +433,13 @@ THREE.CanvasRenderer = function () {
if ( material instanceof THREE.MeshColorFillMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -393,12 +448,19 @@ THREE.CanvasRenderer = function () {
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = material.color.__styleString;
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -411,13 +473,20 @@ THREE.CanvasRenderer = function () {
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = material.color.__styleString;
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -426,11 +495,18 @@ THREE.CanvasRenderer = function () {
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = element.color.__styleString;
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
......@@ -443,7 +519,7 @@ THREE.CanvasRenderer = function () {
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = element.color.__styleString;
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
......@@ -513,7 +589,70 @@ THREE.CanvasRenderer = function () {
};
function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, uv1u, uv1v, uv2u, uv2v, uv3u, uv3v ) {
function calculateAmbientLight( scene, color ) {
var l, ll, light;
color.setRGBA( 1, 1, 1, 1 );
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
if ( light instanceof THREE.AmbientLight ) {
color.r *= light.color.r;
color.g *= light.color.g;
color.b *= light.color.b;
}
}
}
function addLights( scene, element, color ) {
var l, ll, light, amount;
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
if ( light instanceof THREE.DirectionalLight ) {
amount = element.normalWorld.dot( light.position ) * light.intensity;
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
}
} else if ( light instanceof THREE.PointLight ) {
_vector3.sub( light.position, element.centroidWorld );
_vector3.normalize();
amount = element.normalWorld.dot( _vector3 ) * light.intensity;
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
}
}
}
}
function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, uv1u, uv1v, uv2u, uv2v, uv3u, uv3v ) {
// Textured triangle drawing by Thatcher Ulrich.
// http://tulrich.com/geekstuff/canvas/jsgl.js
......@@ -546,10 +685,13 @@ THREE.CanvasRenderer = function () {
}
// Hide anti-alias gaps
function expand( a, b ) {
_vector2.sub( b, a );
_vector2.unit();
_vector2.multiplyScalar( 0.75 );
b.addSelf( _vector2 );
a.subSelf( _vector2 );
......@@ -557,6 +699,3 @@ THREE.CanvasRenderer = function () {
}
};
THREE.CanvasRenderer.prototype = new THREE.Renderer();
THREE.CanvasRenderer.prototype.constructor = THREE.CanvasRenderer;
src/renderers/DOMRenderer.js
浏览文件 @ 647b4a57
......@@ -6,7 +6,9 @@ THREE.DOMRenderer = function () {
THREE.Renderer.call( this );
var _div = document.createElement( 'div' ),
var _renderList = null,
_projector = new THREE.Projector(),
_div = document.createElement( 'div' ),
_width, _height, _widthHalf, _heightHalf;
this.domElement = _div;
......@@ -22,11 +24,11 @@ THREE.DOMRenderer = function () {
var e, el, m, ml, element, material, dom, v1x, v1y;
this.project( scene, camera );
_renderList = _projector.projectScene( scene, camera );
for ( e = 0, el = this.renderList.length; e < el; e++ ) {
for ( e = 0, el = _renderList.length; e < el; e++ ) {
element = this.renderList[ e ];
element = _renderList[ e ];
if ( element instanceof THREE.RenderableParticle ) {
......@@ -53,6 +55,3 @@ THREE.DOMRenderer = function () {
};
}
THREE.DOMRenderer.prototype = new THREE.Renderer();
THREE.DOMRenderer.prototype.constructor = THREE.DOMRenderer;
src/renderers/Projector.js 0 → 100644
浏览文件 @ 647b4a57
/**
* @author mr.doob / http://mrdoob.com/
* @author supereggbert / http://www.paulbrunt.co.uk/
*/
THREE.Projector = function() {
var _renderList = null,
_face3, _face3Count, _face3Pool = [],
_face4, _face4Count, _face4Pool = [],
_line, _lineCount, _linePool = [],
_particle, _particleCount, _particlePool = [],
_vector4 = new THREE.Vector4(),
_projScreenMatrix = new THREE.Matrix4(),
_projScreenObjectMatrix = new THREE.Matrix4();
this.projectScene = function ( scene, camera ) {
var o, ol, v, vl, f, fl, objects, object, objectMatrix,
vertices, vertex, vertexPositionScreen, vertex2,
faces, face, v1, v2, v3, v4;
_renderList = [];
_face3Count = 0, _face4Count = 0, _lineCount = 0, _particleCount = 0;
if( camera.autoUpdateMatrix ) {
camera.updateMatrix();
}
_projScreenMatrix.multiply( camera.projectionMatrix, camera.matrix );
objects = scene.objects;
for ( o = 0, ol = objects.length; o < ol; o++ ) {
object = objects[ o ];
objectMatrix = object.matrix;
if( object.autoUpdateMatrix ) {
object.updateMatrix();
}
if ( object instanceof THREE.Mesh ) {
_projScreenObjectMatrix.multiply( _projScreenMatrix, objectMatrix );
// vertices
vertices = object.geometry.vertices;
for ( v = 0, vl = vertices.length; v < vl; v++ ) {
vertex = vertices[ v ];
vertexPositionScreen = vertex.positionScreen;
vertexPositionScreen.copy( vertex.position );
_projScreenObjectMatrix.transform( vertexPositionScreen );
vertex.__visible = vertexPositionScreen.z > 0 && vertexPositionScreen.z < 1;
}
// faces
faces = object.geometry.faces;
for ( f = 0, fl = faces.length; f < fl; f++ ) {
face = faces[ f ];
if ( face instanceof THREE.Face3 ) {
v1 = vertices[ face.a ]; v2 = vertices[ face.b ]; v3 = vertices[ face.c ];
if ( v1.__visible && v2.__visible && v3.__visible ) {
if ( ( object.doubleSided || ( object.flipSided !=
( v3.positionScreen.x - v1.positionScreen.x ) * ( v2.positionScreen.y - v1.positionScreen.y ) -
( v3.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ) ) ) {
_face3 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face3.v1.copy( v1.positionScreen );
_face3.v2.copy( v2.positionScreen );
_face3.v3.copy( v3.positionScreen );
_face3.centroidWorld.copy( face.centroid );
object.matrix.transform( _face3.centroidWorld );
_face3.normalWorld.copy( face.normal );
object.matrixRotation.transform( _face3.normalWorld );
_face3.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, v3.positionScreen.z ) );
_face3.material = object.material;
_face3.overdraw = object.overdraw;
_face3.uvs = object.geometry.uvs[ f ];
_face3.color = face.color;
_renderList.push( _face3 );
_face3Count ++;
}
}
} else if ( face instanceof THREE.Face4 ) {
v1 = vertices[ face.a ]; v2 = vertices[ face.b ]; v3 = vertices[ face.c ]; v4 = vertices[ face.d ];
if ( v1.__visible && v2.__visible && v3.__visible && v4.__visible ) {
if ( ( object.doubleSided || ( object.flipSided !=
( ( v4.positionScreen.x - v1.positionScreen.x ) * ( v2.positionScreen.y - v1.positionScreen.y ) -
( v4.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ||
( v2.positionScreen.x - v3.positionScreen.x ) * ( v4.positionScreen.y - v3.positionScreen.y ) -
( v2.positionScreen.y - v3.positionScreen.y ) * ( v4.positionScreen.x - v3.positionScreen.x ) < 0 ) ) ) ) {
_face4 = _face4Pool[ _face4Count ] = _face4Pool[ _face4Count ] || new THREE.RenderableFace4();
_face4.v1.copy( v1.positionScreen );
_face4.v2.copy( v2.positionScreen );
_face4.v3.copy( v3.positionScreen );
_face4.v4.copy( v4.positionScreen );
_face4.centroidWorld.copy( face.centroid );
object.matrix.transform( _face4.centroidWorld );
_face4.normalWorld.copy( face.normal );
object.matrixRotation.transform( _face4.normalWorld );
_face4.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, Math.max( v3.positionScreen.z, v4.positionScreen.z ) ) );
_face4.material = object.material;
_face4.overdraw = object.overdraw;
_face4.uvs = object.geometry.uvs[ f ];
_face4.color = face.color;
_renderList.push( _face4 );
_face4Count ++;
}
}
}
}
} else if ( object instanceof THREE.Line ) {
_projScreenObjectMatrix.multiply( _projScreenMatrix, objectMatrix );
vertices = object.geometry.vertices;
for ( v = 0, vl = vertices.length; v < vl; v++ ) {
vertex = vertices[ v ];
vertexPositionScreen = vertex.positionScreen;
vertexPositionScreen.copy( vertex.position );
_projScreenObjectMatrix.transform( vertexPositionScreen );
vertex.__visible = vertexPositionScreen.z > 0 && vertexPositionScreen.z < 1;
if ( v > 0 ) {
vertex2 = object.geometry.vertices[ v - 1 ];
if ( vertex.__visible && vertex2.__visible ) {
_line = _linePool[ _lineCount ] = _linePool[ _lineCount ] || new THREE.RenderableLine();
_line.v1.copy( vertex.positionScreen );
_line.v2.copy( vertex2.positionScreen );
_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
_line.material = object.material;
_renderList.push( _line );
_lineCount ++;
}
}
}
} else if ( object instanceof THREE.Particle ) {
_vector4.set( object.position.x, object.position.y, object.position.z, 1 );
camera.matrix.transform( _vector4 );
camera.projectionMatrix.transform( _vector4 );
object.screen.set( _vector4.x / _vector4.w, _vector4.y / _vector4.w, _vector4.z / _vector4.w );
if ( object.screen.z > 0 && object.screen.z < 1 ) {
_particle = _particlePool[ _particleCount ] = _particlePool[ _particleCount ] || new THREE.RenderableParticle();
_particle.x = object.screen.x;
_particle.y = object.screen.y;
_particle.z = object.screen.z;
_particle.rotation = object.rotation.z;
_particle.scale.x = object.scale.x * Math.abs( _vector4.x / _vector4.w - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
_particle.scale.y = object.scale.y * Math.abs( _vector4.y / _vector4.w - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
_particle.material = object.material;
_particle.color = object.color;
_renderList.push( _particle );
_particleCount ++;
}
}
}
_renderList.sort( painterSort );
return _renderList;
};
function painterSort( a, b ) {
return b.z - a.z;
}
};
src/renderers/Renderer.js 已删除 100644 → 0
浏览文件 @ a89865bd
/**
* @author mr.doob / http://mrdoob.com/
* @author supereggbert / http://www.paulbrunt.co.uk/
*/
THREE.Renderer = function() {
var face3Pool = [],
face4Pool = [],
linePool = [],
particlePool = [],
vector4 = new THREE.Vector4(),
projViewMatrix = new THREE.Matrix4();
projViewObjMatrix = new THREE.Matrix4();
function painterSort( a, b ) {
return b.z - a.z;
}
this.renderList = null;
this.project = function (scene, camera) {
var o, ol, v, vl, f, fl, vertex, vertex2, face, object, v1, v2, v3, v4,
face3count = 0, face4count = 0, lineCount = 0, particleCount = 0;
this.renderList = [];
if( camera.autoUpdateMatrix ) {
camera.updateMatrix();
}
projViewMatrix.multiply( camera.projectionMatrix, camera.matrix );
for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
object = scene.objects[ o ];
if( object.autoUpdateMatrix ) {
object.updateMatrix();
}
if ( object instanceof THREE.Mesh ) {
projViewObjMatrix.multiply( projViewMatrix, object.matrix );
// vertices
for ( v = 0, vl = object.geometry.vertices.length; v < vl; v++ ) {
vertex = object.geometry.vertices[ v ];
vertex.screen.copy( vertex.position );
projViewObjMatrix.transform( vertex.screen );
vertex.__visible = vertex.screen.z > 0 && vertex.screen.z < 1;
}
// faces
for ( f = 0, fl = object.geometry.faces.length; f < fl; f++ ) {
face = object.geometry.faces[ f ];
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 || ( object.flipSided !=
( 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 ) ) ) {
if ( !face3Pool[ face3count ] ) {
face3Pool[ face3count ] = new THREE.RenderableFace3();
}
face3Pool[ face3count ].v1.copy( v1.screen );
face3Pool[ face3count ].v2.copy( v2.screen );
face3Pool[ face3count ].v3.copy( v3.screen );
face3Pool[ face3count ].z = Math.max( v1.screen.z, Math.max( v2.screen.z, v3.screen.z ) );
face3Pool[ face3count ].material = object.material;
face3Pool[ face3count ].overdraw = object.overdraw;
face3Pool[ face3count ].uvs = object.geometry.uvs[ f ];
face3Pool[ face3count ].color = face.color;
this.renderList.push(face3Pool[face3count]);
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 || ( object.flipSided !=
( ( 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 ) ) ) ) {
if ( !face4Pool[ face4count ] ) {
face4Pool[ face4count ] = new THREE.RenderableFace4();
}
face4Pool[ face4count ].v1.copy( v1.screen );
face4Pool[ face4count ].v2.copy( v2.screen );
face4Pool[ face4count ].v3.copy( v3.screen );
face4Pool[ face4count ].v4.copy( v4.screen );
face4Pool[ face4count ].z = Math.max( v1.screen.z, Math.max( v2.screen.z, Math.max( v3.screen.z, v4.screen.z ) ) );
face4Pool[ face4count ].material = object.material;
face4Pool[ face4count ].overdraw = object.overdraw;
face4Pool[ face4count ].uvs = object.geometry.uvs[ f ];
face4Pool[ face4count ].color = face.color;
this.renderList.push( face4Pool[ face4count ] );
face4count++;
}
}
}
} else if ( object instanceof THREE.Line ) {
projViewObjMatrix.multiply( projViewMatrix, object.matrix );
for ( v = 0, vl = object.geometry.vertices.length; v < vl; v++ ) {
vertex = object.geometry.vertices[ v ];
vertex.screen.copy( vertex.position );
projViewObjMatrix.transform( vertex.screen );
vertex.__visible = vertex.screen.z > 0 && vertex.screen.z < 1;
if ( v > 0 ) {
vertex2 = object.geometry.vertices[ v - 1 ];
if ( vertex.__visible && vertex2.__visible ) {
if ( !linePool[ lineCount ] ) {
linePool[ lineCount ] = new THREE.RenderableLine();
}
linePool[ lineCount ].v1.copy( vertex.screen );
linePool[ lineCount ].v2.copy( vertex2.screen );
linePool[ lineCount ].z = Math.max( vertex.screen.z, vertex2.screen.z );
linePool[ lineCount ].material = object.material;
this.renderList.push( linePool[lineCount] );
lineCount++;
}
}
}
} else if ( object instanceof THREE.Particle ) {
vector4.set( object.position.x, object.position.y, object.position.z, 1 );
camera.matrix.transform( vector4 );
camera.projectionMatrix.transform( vector4 );
object.screen.set( vector4.x / vector4.w, vector4.y / vector4.w, vector4.z / vector4.w );
if ( object.screen.z > 0 && object.screen.z < 1 ) {
if ( !particlePool[ particleCount ] ) {
particlePool[ particleCount ] = new THREE.RenderableParticle();
}
particlePool[ particleCount ].x = object.screen.x;
particlePool[ particleCount ].y = object.screen.y;
particlePool[ particleCount ].z = object.screen.z;
particlePool[ particleCount ].rotation = object.rotation.z;
particlePool[ particleCount ].scale.x = object.scale.x * Math.abs( vector4.x / vector4.w - ( vector4.x + camera.projectionMatrix.n11 ) / ( vector4.w + camera.projectionMatrix.n14 ) );
particlePool[ particleCount ].scale.y = object.scale.y * Math.abs( vector4.y / vector4.w - ( vector4.y + camera.projectionMatrix.n22 ) / ( vector4.w + camera.projectionMatrix.n24 ) );
particlePool[ particleCount ].material = object.material;
particlePool[ particleCount ].color = object.color;
this.renderList.push( particlePool[ particleCount ] );
particleCount++;
}
}
}
this.renderList.sort( painterSort );
};
};
src/renderers/SVGRenderer.js
浏览文件 @ 647b4a57
......@@ -4,12 +4,19 @@
THREE.SVGRenderer = function () {
THREE.Renderer.call( this );
var _svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
var _renderList = null,
_projector = new THREE.Projector(),
_svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
_width, _height, _widthHalf, _heightHalf,
_clipRect = new THREE.Rectangle(),
_bboxRect = new THREE.Rectangle(),
_color = new THREE.Color( 0xffffffff ),
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xffffffff ),
_vector3 = new THREE.Vector3(), // Needed for PointLight
_svgPathPool = [], _svgCirclePool = [],
_quality = 1;
......@@ -63,11 +70,13 @@ THREE.SVGRenderer = function () {
}
this.project( scene, camera );
_renderList = _projector.projectScene( scene, camera );
for ( e = 0, el = this.renderList.length; e < el; e++ ) {
calculateAmbientLight( scene, _ambientLight );
element = this.renderList[ e ];
for ( e = 0, el = _renderList.length; e < el; e++ ) {
element = _renderList[ e ];
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
......@@ -135,23 +144,52 @@ THREE.SVGRenderer = function () {
}
// TODO: Move out of materials loop
if ( material instanceof THREE.MeshColorFillMaterial ) {
svgNode.setAttribute( 'style', 'fill: ' + material.color.__styleString );
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
svgNode.setAttribute( 'style', 'fill: ' + element.color.__styleString );
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + material.color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + element.color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
_light.copyRGB( _ambientLight );
addLights( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
}
......@@ -163,6 +201,69 @@ THREE.SVGRenderer = function () {
};
function calculateAmbientLight( scene, color ) {
var l, ll, light;
color.setRGBA( 1, 1, 1, 1 );
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
if ( light instanceof THREE.AmbientLight ) {
color.r *= light.color.r;
color.g *= light.color.g;
color.b *= light.color.b;
}
}
}
function addLights( scene, element, color ) {
var l, ll, light, amount;
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
if ( light instanceof THREE.DirectionalLight ) {
amount = element.normalWorld.dot( light.position ) * light.intensity;
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
}
} else if ( light instanceof THREE.PointLight ) {
_vector3.sub( light.position, element.centroidWorld );
_vector3.normalize();
amount = element.normalWorld.dot( _vector3 ) * light.intensity;
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
}
}
}
}
function getPathNode( id ) {
if ( _svgPathPool[ id ] == null ) {
......@@ -204,6 +305,3 @@ THREE.SVGRenderer = function () {
}
};
THREE.SVGRenderer.prototype = new THREE.Renderer();
THREE.SVGRenderer.prototype.constructor = THREE.CanvasRenderer;
src/renderers/WebGLRenderer.js
浏览文件 @ 647b4a57
......@@ -30,7 +30,7 @@ THREE.WebGLRenderer = function () {
this.render = function ( scene, camera ) {
var face, faceColor, object, material, normal, lightColor, lightDirection, light,
var face, faceColor, object, material, normal, lightColor, lightPosition, light,
vertexArray, faceArray, colorArray, normalArray, vertexIndex,
o, ol, f, fl, m, ml, i, v1, v2, v3, v4,
l, ll;
......@@ -56,8 +56,8 @@ THREE.WebGLRenderer = function () {
} else if( light instanceof THREE.DirectionalLight ) {
lightColor = light.color;
lightDirection = light.direction;
_gl.uniform3f( _program.lightingDirection, lightDirection.x, lightDirection.y, lightDirection.z );
lightPosition = light.position;
_gl.uniform3f( _program.lightingDirection, lightPosition.x, lightPosition.y, lightPosition.z );
_gl.uniform3f( _program.directionalColor, lightColor.r, lightColor.g, lightColor.b );
}
......
src/renderers/renderables/RenderableFace3.js
浏览文件 @ 647b4a57
......@@ -8,6 +8,9 @@ THREE.RenderableFace3 = function () {
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.centroidWorld = new THREE.Vector3();
this.normalWorld = new THREE.Vector3();
this.z = null;
this.color = null;
......
src/renderers/renderables/RenderableFace4.js
浏览文件 @ 647b4a57
......@@ -9,6 +9,9 @@ THREE.RenderableFace4 = function () {
this.v3 = new THREE.Vector2();
this.v4 = new THREE.Vector2();
this.centroidWorld = new THREE.Vector3();
this.normalWorld = new THREE.Vector3();
this.z = null;
this.color = null;
......
utils/Builder.py
浏览文件 @ 647b4a57
......@@ -19,13 +19,14 @@ files.append('core/Face4.js')
files.append('core/UV.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('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
......@@ -36,7 +37,7 @@ files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Renderer.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/SVGRenderer.js')
......
utils/BuilderCanvas.py
浏览文件 @ 647b4a57
......@@ -19,13 +19,14 @@ files.append('core/Face4.js')
files.append('core/UV.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('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
......@@ -35,7 +36,7 @@ files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Renderer.js')
files.append('renderers/Projector.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
......
utils/BuilderDOM.py
浏览文件 @ 647b4a57
......@@ -22,7 +22,7 @@ files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Renderer.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/renderables/RenderableParticle.js')
......
utils/BuilderDebug.py
浏览文件 @ 647b4a57
......@@ -19,13 +19,14 @@ files.append('core/Face4.js')
files.append('core/UV.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('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
......@@ -36,7 +37,7 @@ files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Renderer.js')
files.append('renderers/Projector.js')
files.append('renderers/DOMRenderer.js')
files.append('renderers/CanvasRenderer.js')
files.append('renderers/SVGRenderer.js')
......
utils/BuilderSVG.py
浏览文件 @ 647b4a57
......@@ -19,14 +19,14 @@ files.append('core/Face4.js')
files.append('core/UV.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('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('materials/LineColorMaterial.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
......@@ -35,7 +35,7 @@ files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
files.append('renderers/Renderer.js')
files.append('renderers/Projector.js')
files.append('renderers/SVGRenderer.js')
files.append('renderers/renderables/RenderableFace3.js')
files.append('renderers/renderables/RenderableFace4.js')
......
utils/BuilderWebGL.py
浏览文件 @ 647b4a57
......@@ -19,13 +19,14 @@ files.append('core/Face4.js')
files.append('core/UV.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('lights/Light.js')
files.append('lights/AmbientLight.js')
files.append('lights/DirectionalLight.js')
files.append('lights/PointLight.js')
files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或