Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 14bccd81 编写于 作者: A alteredq
浏览文件
操作

Synced with mrdoob's branch.

上级 45b3ceb7 a2acf0b3
展开全部 隐藏空白更改
内联 并排
Showing with 731 addition and 833 deletion
build/Three.js
浏览文件 @ 14bccd81
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 14bccd81
此差异已折叠。
build/ThreeExtras.js
浏览文件 @ 14bccd81
此差异已折叠。
examples/camera_orthographic.html
浏览文件 @ 14bccd81
......@@ -71,10 +71,11 @@
// Cubes
var geometry = new Cube( 50, 50, 50 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
for ( var i = 0; i < 100; i ++ ) {
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: Math.random() * 0.5 + 0.5 } ) );
var cube = new THREE.Mesh( geometry, material );
cube.overdraw = true;
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
......
examples/camera_free.html → examples/canvasrenderer_sandbox.html
浏览文件 @ 14bccd81
......@@ -45,6 +45,7 @@
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
......@@ -55,7 +56,6 @@
<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>
......@@ -68,6 +68,7 @@
var container, stats;
var camera, scene, renderer, objects;
var pointLight;
var sphere;
......@@ -80,29 +81,23 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var moveForward = false,
moveBackwards = false,
moveUp = false,
moveDown = false,
moveLeft = false,
moveRight = false,
var moveForward = false, moveBackwards = false,
moveUp = false, moveDown = false,
moveLeft = false, moveRight = false,
yawLeft = false,
yawRight = false,
pitchUp = false,
pitchDown = false,
rollLeft = false,
rollRight = false;
yawLeft = false, yawRight = false,
pitchUp = false, pitchDown = false,
rollLeft = false, rollRight = false;
var debugContext;
init();
setInterval(loop, 1000/60);
setInterval( loop, 1000 / 60 );
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 150;
......@@ -137,7 +132,7 @@
objects = [];
geometry = new Sphere( 100, 16, 8 );
material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1/*, shading: THREE.FlatShading*/ } );
for ( var i = 0; i < 10; i ++ ) {
......@@ -172,10 +167,9 @@
directionalLight.position.normalize();
scene.addLight( directionalLight );
var pointLight = new THREE.PointLight( 0xff0000, 1 );
pointLight = new THREE.PointLight( 0xff0000, 1 );
scene.addLight( pointLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
......
examples/geometry_birds.html
浏览文件 @ 14bccd81
......@@ -29,7 +29,7 @@
<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>
<script type="text/javascript" src="obj/Bird.js"></script>
<script type="text/javascript">
......
examples/geometry_cube.html
浏览文件 @ 14bccd81
......@@ -73,12 +73,14 @@
cube = new THREE.Mesh( new Cube( 200, 200, 200, 1, 1, materials ), new THREE.MeshFaceMaterial() );
cube.position.y = 150;
cube.overdraw = true;
scene.addObject( cube );
// Plane
plane = new THREE.Mesh( new Plane( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane.rotation.x = -90 * ( Math.PI / 180 );
plane.overdraw = true;
scene.addObject( plane );
renderer = new THREE.CanvasRenderer();
......
examples/geometry_earth.html
浏览文件 @ 14bccd81
......@@ -74,6 +74,7 @@
scene.addObject(mesh);
mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) );
mesh.overdraw = true;
scene.addObject(mesh);
renderer = new THREE.CanvasRenderer();
......
examples/geometry_panorama.html
浏览文件 @ 14bccd81
......@@ -32,6 +32,7 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript">
......
examples/interactive_voxelpainter.html
浏览文件 @ 14bccd81
......@@ -147,7 +147,7 @@
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.transform( intersects[ 0 ].face.normal.clone() ) );
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1 } ), new THREE.MeshFaceMaterial() ] );
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;
......
examples/lights_pointlights.html
浏览文件 @ 14bccd81
......@@ -10,7 +10,7 @@
overflow: hidden;
}
#info {
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
......@@ -39,7 +39,7 @@
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/WaltHead.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript">
......
examples/materials.html
浏览文件 @ 14bccd81
......@@ -14,7 +14,50 @@
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Ray.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<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/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/materials/Material.js"></script>
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/textures/Texture.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/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
......@@ -68,18 +111,16 @@
var geometry = new Sphere( 100, 14, 8, false );
var generatedTexture = new THREE.Texture( generateTexture() );
generatedTexture.image.loaded = 1;
var materials = [];
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true } );
//materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ), overdraw: false, doubleSided: true } );
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
// materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshNormalMaterial( ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false } );
materials.push( { material: new THREE.MeshLambertMaterial( { map: loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false } );
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
......@@ -156,30 +197,15 @@
}
function generateTexture() {
var canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext( '2d' );
var image = context.getImageData( 0, 0, 256, 256 );
var x = 0, y = 0;
function loadImage( path ) {
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
x = j % 256;
y = x == 0 ? y + 1 : y;
image.data[ i + 2 ] = Math.floor( x ^ y );
image.data[ i + 3 ] = 255;
}
var image = document.createElement( 'img' );
var texture = new THREE.Texture( image, THREE.UVMapping )
context.putImageData( image, 0, 0 );
image.onload = function () { texture.loaded = true; };
image.src = path;
return canvas;
return texture;
}
......
examples/materials_multimaterials.html
浏览文件 @ 14bccd81
......@@ -21,7 +21,7 @@
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Multi-materials test</h1>
......@@ -30,19 +30,19 @@
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>
<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
<br/>
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow on anything other than Chrome.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
......@@ -64,33 +64,33 @@
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
var bcanvas = document.getElementById( 'rcanvas' );
var bwebgl = document.getElementById( 'rwebgl' );
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
//render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
......@@ -101,26 +101,22 @@
camera.updateMatrix();
scene = new THREE.Scene();
// SPHERES
sphere = new Sphere( 100, 16, 8, 1 );
for (var i=0; i<10; i++) {
//mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( ) );
mesh = new THREE.Mesh( sphere, [ new THREE.MeshLambertMaterial( { color: 0xffffff } ),
new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true, wireframe_linewidth: 1.5 } ) ] );
mesh = new THREE.Mesh( sphere, [ new THREE.MeshLambertMaterial( { color: 0xffffff } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframe_linewidth: 1.5 } ) ] );
//mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( { color: 0x00aa00, wireframe: true, wireframe_linewidth: 1.5 } ) );
//mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { wireframe: true, wireframe_linewidth: 2.5 } ) );
mesh.position.x = 500 * (Math.random() - 0.5);
mesh.position.y = 500 * (Math.random() - 0.5);
mesh.position.z = 500 * (Math.random() - 0.5);
mesh.position.x = 500 * ( Math.random() - 0.5 );
mesh.position.y = 500 * ( Math.random() - 0.5 );
mesh.position.z = 500 * ( Math.random() - 0.5 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
// LIGHTS
......@@ -142,7 +138,6 @@
mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.addObject(mesh);
if( render_canvas ) {
......@@ -167,7 +162,7 @@
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
......@@ -178,22 +173,22 @@
}
function createScene( geometry ) {
// PROCEDURAL TEXTURES (decals)
var x1 = document.createElement( "canvas" );
var xc1 = x1.getContext("2d");
x1.width = x1.height = 256;
xc1.shadowBlur = 3;
xc1.shadowColor = "#000";
xc1.font = "7pt arial";
xc1.fillStyle = "hsla("+0+",90%,50%,1);"
xc1.fillText("Three", 57, 29);
xc1.fillStyle = "hsla("+0+",90%,50%,0.15);"
xc1.fillRect(40, 70, 60, 50);
for(var i=0;i<500;i++) {
xc1.fillStyle = "hsla("+60*Math.random()+",90%,50%,0.5);"
xc1.fillRect(40+60*Math.random(), 118+10*Math.random(), 2, 10);
......@@ -213,20 +208,20 @@
var xm2 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x2 ) } );
xm2.map.image.loaded = 1; // this is procedurally generated texture
geometry.materials[0].push ( xm1 ); // goes to faces with material 0
geometry.materials[1].push ( xm2 ); // goes to faces with material 1
geometry.materials[4].push ( new THREE.MeshLambertMaterial( { color: 0xff0000, opacity:0.5 } ) );
var materials = [ new THREE.MeshFaceMaterial() ];
// full-mesh wireframe overlay
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, wireframe_linewidth: 1.5 } ) );
// full-mesh color overlay
//materials.push( new THREE.MeshBasicMaterial { color: 0xff0000, opacity: 0.5 } ) );
zmesh = new THREE.Mesh( geometry, materials, 1 );
zmesh.position.x = -80;
zmesh.position.z = 50;
......@@ -237,15 +232,15 @@
scene.addObject(zmesh);
// PLANES with all materials from the model
createMaterialsPalette( geometry.materials, 100, 0 );
}
function createMaterialsPalette( materials, size, bottom ) {
for ( var i=0; i<materials.length; ++i ) {
// material
mesh = new THREE.Mesh( new Plane( size, size ), materials[i] );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
......@@ -255,7 +250,7 @@
mesh.doubleSided = true;
mesh.updateMatrix();
scene.addObject(mesh);
// number
var x = document.createElement( "canvas" );
var xc = x.getContext("2d");
......@@ -265,10 +260,10 @@
xc.fillStyle = "orange";
xc.font = "50pt arial bold";
xc.fillText(i, 10, 64);
var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
xm.map.image.loaded = 1;
mesh = new THREE.Mesh( new Plane( size, size ), xm );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
mesh.position.y = FLOOR + size/2 + bottom;
......@@ -278,22 +273,22 @@
mesh.updateMatrix();
scene.addObject(mesh);
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
......@@ -302,40 +297,40 @@
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
</script>
......
examples/test.html → examples/uqbiquity_test.html
浏览文件 @ 14bccd81
......@@ -56,11 +56,10 @@
<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="geometry/Qrcode.js"></script>
<script type="text/javascript" src="obj/Qrcode.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
......
src/core/Geometry.js
浏览文件 @ 14bccd81
......@@ -22,18 +22,16 @@ THREE.Geometry.prototype = {
face = this.faces[ f ];
face.centroid.set( 0, 0, 0 );
face.centroid.addSelf( this.vertices[ face.a ].position );
face.centroid.addSelf( this.vertices[ face.b ].position );
face.centroid.addSelf( this.vertices[ face.c ].position );
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 );
......
src/lights/Light.js
浏览文件 @ 14bccd81
THREE.Light = function ( hex ) {
this.color = new THREE.Color( 0xff << 24 | hex );
this.color = new THREE.Color( hex );
};
src/lights/PointLight.js
浏览文件 @ 14bccd81
......@@ -2,7 +2,7 @@ THREE.PointLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 0, 0 );
this.position = new THREE.Vector3();
this.intensity = intensity || 1;
};
......
src/materials/textures/Texture.js
浏览文件 @ 14bccd81
......@@ -7,11 +7,13 @@
THREE.Texture = function ( image, mapping, wrap_s, wrap_t ) {
this.image = image;
this.loaded = false;
this.mapping = mapping !== undefined ? mapping : THREE.UVMapping;
this.wrap_s = wrap_s !== undefined ? wrap_s : THREE.ClampToEdge;
this.wrap_t = wrap_t !== undefined ? wrap_t : THREE.ClampToEdge;
this.toString = function () {
return 'THREE.Texture (<br/>' +
......
src/renderers/CanvasRenderer.js
浏览文件 @ 14bccd81
......@@ -17,13 +17,14 @@ THREE.CanvasRenderer = function () {
_contextFillStyle = null,
_contextLineWidth = 1,
_v1, _v2, _v3, _v4,
_v5 = new THREE.Vertex(), _v6 = new THREE.Vertex(), // Needed for latter splitting quads to tris
_v1, _v2, _v3,
_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
_color1, _color2, _color3, _color4,
_color = new THREE.Color(),
_color1 = new THREE.Color(),
_color2 = new THREE.Color(),
_color3 = new THREE.Color(),
_color4 = new THREE.Color(),
_2near, _farPlusNear, _farMinusNear,
_bitmap, _bitmapWidth, _bitmapHeight,
......@@ -33,11 +34,10 @@ THREE.CanvasRenderer = function () {
_bboxRect = new THREE.Rectangle(),
_enableLighting = false,
_color = new THREE.Color( 0xffffff ),
_light = new THREE.Color( 0xffffff ),
_ambientLight = new THREE.Color( 0x000000 ),
_directionalLights = new THREE.Color( 0x000000 ),
_pointLights = new THREE.Color( 0x000000 ),
_light = new THREE.Color(),
_ambientLight = new THREE.Color(),
_directionalLights = new THREE.Color(),
_pointLights = new THREE.Color(),
_pi2 = Math.PI * 2,
_vector3 = new THREE.Vector3(), // Needed for PointLight
......@@ -111,7 +111,13 @@ THREE.CanvasRenderer = function () {
_context.fillRect( _clipRect.getX(), _clipRect.getY(), _clipRect.getWidth(), _clipRect.getHeight() );
*/
( _enableLighting = scene.lights.length > 0 ) && calculateLights( scene );
_enableLighting = scene.lights.length > 0;
if ( _enableLighting ) {
calculateLights( scene );
}
for ( e = 0, el = _renderList.length; e < el; e++ ) {
......@@ -202,63 +208,6 @@ THREE.CanvasRenderer = function () {
}
} else if ( element instanceof THREE.RenderableFace4 ) {
_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
_v4.positionScreen.x *= _canvasWidthHalf; _v4.positionScreen.y *= _canvasHeightHalf;
_v5.positionScreen.copy( _v2.positionScreen );
_v6.positionScreen.copy( _v4.positionScreen );
if ( element.overdraw ) {
expand( _v1.positionScreen, _v2.positionScreen );
expand( _v2.positionScreen, _v4.positionScreen );
expand( _v4.positionScreen, _v1.positionScreen );
expand( _v3.positionScreen, _v5.positionScreen );
expand( _v3.positionScreen, _v6.positionScreen );
}
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
_bboxRect.addPoint( _v4.positionScreen.x, _v4.positionScreen.y );
if ( _clipRect.instersects( _bboxRect ) ) {
m = 0; ml = element.meshMaterial.length;
while ( m < ml ) {
material = element.meshMaterial[ m ++ ];
if ( material instanceof THREE.MeshFaceMaterial ) {
fm = 0; fml = element.faceMaterial.length;
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
material && renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
}
continue;
}
renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
}
}
}
/*
......@@ -320,23 +269,23 @@ THREE.CanvasRenderer = function () {
}
function calculateFaceLight( scene, element, color ) {
function calculateLight( scene, position, normal, color ) {
var l, ll, light, lightColor, amount
lights = scene.lights;
var l, ll, light, lightColor, lightIntensity,
amount, lights = scene.lights;
for ( l = 0, ll = lights.length; l < ll; l ++ ) {
light = lights[ l ];
lightColor = light.color;
lightIntensity = light.intensity;
if ( light instanceof THREE.DirectionalLight ) {
amount = element.normalWorld.dot( light.position );
amount = normal.dot( light.position ) * lightIntensity;
if ( amount > 0 ) {
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
......@@ -345,14 +294,13 @@ THREE.CanvasRenderer = function () {
} else if ( light instanceof THREE.PointLight ) {
_vector3.sub( light.position, element.centroidWorld );
_vector3.sub( light.position, position );
_vector3.normalize();
amount = element.normalWorld.dot( _vector3 );
amount = normal.dot( _vector3 ) * lightIntensity;
if ( amount > 0 ) {
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
......@@ -508,171 +456,86 @@ THREE.CanvasRenderer = function () {
_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
if ( material.map ) {
_bitmap = material.map.image;
_bitmapWidth = _bitmap.width - 1;
_bitmapHeight = _bitmap.height - 1;
_uv1.u = element.uvs[ 0 ].u * _bitmapWidth; _uv1.v = element.uvs[ 0 ].v * _bitmapHeight;
_uv2.u = element.uvs[ 1 ].u * _bitmapWidth; _uv2.v = element.uvs[ 1 ].v * _bitmapHeight;
_uv3.u = element.uvs[ 2 ].u * _bitmapWidth; _uv3.v = element.uvs[ 2 ].v * _bitmapHeight;
drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
return;
}
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
if ( material instanceof THREE.MeshBasicMaterial ) {
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.color, material.wireframe, material.wireframe_linewidth );
} else if ( material instanceof THREE.MeshLambertMaterial ) {
if ( _enableLighting ) {
if ( material.shading == THREE.FlatShading ) {
_light.r = _ambientLight.r;
_light.g = _ambientLight.g;
_light.b = _ambientLight.b;
calculateFaceLight( scene, element, _light );
_color.r = material.color.r * _light.r;
_color.g = material.color.g * _light.g;
_color.b = material.color.b * _light.b;
_color.updateStyleString();
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _color, material.wireframe, material.wireframe_linewidth );
} else if ( material.shading == THREE.SmoothShading ) {
_light.r = _ambientLight.r;
_light.g = _ambientLight.g;
_light.b = _ambientLight.b;
calculateFaceLight( scene, element, _light );
_color.r = material.color.r * _light.r;
_color.g = material.color.g * _light.g;
_color.b = material.color.b * _light.b;
if ( material.map ) {
_color.updateStyleString();
texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.map.image, element.uvs[ 0 ].u, element.uvs[ 0 ].v, element.uvs[ 1 ].u, element.uvs[ 1 ].v, element.uvs[ 2 ].u, element.uvs[ 2 ].v );
}
/*
setBlending( THREE.SubtractiveBlending );
fillPath( material.color.__styleString );
*/
} else {
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.color.__styleString, material.wireframe, material.wireframe_linewidth );
material.wireframe ? strokePath( material.color.__styleString, material.wireframe_linewidth ) : fillPath( material.color.__styleString );
}
} else if ( material instanceof THREE.MeshDepthMaterial ) {
/*
_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
_color.setRGB( _w, _w, _w );
*/
_2near = material.__2near;
_farPlusNear = material.__farPlusNear;
_farMinusNear = material.__farMinusNear;
_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
// _color4 = ~~ ( ( _color2 + _color3 ) * 0.5 );
_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color3, _color3, _color3 ], [ _color3, _color3, _color3 ] );
_uv1.u = 0; _uv1.v = 0;
_uv2.u = _gradientMapQuality; _uv2.v = 0;
_uv3.u = 0; _uv3.v = _gradientMapQuality;
drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
if ( material.env_map ) {
} else if ( material instanceof THREE.MeshNormalMaterial ) {
_color.r = normalToComponent( element.normalWorld.x );
_color.g = normalToComponent( element.normalWorld.y );
_color.b = normalToComponent( element.normalWorld.z );
_color.updateStyleString();
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _color, material.wireframe, material.wireframe_linewidth );
}
}
function renderFace4( v1, v2, v3, v4, v5, v6, element, material, scene ) {
}
*/
if ( material.opacity == 0 ) return;
} else if ( material instanceof THREE.MeshLambertMaterial ) {
setOpacity( material.opacity );
setBlending( material.blending );
if ( material.map && !material.wireframe ) {
_v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
_v4x = v4.positionScreen.x; _v4y = v4.positionScreen.y;
_v5x = v5.positionScreen.x; _v5y = v5.positionScreen.y;
_v6x = v6.positionScreen.x; _v6y = v6.positionScreen.y;
texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.map.image, element.uvs[ 0 ].u, element.uvs[ 0 ].v, element.uvs[ 1 ].u, element.uvs[ 1 ].v, element.uvs[ 2 ].u, element.uvs[ 2 ].v );
if ( material.map ) {
setBlending( THREE.SubtractiveBlending );
_bitmap = material.map.image;
_bitmapWidth = _bitmap.width - 1;
_bitmapHeight = _bitmap.height - 1;
}
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
_uv4.copy( element.uvs[ 3 ] );
if ( _enableLighting ) {
_uv1.u *= _bitmapWidth; _uv1.v *= _bitmapHeight;
_uv2.u *= _bitmapWidth; _uv2.v *= _bitmapHeight;
_uv3.u *= _bitmapWidth; _uv3.v *= _bitmapHeight;
_uv4.u *= _bitmapWidth; _uv4.v *= _bitmapHeight;
if ( material.shading == THREE.SmoothShading && !material.wireframe ) {
drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( _bitmap, _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
_color1.r = _color2.r = _color3.r = _ambientLight.r;
_color1.g = _color2.g = _color3.g = _ambientLight.g;
_color1.b = _color2.b = _color3.b = _ambientLight.b;
return;
calculateLight( scene, element.v1.positionWorld, element.vertexNormalsWorld[ 0 ], _color1 );
calculateLight( scene, element.v2.positionWorld, element.vertexNormalsWorld[ 1 ], _color2 );
calculateLight( scene, element.v3.positionWorld, element.vertexNormalsWorld[ 2 ], _color3 );
}
_color4.r = ( _color2.r + _color3.r ) * 0.5;
_color4.g = ( _color2.g + _color3.g ) * 0.5;
_color4.b = ( _color2.b + _color3.b ) * 0.5;
if ( material instanceof THREE.MeshBasicMaterial ) {
_bitmap = getGradientTexture( _color1, _color2, _color3, _color4 );
drawQuad( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _v4x, _v4y, material.color, material.wireframe, material.wireframe_linewidth );
texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _bitmap, 0, 0, 1, 0, 0, 1 );
} else if ( material instanceof THREE.MeshLambertMaterial ) {
} else {
if ( _enableLighting ) {
_light.r = _ambientLight.r;
_light.g = _ambientLight.g;
_light.b = _ambientLight.b;
_light.r = _ambientLight.r;
_light.g = _ambientLight.g;
_light.b = _ambientLight.b;
calculateLight( scene, element.centroidWorld, element.normalWorld, _light );
calculateFaceLight( scene, element, _light );
_color.r = material.color.r * _light.r;
_color.g = material.color.g * _light.g;
_color.b = material.color.b * _light.b;
_color.r = material.color.r * _light.r;
_color.g = material.color.g * _light.g;
_color.b = material.color.b * _light.b;
_color.updateStyleString();
material.wireframe ? strokePath( _color.__styleString, material.wireframe_linewidth ) : fillPath( _color.__styleString );
_color.updateStyleString();
}
} else {
_color.__styleString = material.color.__styleString;
material.wireframe ? strokePath( material.color.__styleString, material.wireframe_linewidth ) : fillPath( material.color.__styleString );
}
drawQuad( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _v4x, _v4y, _color, material.wireframe, material.wireframe_linewidth );
} else if ( material instanceof THREE.MeshDepthMaterial ) {
/*
......@@ -684,20 +547,17 @@ THREE.CanvasRenderer = function () {
_farPlusNear = material.__farPlusNear;
_farMinusNear = material.__farMinusNear;
_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color4 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v4.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color1.r = _color1.g = _color1.b = 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) );
_color2.r = _color2.g = _color2.b = 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) );
_color3.r = _color3.g = _color3.b = 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) );
_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color4, _color4, _color4 ], [ _color3, _color3, _color3 ] );
_color4.r = ( _color2.r + _color3.r ) * 0.5;
_color4.g = ( _color2.g + _color3.g ) * 0.5;
_color4.b = ( _color2.b + _color3.b ) * 0.5;
_uv1.u = 0; _uv1.v = 0;
_uv2.u = _gradientMapQuality; _uv2.v = 0;
_uv3.u = _gradientMapQuality; _uv3.v = _gradientMapQuality;
_uv4.u = 0; _uv4.v = _gradientMapQuality;
_bitmap = getGradientTexture( _color1, _color2, _color3, _color4 );
drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( _bitmap, _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _bitmap, 0, 0, 1, 0, 0, 1 );
} else if ( material instanceof THREE.MeshNormalMaterial ) {
......@@ -706,13 +566,13 @@ THREE.CanvasRenderer = function () {
_color.b = normalToComponent( element.normalWorld.z );
_color.updateStyleString();
drawQuad( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _v4x, _v4y, _color, material.wireframe, material.wireframe_linewidth );
material.wireframe ? strokePath( _color.__styleString, material.wireframe_linewidth ) : fillPath( _color.__styleString );
}
}
function drawTriangle( x0, y0, x1, y1, x2, y2, color, wireframe, wireframe_linewidth ) {
function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
_context.beginPath();
_context.moveTo( x0, y0 );
......@@ -721,25 +581,9 @@ THREE.CanvasRenderer = function () {
_context.lineTo( x0, y0 );
_context.closePath();
if ( wireframe ) {
setLineWidth( wireframe_linewidth );
setStrokeStyle( color.__styleString );
_context.stroke();
_bboxRect.inflate( wireframe_linewidth * 2 );
} else {
setFillStyle( color.__styleString );
_context.fill();
}
}
function drawQuad( x0, y0, x1, y1, x2, y2, x3, y3, color, wireframe, wireframe_linewidth ) {
function drawQuad( x0, y0, x1, y1, x2, y2, x3, y3 ) {
_context.beginPath();
_context.moveTo( x0, y0 );
......@@ -749,33 +593,35 @@ THREE.CanvasRenderer = function () {
_context.lineTo( x0, y0 );
_context.closePath();
if ( wireframe ) {
}
setLineWidth( wireframe_linewidth );
setStrokeStyle( color.__styleString );
function strokePath( color, linewidth ) {
_context.stroke();
_bboxRect.inflate( wireframe_linewidth * 2 );
setStrokeStyle( color );
setLineWidth( linewidth );
} else {
_context.stroke();
// _bboxRect.inflate( linewidth * 2 );
setFillStyle( color.__styleString );
}
_context.fill();
function fillPath( color ) {
}
setFillStyle( color );
_context.fill();
}
function drawTexturedTriangle( bitmap, x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2 ) {
function texturePath( x0, y0, x1, y1, x2, y2, bitmap, u0, v0, u1, v1, u2, v2 ) {
// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
_context.beginPath();
_context.moveTo( x0, y0 );
_context.lineTo( x1, y1 );
_context.lineTo( x2, y2 );
_context.closePath();
var width = bitmap.width - 1,
height = bitmap.height - 1;
u0 *= width; v0 *= height;
u1 *= width; v1 *= height;
u2 *= width; v2 *= height;
x1 -= x0; y1 -= y0;
x2 -= x0; y2 -= y0;
......@@ -875,25 +721,25 @@ THREE.CanvasRenderer = function () {
}
function getGradientTexture( c1, c2, c3, c4 ) {
function getGradientTexture( color1, color2, color3, color4 ) {
// http://mrdoob.com/blog/post/710
_pixelMapData[ 0 ] = c1[ 0 ];
_pixelMapData[ 1 ] = c1[ 1 ];
_pixelMapData[ 2 ] = c1[ 2 ];
_pixelMapData[ 0 ] = ~~ ( color1.r * 255 );
_pixelMapData[ 1 ] = ~~ ( color1.g * 255 );
_pixelMapData[ 2 ] = ~~ ( color1.b * 255 );
_pixelMapData[ 4 ] = c2[ 0 ];
_pixelMapData[ 5 ] = c2[ 1 ];
_pixelMapData[ 6 ] = c2[ 2 ];
_pixelMapData[ 4 ] = ~~ ( color2.r * 255 );
_pixelMapData[ 5 ] = ~~ ( color2.g * 255 );
_pixelMapData[ 6 ] = ~~ ( color2.b * 255 );
_pixelMapData[ 8 ] = c3[ 0 ];
_pixelMapData[ 9 ] = c3[ 1 ];
_pixelMapData[ 10 ] = c3[ 2 ];
_pixelMapData[ 8 ] = ~~ ( color3.r * 255 );
_pixelMapData[ 9 ] = ~~ ( color3.g * 255 );
_pixelMapData[ 10 ] = ~~ ( color3.b * 255 );
_pixelMapData[ 12 ] = c4[ 0 ];
_pixelMapData[ 13 ] = c4[ 1 ];
_pixelMapData[ 14 ] = c4[ 2 ];
_pixelMapData[ 12 ] = ~~ ( color4.r * 255 );
_pixelMapData[ 13 ] = ~~ ( color4.g * 255 );
_pixelMapData[ 14 ] = ~~ ( color4.b * 255 );
_pixelMapContext.putImageData( _pixelMapImage, 0, 0 );
_gradientMapContext.drawImage( _pixelMap, 0, 0 );
......
src/renderers/Projector.js
浏览文件 @ 14bccd81
......@@ -7,8 +7,8 @@
THREE.Projector = function() {
var _renderList = null,
_face3, _face3Count, _face3Pool = [],
_face4, _face4Count, _face4Pool = [],
_face3, _face32, _face3Count, _face3Pool = [],
//_face4, _face4Count, _face4Pool = [],
_line, _lineCount, _linePool = [],
_particle, _particleCount, _particlePool = [],
......@@ -17,14 +17,16 @@ THREE.Projector = function() {
_projScreenObjectMatrix = new THREE.Matrix4(),
_clippedVertex1PositionScreen = new THREE.Vector4(),
_clippedVertex2PositionScreen = new THREE.Vector4();
_clippedVertex2PositionScreen = new THREE.Vector4(),
_face3VertexNormals, _face4VertexNormals;
this.projectScene = function ( scene, camera ) {
var o, ol, v, vl, f, fl, objects, object,
var o, ol, v, vl, f, fl, n, nl, objects, object,
objectMatrix, objectRotationMatrix, objectMaterial, objectOverdraw,
vertices, vertex, vertexPositionScreen,
faces, face, v1, v2, v3, v4;
faces, face, faceVertexNormals, normal, v1, v2, v3, v4;
_renderList = [];
_face3Count = _face4Count = _lineCount = _particleCount = 0;
......@@ -38,16 +40,16 @@ THREE.Projector = function() {
for ( o = 0, ol = objects.length; o < ol; o++ ) {
object = objects[ o ];
object.autoUpdateMatrix && object.updateMatrix();
objectMatrix = object.matrix;
objectRotationMatrix = object.rotationMatrix;
objectMaterial = object.material;
objectOverdraw = object.overdraw;
object.autoUpdateMatrix && object.updateMatrix();
if ( object instanceof THREE.Mesh ) {
_projScreenObjectMatrix.multiply( _projScreenMatrix, objectMatrix );
// _projScreenObjectMatrix.multiply( _projScreenMatrix, objectMatrix );
// vertices
......@@ -57,9 +59,12 @@ THREE.Projector = function() {
vertex = vertices[ v ];
vertex.positionWorld.copy( vertex.position );
objectMatrix.transform( vertex.positionWorld );
vertexPositionScreen = vertex.positionScreen;
vertexPositionScreen.copy( vertex.position );
_projScreenObjectMatrix.transform( vertexPositionScreen );
vertexPositionScreen.copy( vertex.positionWorld );
_projScreenMatrix.transform( vertexPositionScreen );
// Perform the perspective divide. TODO: This should be be performend
// post clipping (imagine if the vertex lies at the same location as
......@@ -74,7 +79,7 @@ THREE.Projector = function() {
faces = object.geometry.faces;
for ( f = 0, fl = faces.length; f < fl; f++ ) {
for ( f = 0, fl = faces.length; f < fl; f ++ ) {
face = faces[ f ];
......@@ -90,6 +95,10 @@ THREE.Projector = function() {
_face3 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face3.v1.positionWorld.copy( v1.positionWorld );
_face3.v2.positionWorld.copy( v2.positionWorld );
_face3.v3.positionWorld.copy( v3.positionWorld );
_face3.v1.positionScreen.copy( v1.positionScreen );
_face3.v2.positionScreen.copy( v2.positionScreen );
_face3.v3.positionScreen.copy( v3.positionScreen );
......@@ -103,12 +112,29 @@ THREE.Projector = function() {
_face3.centroidScreen.copy( _face3.centroidWorld );
_projScreenMatrix.transform( _face3.centroidScreen );
faceVertexNormals = face.vertexNormals;
_face3VertexNormals = _face3.vertexNormalsWorld;
for ( n = 0, nl = faceVertexNormals.length; n < nl; n ++ ) {
normal = _face3VertexNormals[ n ].copy( faceVertexNormals[ n ] );
objectRotationMatrix.transform( normal );
}
_face3.z = _face3.centroidScreen.z;
_face3.meshMaterial = objectMaterial;
_face3.faceMaterial = face.material;
_face3.overdraw = objectOverdraw;
_face3.uvs = object.geometry.uvs[ f ];
if ( object.geometry.uvs[ f ] ) {
_face3.uvs[ 0 ] = object.geometry.uvs[ f ][ 0 ];
_face3.uvs[ 1 ] = object.geometry.uvs[ f ][ 1 ];
_face3.uvs[ 2 ] = object.geometry.uvs[ f ][ 2 ];
}
_renderList.push( _face3 );
......@@ -130,32 +156,76 @@ THREE.Projector = function() {
( 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();
_face3 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face4.v1.positionScreen.copy( v1.positionScreen );
_face4.v2.positionScreen.copy( v2.positionScreen );
_face4.v3.positionScreen.copy( v3.positionScreen );
_face4.v4.positionScreen.copy( v4.positionScreen );
_face3.v1.positionWorld.copy( v1.positionWorld );
_face3.v2.positionWorld.copy( v2.positionWorld );
_face3.v3.positionWorld.copy( v4.positionWorld );
_face4.normalWorld.copy( face.normal );
objectRotationMatrix.transform( _face4.normalWorld );
_face3.v1.positionScreen.copy( v1.positionScreen );
_face3.v2.positionScreen.copy( v2.positionScreen );
_face3.v3.positionScreen.copy( v4.positionScreen );
_face4.centroidWorld.copy( face.centroid );
objectMatrix.transform( _face4.centroidWorld );
_face3.normalWorld.copy( face.normal );
objectRotationMatrix.transform( _face3.normalWorld );
_face4.centroidScreen.copy( _face4.centroidWorld );
_projScreenMatrix.transform( _face4.centroidScreen );
_face3.centroidWorld.copy( face.centroid );
objectMatrix.transform( _face3.centroidWorld );
_face4.z = _face4.centroidScreen.z;
_face3.centroidScreen.copy( _face3.centroidWorld );
_projScreenMatrix.transform( _face3.centroidScreen );
_face4.meshMaterial = objectMaterial;
_face4.faceMaterial = face.material;
_face4.overdraw = objectOverdraw;
_face4.uvs = object.geometry.uvs[ f ];
_face3.z = _face3.centroidScreen.z;
_face3.meshMaterial = objectMaterial;
_face3.faceMaterial = face.material;
_face3.overdraw = objectOverdraw;
if ( object.geometry.uvs[ f ] ) {
_face3.uvs[ 0 ] = object.geometry.uvs[ f ][ 0 ];
_face3.uvs[ 1 ] = object.geometry.uvs[ f ][ 1 ];
_face3.uvs[ 2 ] = object.geometry.uvs[ f ][ 3 ];
}
_renderList.push( _face3 );
_face3Count ++;
_renderList.push( _face4 );
//
_face4Count ++;
_face32 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face32.v1.positionWorld.copy( v2.positionWorld );
_face32.v2.positionWorld.copy( v3.positionWorld );
_face32.v3.positionWorld.copy( v4.positionWorld );
_face32.v1.positionScreen.copy( v2.positionScreen );
_face32.v2.positionScreen.copy( v3.positionScreen );
_face32.v3.positionScreen.copy( v4.positionScreen );
_face32.normalWorld.copy( _face3.normalWorld );
_face32.centroidWorld.copy( _face3.centroidWorld );
_face32.centroidScreen.copy( _face3.centroidScreen );
_face32.z = _face32.centroidScreen.z;
_face32.meshMaterial = objectMaterial;
_face32.faceMaterial = face.material;
_face32.overdraw = objectOverdraw;
if ( object.geometry.uvs[ f ] ) {
_face32.uvs[ 0 ] = object.geometry.uvs[ f ][ 1 ];
_face32.uvs[ 1 ] = object.geometry.uvs[ f ][ 2 ];
_face32.uvs[ 2 ] = object.geometry.uvs[ f ][ 3 ];
}
_renderList.push( _face32 );
_face3Count ++;
}
......
src/renderers/renderables/RenderableFace3.js
浏览文件 @ 14bccd81
......@@ -19,6 +19,6 @@ THREE.RenderableFace3 = function () {
this.meshMaterial = null;
this.faceMaterial = null;
this.overdraw = false;
this.uv = null;
this.uvs = [ null, null, null ];
};
src/renderers/renderables/RenderableFace4.js 已删除 100644 → 0
浏览文件 @ 45b3ceb7
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.RenderableFace4 = function () {
this.z = null;
this.v1 = new THREE.Vertex();
this.v2 = new THREE.Vertex();
this.v3 = new THREE.Vertex();
this.v4 = new THREE.Vertex();
this.centroidWorld = new THREE.Vector3();
this.centroidScreen = new THREE.Vector3();
this.normalWorld = new THREE.Vector3();
this.vertexNormalsWorld = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
this.meshMaterial = null;
this.faceMaterial = null;
this.overdraw = false;
this.uv = null;
};
utils/build.py
浏览文件 @ 14bccd81
......@@ -130,7 +130,6 @@ def buildExtras(debug):
'renderers/SVGRenderer.js',
'renderers/WebGLRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js',
'extras/GeometryUtils.js',
......@@ -193,7 +192,6 @@ def buildFull(debug):
'renderers/SVGRenderer.js',
'renderers/WebGLRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
......@@ -242,7 +240,6 @@ def buildCanvas(debug):
'renderers/Projector.js',
'renderers/CanvasRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
......@@ -337,7 +334,6 @@ def buildSVG(debug):
'renderers/Projector.js',
'renderers/SVGRenderer.js',
'renderers/renderables/RenderableFace3.js',
'renderers/renderables/RenderableFace4.js',
'renderers/renderables/RenderableParticle.js',
'renderers/renderables/RenderableLine.js'
]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或