提交 98dc841a 编写于 作者: M Mr.doob

Added MeshDepthMaterial.

Optimised Particles projection in CanvasRenderer.
上级 64df690c
此差异已折叠。
此差异已折叠。
......@@ -42,12 +42,13 @@
<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/MeshDepthMaterial.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/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/Texture.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>
......
......@@ -42,7 +42,7 @@
container.appendChild( info );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
......
......@@ -14,49 +14,7 @@
</head>
<body>
<!-- <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/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/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/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
......
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - depth material</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
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;
var debugContext;
init();
setInterval( loop, 1000 / 60 );
// loop();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
camera.position.x = 1000;
camera.position.y = 1000;
camera.position.z = 1000;
// camera.target.position.y = 150;
scene = new THREE.Scene();
// Plane
var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.doubleSided = true;
scene.addObject( plane );
// Spheres
geometry = new Sphere( 100, 16, 8 );
// material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
for (var i = 0; i < 20; i ++ ) {
cube = new THREE.Mesh( geometry, material );
cube.overdraw = true;
cube.position.x = ( i % 5 ) * 200 - 400;
cube.position.z = Math.floor( i / 5 ) * 200 - 400;
/*
cube.position.x = Math.random() * 1000 - 500;
cube.position.y = Math.random() * 1000 - 500;
cube.position.z = Math.random() * 1000 - 500;
cube.rotation.x = Math.random() * 200 - 100;
cube.rotation.y = Math.random() * 200 - 100;
cube.rotation.z = Math.random() * 200 - 100;
cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
*/
scene.addObject(cube);
}
// Lights
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 );
container.appendChild( renderer.domElement );
var debugCanvas = document.createElement( 'canvas' );
debugCanvas.width = 512;
debugCanvas.height = 512;
debugCanvas.style.position = 'absolute';
debugCanvas.style.top = '0px';
debugCanvas.style.left = '0px';
container.appendChild( debugCanvas );
debugContext = debugCanvas.getContext( '2d' );
debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
debugContext.strokeStyle = '#808080';
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
case 38: moveForward = true; break; // up
case 40: moveBackwards = true; break; // down
case 37: moveLeft = true; break; // left
case 39: moveRight = true; break; // right
case 65: yawLeft = true; break; // a
case 68: yawRight = true; break; // d
case 87: moveUp/*pitchUp*/ = true; break; // w
case 83: moveDown/*pitchDown*/ = true; break; // s
case 90: rollLeft = true; break; // z
case 67: rollRight = true; break; // c
}
}
function onDocumentKeyUp( event ) {
switch( event.keyCode ) {
case 38: moveForward = false; break; // up
case 40: moveBackwards = false; break; // down
case 37: moveLeft = false; break; // left
case 39: moveRight = false; break; // right
case 65: yawLeft = false; break; // a
case 68: yawRight = false; break; // d
case 87: moveUp/*pitchUp*/ = false; break; // w
case 83: moveDown/*pitchDown*/ = false; break; // s
case 90: rollLeft = false; break; // z
case 67: rollRight = false; break; // c
}
}
//
function loop() {
if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
debugContext.clearRect( -256, -256, 512, 512 );
debugContext.beginPath();
// center
debugContext.moveTo( -10, 0 );
debugContext.lineTo( 10, 0 );
debugContext.moveTo( 0, -10 );
debugContext.lineTo( 0, 10 );
// camera
debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
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 = 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 );
}
debugContext.closePath();
debugContext.stroke();
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
......@@ -41,12 +41,13 @@
<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/MeshDepthMaterial.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/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/Texture.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>
......
......@@ -55,13 +55,13 @@ THREE.Matrix4.prototype = {
this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
this.n41 = 0; this.n42 = 0; this.n43 = 0; this.
n44 = 1;
this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
},
transform: function ( v ) {
var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0;
var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1;
v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
......@@ -69,7 +69,7 @@ n44 = 1;
vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
if( v.w ) {
if ( v.w ) {
v.w = vw;
......
......@@ -3,10 +3,6 @@
* }
*/
THREE.UVMapping = 0;
THREE.ReflectionMap = 1;
THREE.CubeMap = 2;
THREE.FlatShading = 0;
THREE.GouraudShading = 1;
THREE.PhongShading = 2;
......
......@@ -18,3 +18,7 @@ THREE.Texture = function ( image, mapping ) {
};
};
THREE.UVMapping = 0;
THREE.ReflectionMap = 1;
THREE.CubeMap = 2;
......@@ -26,6 +26,7 @@ THREE.CanvasRenderer = function () {
_ambientLight = new THREE.Color( 0xff000000 ),
_pi2 = Math.PI * 2,
_w, // z-buffer to w-buffer
_vector2 = new THREE.Vector2(), // Needed for expand
_vector3 = new THREE.Vector3(), // Needed for PointLight
_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
......@@ -556,6 +557,11 @@ THREE.CanvasRenderer = function () {
_color.__styleString = material.color.__styleString;
} else if ( material instanceof THREE.MeshDepthMaterial ) {
_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
_color.setRGBA( _w, _w, _w, 1 );
} else if ( material instanceof THREE.MeshLambertMaterial ) {
if ( _enableLighting ) {
......@@ -652,6 +658,11 @@ THREE.CanvasRenderer = function () {
_color.__styleString = material.color.__styleString;
} else if ( material instanceof THREE.MeshDepthMaterial ) {
_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
_color.setRGBA( _w, _w, _w, 1 );
} else if ( material instanceof THREE.MeshLambertMaterial ) {
if ( _enableLighting ) {
......@@ -703,37 +714,41 @@ THREE.CanvasRenderer = function () {
}
function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1u, _uv1v, _uv2u, _uv2v, _uv3u, _uv3v ) {
function drawTexturedTriangle( bitmap, x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2 ) {
// Textured triangle drawing by Thatcher Ulrich.
// http://tulrich.com/geekstuff/canvas/jsgl.js
var denom, m11, m12, m21, m22, dx, dy;
// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.moveTo( x0, y0 );
_context.lineTo( x1, y1 );
_context.lineTo( x2, y2 );
_context.closePath();
_context.save();
_context.clip();
x1 -= x0;
y1 -= y0;
x2 -= x0;
y2 -= y0;
u1 -= u0;
v1 -= v0;
u2 -= u0;
v2 -= v0;
denom = _uv1u * ( _uv3v - _uv2v ) - _uv2u * _uv3v + _uv3u * _uv2v + ( _uv2u - _uv3u ) * _uv1v;
var det = 1 / ( u1 * v2 - u2 * v1 ),
m11 = - ( _uv1v * (v3x - v2x ) - _uv2v * v3x + _uv3v * v2x + ( _uv2v - _uv3v ) * v1x ) / denom;
m12 = ( _uv2v * v3y + _uv1v * ( v2y - v3y ) - _uv3v * v2y + ( _uv3v - _uv2v) * v1y ) / denom;
m21 = ( _uv1u * ( v3x - v2x ) - _uv2u * v3x + _uv3u * v2x + ( _uv2u - _uv3u ) * v1x ) / denom;
m22 = - ( _uv2u * v3y + _uv1u * ( v2y - v3y ) - _uv3u * v2y + ( _uv3u - _uv2u ) * v1y ) / denom;
dx = ( _uv1u * ( _uv3v * v2x - _uv2v * v3x ) + _uv1v * ( _uv2u * v3x - _uv3u * v2x ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1x ) / denom;
dy = ( _uv1u * ( _uv3v * v2y - _uv2v * v3y ) + _uv1v * ( _uv2u * v3y - _uv3u * v2y ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1y ) / denom;
a = ( v2 * x1 - v1 * x2 ) * det,
b = ( v2 * y1 - v1 * y2 ) * det,
c = ( u1 * x2 - u2 * x1 ) * det,
d = ( u1 * y2 - u2 * y1 ) * det,
_context.transform( m11, m12, m21, m22, dx, dy );
e = x0 - a * u0 - c * v0,
f = y0 - b * u0 - d * v0;
_context.save();
_context.transform( a, b, c, d, e, f );
_context.clip();
_context.drawImage( bitmap, 0, 0 );
_context.restore();
}
// Hide anti-alias gaps
......
......@@ -186,7 +186,7 @@ THREE.Projector = function() {
_line.v1.copy( vertex.positionScreen );
_line.v2.copy( vertex2.positionScreen );
// TODO: Use centriums here too.
// TODO: Use centroids here too.
_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
_line.material = object.material;
......@@ -203,24 +203,23 @@ THREE.Projector = function() {
_vector4.set( object.position.x, object.position.y, object.position.z, 1 );
camera.matrix.transform( _vector4 );
camera.projectionMatrix.transform( _vector4 );
_projScreenMatrix.transform( _vector4 );
object.screen.set( _vector4.x / _vector4.w, _vector4.y / _vector4.w, _vector4.z / _vector4.w );
_vector4.z /= _vector4.w;
if ( object.screen.z > 0 && object.screen.z < 1 ) {
if ( _vector4.z > 0 && _vector4.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.x = _vector4.x / _vector4.w;
_particle.y = _vector4.y / _vector4.w;
_particle.z = _vector4.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.scale.x = object.scale.x * Math.abs( _particle.x - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
_particle.scale.y = object.scale.y * Math.abs( _particle.y - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
_particle.material = object.material;
_particle.color = object.color;
_renderList.push( _particle );
......
var Renderer = Class.extend
({
matrix: null,
viewport: null,
renderList: null,
face3Pool: null,
face4Pool: null,
width: null,
height: null,
widthHalf: null,
heightHalf: null,
init: function()
{
this.matrix = new Matrix4();
this.face3Pool = new Array();
this.face4Pool = new Array();
},
setSize: function( width, height )
{
this.width = width;
this.height = height;
this.widthHalf = this.width / 2;
this.heightHalf = this.height / 2;
},
sort: function(a, b)
{
return a.screen.z - b.screen.z;
},
render: function( scene, camera )
{
var vertex, face, object;
var face3count = 0, face4count = 0;
var focuszoom = camera.focus * camera.zoom;
var matrixMultiply = this.matrix.multiply;
var matrixTransform = this.matrix.transform;
this.renderList = new Array();
for (var i = 0; i < scene.objects.length; i++)
{
object = scene.objects[i];
if (object instanceof Mesh)
{
matrixMultiply( camera.matrix, object.matrix );
// vertices
for (var j = 0; j < object.geometry.vertices.length; j++)
{
vertex = object.geometry.vertices[j];
vertex.screen.copy( vertex );
matrixTransform( vertex.screen );
vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
vertex.visible = vertex.screen.z > 0;
vertex.screen.x *= vertex.screen.z;
vertex.screen.y *= vertex.screen.z;
}
// faces
for (j = 0; j < object.geometry.faces.length; j++)
{
face = object.geometry.faces[j];
// TODO: Use normals for culling
if (face instanceof Face3)
{
if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
(face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
(face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
{
face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
if (this.face3Pool[face3count] == null)
this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
this.face3Pool[face3count].a.screen.copy(face.a.screen);
this.face3Pool[face3count].b.screen.copy(face.b.screen);
this.face3Pool[face3count].c.screen.copy(face.c.screen);
this.face3Pool[face3count].screen.z = face.screen.z;
this.face3Pool[face3count].color = face.color;
this.face3Pool[face3count].material = object.material;
this.renderList.push( this.face3Pool[face3count] );
face3count++;
}
}
else if (face instanceof Face4)
{
if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
((face.d.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
(face.d.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0 ||
(face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
(face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
{
face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;
if (this.face4Pool[face4count] == null)
this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
this.face4Pool[face4count].a.screen.copy(face.a.screen);
this.face4Pool[face4count].b.screen.copy(face.b.screen);
this.face4Pool[face4count].c.screen.copy(face.c.screen);
this.face4Pool[face4count].d.screen.copy(face.d.screen);
this.face4Pool[face4count].screen.z = face.screen.z;
this.face4Pool[face4count].color = face.color;
this.face4Pool[face4count].material = object.material;
this.renderList.push( this.face4Pool[face4count] );
face4count++;
}
}
}
}
else if (object instanceof Particle)
{
object.screen.copy(object.position);
camera.matrix.transform( object.screen );
object.screen.z = focuszoom / (camera.focus + object.screen.z);
if (object.screen.z < 0)
continue;
object.screen.x *= object.screen.z;
object.screen.y *= object.screen.z;
this.renderList.push( object );
}
}
this.renderList.sort(this.sort);
}
});
......@@ -16,6 +16,7 @@ THREE.SVGRenderer = function () {
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xffffffff ),
_w, // z-buffer to w-buffer
_vector3 = new THREE.Vector3(), // Needed for PointLight
_svgPathPool = [], _svgCirclePool = [],
......@@ -331,6 +332,11 @@ THREE.SVGRenderer = function () {
_color.__styleString = material.color.__styleString;
} else if ( material instanceof THREE.MeshDepthMaterial ) {
_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear) );
_color.setRGBA( _w, _w, _w, 1 );
} else if ( material instanceof THREE.MeshLambertMaterial ) {
if ( _enableLighting ) {
......
......@@ -111,13 +111,14 @@ def buildFull(debug):
'materials/Material.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshDepthMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'materials/ParticleDOMMaterial.js',
'materials/Texture.js',
'materials/textures/Texture.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/DOMRenderer.js',
......@@ -163,12 +164,13 @@ def buildCanvas(debug):
'materials/Material.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshDepthMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'materials/Texture.js',
'materials/textures/Texture.js',
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/CanvasRenderer.js',
......@@ -211,12 +213,13 @@ def buildWebGL(debug):
'materials/Material.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshDepthMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'materials/Texture.js',
'materials/textures/Texture.js',
'scenes/Scene.js',
'renderers/WebGLRenderer.js',
]
......@@ -254,6 +257,7 @@ def buildSVG(debug):
'materials/Material.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshDepthMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshFaceMaterial.js',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册