18-THREE.JS 基本材质

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <script type="text/javascript" src="../libs/CanvasRenderer.js"></script>

    <script type="text/javascript" src="../libs/Projector.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 场景一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建一个GL渲染器

        var renderer;

        var webGLRenderer = new THREE.WebGLRenderer();

        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        webGLRenderer.shadowMapEnabled = true;

		// 创建一个Canvas渲染器

        var canvasRenderer = new THREE.CanvasRenderer();

        canvasRenderer.setSize(window.innerWidth, window.innerHeight);

        renderer = webGLRenderer;

		//创建一个地面 与地面水平

        var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);

        var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({color: 0x777777}));

        groundMesh.rotation.x = -Math.PI / 2;

        groundMesh.position.y = -20;

        scene.add(groundMesh);

		//圆球

        var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);

        //正方体

        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);

        //长方形

        var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

        var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);

        var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

        var plane = new THREE.Mesh(planeGeometry, meshMaterial);

        // 设置圆球的坐标

        sphere.position.x = 0;

        sphere.position.y = 3;

        sphere.position.z = 2;

        cube.position = sphere.position;

        plane.position = sphere.position;

        // 把正方体添加到场景中去

        scene.add(cube);

        // 设置相机的位置和朝向

        camera.position.x = -20;

        camera.position.y = 50;

        camera.position.z = 40;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 添加自然光

        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

        scene.add(ambientLight);

        // 添加聚光灯

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        scene.add(spotLight);

        // 把渲染之后的效果放到DOM元素中去

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var step = 0;

        var oldContext = null;

        var controls = new function () {

            this.rotationSpeed = 0.02;

            this.bouncingSpeed = 0.03;

            this.opacity = meshMaterial.opacity;

            this.transparent = meshMaterial.transparent;

            this.overdraw = meshMaterial.overdraw;

            this.visible = meshMaterial.visible;

            this.side = "front";

            this.color = meshMaterial.color.getStyle();

            this.wireframe = meshMaterial.wireframe;

            this.wireframeLinewidth = meshMaterial.wireframeLinewidth;

            this.wireFrameLineJoin = meshMaterial.wireframeLinejoin;

            this.selectedMesh = "cube";

            this.switchRenderer = function () {

                if (renderer instanceof THREE.WebGLRenderer) {

                    renderer = canvasRenderer;

                    document.getElementById("WebGL-output").empty();

                    document.getElementById("WebGL-output").appendChild(renderer.domElement);

                } else {

                    renderer = webGLRenderer;

                    document.getElementById("WebGL-output").empty();

                    document.getElementById("WebGL-output").appendChild(renderer.domElement);

                }

            }

        };

        var gui = new dat.GUI();

        var spGui = gui.addFolder("Mesh");

        spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {

            meshMaterial.opacity = e

        });

        spGui.add(controls, 'transparent').onChange(function (e) {

            meshMaterial.transparent = e

        });

        spGui.add(controls, 'wireframe').onChange(function (e) {

            meshMaterial.wireframe = e

        });

        spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) {

            meshMaterial.wireframeLinewidth = e

        });

        spGui.add(controls, 'visible').onChange(function (e) {

            meshMaterial.visible = e

        });

        spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) {

            switch (e) {

                case "front":

                    meshMaterial.side = THREE.FrontSide;

                    break;

                case "back":

                    meshMaterial.side = THREE.BackSide;

                    break;

                case "double":

                    meshMaterial.side = THREE.DoubleSide;

                    break;

            }

            meshMaterial.needsUpdate = true;

        });

        spGui.addColor(controls, 'color').onChange(function (e) {

            meshMaterial.color.setStyle(e)

        });

        spGui.add(controls, 'selectedMesh', ["cube", "sphere", "plane"]).onChange(function (e) {

            scene.remove(plane);

            scene.remove(cube);

            scene.remove(sphere);

            switch (e) {

                case "cube":

                    scene.add(cube);

                    break;

                case "sphere":

                    scene.add(sphere);

                    break;

                case "plane":

                    scene.add(plane);

                    break;

            }

            scene.add(e);

        });

        gui.add(controls, 'switchRenderer');

        var cvGui = gui.addFolder("Canvas renderer");

        cvGui.add(controls, 'overdraw').onChange(function (e) {

            meshMaterial.overdraw = e

        });

        cvGui.add(controls, 'wireFrameLineJoin', ['round', 'bevel', 'miter']).onChange(function (e) {

            meshMaterial.wireframeLinejoin = e

        });

        render();

        function render() {

            stats.update();

            cube.rotation.y = step += 0.01;

            plane.rotation.y = step;

            sphere.rotation.y = step;

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init;

</script>

</body>

</html>

　　CanvasRenderer.js

/**

 * @author mrdoob / http://mrdoob.com/

 */

THREE.SpriteCanvasMaterial = function ( parameters ) {

	THREE.Material.call( this );

	this.type = 'SpriteCanvasMaterial';

	this.color = new THREE.Color( 0xffffff );

	this.program = function ( context, color ) {};

	this.setValues( parameters );

};

THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );

THREE.SpriteCanvasMaterial.prototype.clone = function () {

	var material = new THREE.SpriteCanvasMaterial();

	THREE.Material.prototype.clone.call( this, material );

	material.color.copy( this.color );

	material.program = this.program;

	return material;

};

//

THREE.CanvasRenderer = function ( parameters ) {

	console.log( 'THREE.CanvasRenderer', THREE.REVISION );

	var smoothstep = THREE.Math.smoothstep;

	parameters = parameters || {};

	var _this = this,

	_renderData, _elements, _lights,

	_projector = new THREE.Projector(),

	_canvas = parameters.canvas !== undefined

			 ? parameters.canvas

			 : document.createElement( 'canvas' ),

	_canvasWidth = _canvas.width,

	_canvasHeight = _canvas.height,

	_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),

	_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),

	_viewportX = 0,

	_viewportY = 0,

	_viewportWidth = _canvasWidth,

	_viewportHeight = _canvasHeight,

	_context = _canvas.getContext( '2d', {

		alpha: parameters.alpha === true

	} ),

	_clearColor = new THREE.Color( 0x000000 ),

	_clearAlpha = 0,

	_contextGlobalAlpha = 1,

	_contextGlobalCompositeOperation = 0,

	_contextStrokeStyle = null,

	_contextFillStyle = null,

	_contextLineWidth = null,

	_contextLineCap = null,

	_contextLineJoin = null,

	_contextLineDash = [],

	_camera,

	_v1, _v2, _v3, _v4,

	_v5 = new THREE.RenderableVertex(),

	_v6 = new THREE.RenderableVertex(),

	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,

	_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,

	_color = new THREE.Color(),

	_color1 = new THREE.Color(),

	_color2 = new THREE.Color(),

	_color3 = new THREE.Color(),

	_color4 = new THREE.Color(),

	_diffuseColor = new THREE.Color(),

	_emissiveColor = new THREE.Color(),

	_lightColor = new THREE.Color(),

	_patterns = {},

	_image, _uvs,

	_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,

	_clipBox = new THREE.Box2(),

	_clearBox = new THREE.Box2(),

	_elemBox = new THREE.Box2(),

	_ambientLight = new THREE.Color(),

	_directionalLights = new THREE.Color(),

	_pointLights = new THREE.Color(),

	_vector3 = new THREE.Vector3(), // Needed for PointLight

	_centroid = new THREE.Vector3(),

	_normal = new THREE.Vector3(),

	_normalViewMatrix = new THREE.Matrix3();

	// dash+gap fallbacks for Firefox and everything else

	if ( _context.setLineDash === undefined ) {

		_context.setLineDash = function () {}

	}

	this.domElement = _canvas;

	this.devicePixelRatio = parameters.devicePixelRatio !== undefined

				 ? parameters.devicePixelRatio

				 : self.devicePixelRatio !== undefined

					 ? self.devicePixelRatio

					 : 1;

	this.autoClear = true;

	this.sortObjects = true;

	this.sortElements = true;

	this.info = {

		render: {

			vertices: 0,

			faces: 0

		}

	}

	// WebGLRenderer compatibility

	this.supportsVertexTextures = function () {};

	this.setFaceCulling = function () {};

	this.setSize = function ( width, height, updateStyle ) {

		_canvasWidth = width * this.devicePixelRatio;

		_canvasHeight = height * this.devicePixelRatio;

		_canvas.width = _canvasWidth;

		_canvas.height = _canvasHeight;

		_canvasWidthHalf = Math.floor( _canvasWidth / 2 );

		_canvasHeightHalf = Math.floor( _canvasHeight / 2 );

		if ( updateStyle !== false ) {

			_canvas.style.width = width + 'px';

			_canvas.style.height = height + 'px';

		}

		_clipBox.min.set( -_canvasWidthHalf, -_canvasHeightHalf ),

		_clipBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );

		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );

		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );

		_contextGlobalAlpha = 1;

		_contextGlobalCompositeOperation = 0;

		_contextStrokeStyle = null;

		_contextFillStyle = null;

		_contextLineWidth = null;

		_contextLineCap = null;

		_contextLineJoin = null;

		this.setViewport( 0, 0, width, height );

	};

	this.setViewport = function ( x, y, width, height ) {

		_viewportX = x * this.devicePixelRatio;

		_viewportY = y * this.devicePixelRatio;

		_viewportWidth = width * this.devicePixelRatio;

		_viewportHeight = height * this.devicePixelRatio;

	};

	this.setScissor = function () {};

	this.enableScissorTest = function () {};

	this.setClearColor = function ( color, alpha ) {

		_clearColor.set( color );

		_clearAlpha = alpha !== undefined ? alpha : 1;

		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );

		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );

	};

	this.setClearColorHex = function ( hex, alpha ) {

		console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );

		this.setClearColor( hex, alpha );

	};

	this.getClearColor = function () {

		return _clearColor;

	};

	this.getClearAlpha = function () {

		return _clearAlpha;

	};

	this.getMaxAnisotropy = function () {

		return 0;

	};

	this.clear = function () {

		if ( _clearBox.empty() === false ) {

			_clearBox.intersect( _clipBox );

			_clearBox.expandByScalar( 2 );

			_clearBox.min.x = _clearBox.min.x + _canvasWidthHalf;

			_clearBox.min.y =  - _clearBox.min.y + _canvasHeightHalf;

			_clearBox.max.x = _clearBox.max.x + _canvasWidthHalf;

			_clearBox.max.y =  - _clearBox.max.y + _canvasHeightHalf;

			if ( _clearAlpha < 1 ) {

				_context.clearRect(

					_clearBox.min.x | 0,

					_clearBox.min.y | 0,

					( _clearBox.max.x - _clearBox.min.x ) | 0,

					( _clearBox.max.y - _clearBox.min.y ) | 0

				);

			}

			if ( _clearAlpha > 0 ) {

				setBlending( THREE.NormalBlending );

				setOpacity( 1 );

				setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );

				_context.fillRect(

					_clearBox.min.x | 0,

					_clearBox.min.y | 0,

					( _clearBox.max.x - _clearBox.min.x ) | 0,

					( _clearBox.max.y - _clearBox.min.y ) | 0

				);

			}

			_clearBox.makeEmpty();

		}

	};

	// compatibility

	this.clearColor = function () {};

	this.clearDepth = function () {};

	this.clearStencil = function () {};

	this.render = function ( scene, camera ) {

		if ( camera instanceof THREE.Camera === false ) {

			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );

			return;

		}

		if ( this.autoClear === true ) this.clear();

		_this.info.render.vertices = 0;

		_this.info.render.faces = 0;

		_context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );

		_context.translate( _canvasWidthHalf, _canvasHeightHalf );

		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );

		_elements = _renderData.elements;

		_lights = _renderData.lights;

		_camera = camera;

		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );

		/* DEBUG

		setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );

		_context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );

		*/

		calculateLights();

		for ( var e = 0, el = _elements.length; e < el; e ++ ) {

			var element = _elements[ e ];

			var material = element.material;

			if ( material === undefined || material.opacity === 0 ) continue;

			_elemBox.makeEmpty();

			if ( element instanceof THREE.RenderableSprite ) {

				_v1 = element;

				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;

				renderSprite( _v1, element, material );

			} else if ( element instanceof THREE.RenderableLine ) {

				_v1 = element.v1; _v2 = element.v2;

				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;

				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;

				_elemBox.setFromPoints( [

					_v1.positionScreen,

					_v2.positionScreen

				] );

				if ( _clipBox.isIntersectionBox( _elemBox ) === true ) {

					renderLine( _v1, _v2, element, material );

				}

			} else if ( element instanceof THREE.RenderableFace ) {

				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;

				if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;

				if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;

				if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;

				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;

				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;

				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;

				if ( material.overdraw > 0 ) {

					expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );

					expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );

					expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );

				}

				_elemBox.setFromPoints( [

					_v1.positionScreen,

					_v2.positionScreen,

					_v3.positionScreen

				] );

				if ( _clipBox.isIntersectionBox( _elemBox ) === true ) {

					renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );

				}

			}

			/* DEBUG

			setLineWidth( 1 );

			setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );

			_context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );

			*/

			_clearBox.union( _elemBox );

		}

		/* DEBUG

		setLineWidth( 1 );

		setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );

		_context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );

		*/

		_context.setTransform( 1, 0, 0, 1, 0, 0 );

	};

	//

	function calculateLights() {

		_ambientLight.setRGB( 0, 0, 0 );

		_directionalLights.setRGB( 0, 0, 0 );

		_pointLights.setRGB( 0, 0, 0 );

		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {

			var light = _lights[ l ];

			var lightColor = light.color;

			if ( light instanceof THREE.AmbientLight ) {

				_ambientLight.add( lightColor );

			} else if ( light instanceof THREE.DirectionalLight ) {

				// for sprites

				_directionalLights.add( lightColor );

			} else if ( light instanceof THREE.PointLight ) {

				// for sprites

				_pointLights.add( lightColor );

			}

		}

	}

	function calculateLight( position, normal, color ) {

		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {

			var light = _lights[ l ];

			_lightColor.copy( light.color );

			if ( light instanceof THREE.DirectionalLight ) {

				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();

				var amount = normal.dot( lightPosition );

				if ( amount <= 0 ) continue;

				amount *= light.intensity;

				color.add( _lightColor.multiplyScalar( amount ) );

			} else if ( light instanceof THREE.PointLight ) {

				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );

				var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );

				if ( amount <= 0 ) continue;

				amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );

				if ( amount == 0 ) continue;

				amount *= light.intensity;

				color.add( _lightColor.multiplyScalar( amount ) );

			}

		}

	}

	function renderSprite( v1, element, material ) {

		setOpacity( material.opacity );

		setBlending( material.blending );

		var scaleX = element.scale.x * _canvasWidthHalf;

		var scaleY = element.scale.y * _canvasHeightHalf;

		var dist = 0.5 * Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite

		_elemBox.min.set( v1.x - dist, v1.y - dist );

		_elemBox.max.set( v1.x + dist, v1.y + dist );

		if ( material instanceof THREE.SpriteMaterial ) {

			var texture = material.map;

			if ( texture !== null && texture.image !== undefined ) {

				if ( texture.hasEventListener( 'update', onTextureUpdate ) === false ) {

					if ( texture.image.width > 0 ) {

						textureToPattern( texture );

					}

					texture.addEventListener( 'update', onTextureUpdate );

				}

				var pattern = _patterns[ texture.id ];

				if ( pattern !== undefined ) {

					setFillStyle( pattern );

				} else {

					setFillStyle( 'rgba( 0, 0, 0, 1 )' );

				}

				//

				var bitmap = texture.image;

				var ox = bitmap.width * texture.offset.x;

				var oy = bitmap.height * texture.offset.y;

				var sx = bitmap.width * texture.repeat.x;

				var sy = bitmap.height * texture.repeat.y;

				var cx = scaleX / sx;

				var cy = scaleY / sy;

				_context.save();

				_context.translate( v1.x, v1.y );

				if ( material.rotation !== 0 ) _context.rotate( material.rotation );

				_context.translate( - scaleX / 2, - scaleY / 2 );

				_context.scale( cx, cy );

				_context.translate( - ox, - oy );

				_context.fillRect( ox, oy, sx, sy );

				_context.restore();

			} else {

				// no texture

				setFillStyle( material.color.getStyle() );

				_context.save();

				_context.translate( v1.x, v1.y );

				if ( material.rotation !== 0 ) _context.rotate( material.rotation );

				_context.scale( scaleX, - scaleY );

				_context.fillRect( - 0.5, - 0.5, 1, 1 );

				_context.restore();

			}

		} else if ( material instanceof THREE.SpriteCanvasMaterial ) {

			setStrokeStyle( material.color.getStyle() );

			setFillStyle( material.color.getStyle() );

			_context.save();

			_context.translate( v1.x, v1.y );

			if ( material.rotation !== 0 ) _context.rotate( material.rotation );

			_context.scale( scaleX, scaleY );

			material.program( _context );

			_context.restore();

		}

		/* DEBUG

		setStrokeStyle( 'rgb(255,255,0)' );

		_context.beginPath();

		_context.moveTo( v1.x - 10, v1.y );

		_context.lineTo( v1.x + 10, v1.y );

		_context.moveTo( v1.x, v1.y - 10 );

		_context.lineTo( v1.x, v1.y + 10 );

		_context.stroke();

		*/

	}

	function renderLine( v1, v2, element, material ) {

		setOpacity( material.opacity );

		setBlending( material.blending );

		_context.beginPath();

		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );

		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );

		if ( material instanceof THREE.LineBasicMaterial ) {

			setLineWidth( material.linewidth );

			setLineCap( material.linecap );

			setLineJoin( material.linejoin );

			if ( material.vertexColors !== THREE.VertexColors ) {

				setStrokeStyle( material.color.getStyle() );

			} else {

				var colorStyle1 = element.vertexColors[ 0 ].getStyle();

				var colorStyle2 = element.vertexColors[ 1 ].getStyle();

				if ( colorStyle1 === colorStyle2 ) {

					setStrokeStyle( colorStyle1 );

				} else {

					try {

						var grad = _context.createLinearGradient(

							v1.positionScreen.x,

							v1.positionScreen.y,

							v2.positionScreen.x,

							v2.positionScreen.y

						);

						grad.addColorStop( 0, colorStyle1 );

						grad.addColorStop( 1, colorStyle2 );

					} catch ( exception ) {

						grad = colorStyle1;

					}

					setStrokeStyle( grad );

				}

			}

			_context.stroke();

			_elemBox.expandByScalar( material.linewidth * 2 );

		} else if ( material instanceof THREE.LineDashedMaterial ) {

			setLineWidth( material.linewidth );

			setLineCap( material.linecap );

			setLineJoin( material.linejoin );

			setStrokeStyle( material.color.getStyle() );

			setLineDash( [ material.dashSize, material.gapSize ] );

			_context.stroke();

			_elemBox.expandByScalar( material.linewidth * 2 );

			setLineDash( [] );

		}

	}

	function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {

		_this.info.render.vertices += 3;

		_this.info.render.faces ++;

		setOpacity( material.opacity );

		setBlending( material.blending );

		_v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;

		_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;

		_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;

		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );

		if ( ( material instanceof THREE.MeshLambertMaterial || material instanceof THREE.MeshPhongMaterial ) && material.map === null ) {

			_diffuseColor.copy( material.color );

			_emissiveColor.copy( material.emissive );

			if ( material.vertexColors === THREE.FaceColors ) {

				_diffuseColor.multiply( element.color );

			}

			_color.copy( _ambientLight );

			_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );

			calculateLight( _centroid, element.normalModel, _color );

			_color.multiply( _diffuseColor ).add( _emissiveColor );

			material.wireframe === true

				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )

				 : fillPath( _color );

		} else if ( material instanceof THREE.MeshBasicMaterial ||

				    material instanceof THREE.MeshLambertMaterial ||

				    material instanceof THREE.MeshPhongMaterial ) {

			if ( material.map !== null ) {

				if ( material.map.mapping instanceof THREE.UVMapping ) {

					_uvs = element.uvs;

					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );

				}

			} else if ( material.envMap !== null ) {

				if ( material.envMap.mapping instanceof THREE.SphericalReflectionMapping ) {

					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );

					_uv1x = 0.5 * _normal.x + 0.5;

					_uv1y = 0.5 * _normal.y + 0.5;

					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );

					_uv2x = 0.5 * _normal.x + 0.5;

					_uv2y = 0.5 * _normal.y + 0.5;

					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );

					_uv3x = 0.5 * _normal.x + 0.5;

					_uv3y = 0.5 * _normal.y + 0.5;

					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );

				} else if ( material.envMap.mapping instanceof THREE.SphericalRefractionMapping ) {

					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );

					_uv1x = - 0.5 * _normal.x + 0.5;

					_uv1y = - 0.5 * _normal.y + 0.5;

					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );

					_uv2x = - 0.5 * _normal.x + 0.5;

					_uv2y = - 0.5 * _normal.y + 0.5;

					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );

					_uv3x = - 0.5 * _normal.x + 0.5;

					_uv3y = - 0.5 * _normal.y + 0.5;

					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );

				}

			} else {

				_color.copy( material.color );

				if ( material.vertexColors === THREE.FaceColors ) {

					_color.multiply( element.color );

				}

				material.wireframe === true

					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )

					 : fillPath( _color );

			}

		} else if ( material instanceof THREE.MeshDepthMaterial ) {

			_color.r = _color.g = _color.b = 1 - smoothstep( v1.positionScreen.z * v1.positionScreen.w, _camera.near, _camera.far );

			material.wireframe === true

					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )

					 : fillPath( _color );

		} else if ( material instanceof THREE.MeshNormalMaterial ) {

			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );

			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );

			material.wireframe === true

				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )

				 : fillPath( _color );

		} else {

			_color.setRGB( 1, 1, 1 );

			material.wireframe === true

				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )

				 : fillPath( _color );

		}

	}

	//

	function drawTriangle( x0, y0, x1, y1, x2, y2 ) {

		_context.beginPath();

		_context.moveTo( x0, y0 );

		_context.lineTo( x1, y1 );

		_context.lineTo( x2, y2 );

		_context.closePath();

	}

	function strokePath( color, linewidth, linecap, linejoin ) {

		setLineWidth( linewidth );

		setLineCap( linecap );

		setLineJoin( linejoin );

		setStrokeStyle( color.getStyle() );

		_context.stroke();

		_elemBox.expandByScalar( linewidth * 2 );

	}

	function fillPath( color ) {

		setFillStyle( color.getStyle() );

		_context.fill();

	}

	function onTextureUpdate ( event ) {

		textureToPattern( event.target );

	}

	function textureToPattern( texture ) {

		if ( texture instanceof THREE.CompressedTexture ) return;

		var repeatX = texture.wrapS === THREE.RepeatWrapping;

		var repeatY = texture.wrapT === THREE.RepeatWrapping;

		var image = texture.image;

		var canvas = document.createElement( 'canvas' );

		canvas.width = image.width;

		canvas.height = image.height;

		var context = canvas.getContext( '2d' );

		context.setTransform( 1, 0, 0, - 1, 0, image.height );

		context.drawImage( image, 0, 0 );

		_patterns[ texture.id ] = _context.createPattern(

			canvas, repeatX === true && repeatY === true

				 ? 'repeat'

				 : repeatX === true && repeatY === false

					 ? 'repeat-x'

					 : repeatX === false && repeatY === true

						 ? 'repeat-y'

						 : 'no-repeat'

		);

	}

	function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {

		if ( texture instanceof THREE.DataTexture ) return;

		if ( texture.hasEventListener( 'update', onTextureUpdate ) === false ) {

			if ( texture.image !== undefined && texture.image.width > 0 ) {

				textureToPattern( texture );

			}

			texture.addEventListener( 'update', onTextureUpdate );

		}

		var pattern = _patterns[ texture.id ];

		if ( pattern !== undefined ) {

			setFillStyle( pattern );

		} else {

			setFillStyle( 'rgba(0,0,0,1)' );

			_context.fill();

			return;

		}

		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120

		var a, b, c, d, e, f, det, idet,

		offsetX = texture.offset.x / texture.repeat.x,

		offsetY = texture.offset.y / texture.repeat.y,

		width = texture.image.width * texture.repeat.x,

		height = texture.image.height * texture.repeat.y;

		u0 = ( u0 + offsetX ) * width;

		v0 = ( v0 + offsetY ) * height;

		u1 = ( u1 + offsetX ) * width;

		v1 = ( v1 + offsetY ) * height;

		u2 = ( u2 + offsetX ) * width;

		v2 = ( v2 + offsetY ) * height;

		x1 -= x0; y1 -= y0;

		x2 -= x0; y2 -= y0;

		u1 -= u0; v1 -= v0;

		u2 -= u0; v2 -= v0;

		det = u1 * v2 - u2 * v1;

		if ( det === 0 ) return;

		idet = 1 / det;

		a = ( v2 * x1 - v1 * x2 ) * idet;

		b = ( v2 * y1 - v1 * y2 ) * idet;

		c = ( u1 * x2 - u2 * x1 ) * idet;

		d = ( u1 * y2 - u2 * y1 ) * idet;

		e = x0 - a * u0 - c * v0;

		f = y0 - b * u0 - d * v0;

		_context.save();

		_context.transform( a, b, c, d, e, f );

		_context.fill();

		_context.restore();

	}

	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {

		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120

		var a, b, c, d, e, f, det, idet,

		width = image.width - 1,

		height = image.height - 1;

		u0 *= width; v0 *= height;

		u1 *= width; v1 *= height;

		u2 *= width; v2 *= height;

		x1 -= x0; y1 -= y0;

		x2 -= x0; y2 -= y0;

		u1 -= u0; v1 -= v0;

		u2 -= u0; v2 -= v0;

		det = u1 * v2 - u2 * v1;

		idet = 1 / det;

		a = ( v2 * x1 - v1 * x2 ) * idet;

		b = ( v2 * y1 - v1 * y2 ) * idet;

		c = ( u1 * x2 - u2 * x1 ) * idet;

		d = ( u1 * y2 - u2 * y1 ) * idet;

		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( image, 0, 0 );

		_context.restore();

	}

	// Hide anti-alias gaps

	function expand( v1, v2, pixels ) {

		var x = v2.x - v1.x, y = v2.y - v1.y,

		det = x * x + y * y, idet;

		if ( det === 0 ) return;

		idet = pixels / Math.sqrt( det );

		x *= idet; y *= idet;

		v2.x += x; v2.y += y;

		v1.x -= x; v1.y -= y;

	}

	// Context cached methods.

	function setOpacity( value ) {

		if ( _contextGlobalAlpha !== value ) {

			_context.globalAlpha = value;

			_contextGlobalAlpha = value;

		}

	}

	function setBlending( value ) {

		if ( _contextGlobalCompositeOperation !== value ) {

			if ( value === THREE.NormalBlending ) {

				_context.globalCompositeOperation = 'source-over';

			} else if ( value === THREE.AdditiveBlending ) {

				_context.globalCompositeOperation = 'lighter';

			} else if ( value === THREE.SubtractiveBlending ) {

				_context.globalCompositeOperation = 'darker';

			}

			_contextGlobalCompositeOperation = value;

		}

	}

	function setLineWidth( value ) {

		if ( _contextLineWidth !== value ) {

			_context.lineWidth = value;

			_contextLineWidth = value;

		}

	}

	function setLineCap( value ) {

		// "butt", "round", "square"

		if ( _contextLineCap !== value ) {

			_context.lineCap = value;

			_contextLineCap = value;

		}

	}

	function setLineJoin( value ) {

		// "round", "bevel", "miter"

		if ( _contextLineJoin !== value ) {

			_context.lineJoin = value;

			_contextLineJoin = value;

		}

	}

	function setStrokeStyle( value ) {

		if ( _contextStrokeStyle !== value ) {

			_context.strokeStyle = value;

			_contextStrokeStyle = value;

		}

	}

	function setFillStyle( value ) {

		if ( _contextFillStyle !== value ) {

			_context.fillStyle = value;

			_contextFillStyle = value;

		}

	}

	function setLineDash( value ) {

		if ( _contextLineDash.length !== value.length ) {

			_context.setLineDash( value );

			_contextLineDash = value;

		}

	}

};

Projector.js

/**

 * @author mrdoob / http://mrdoob.com/

 * @author supereggbert / http://www.paulbrunt.co.uk/

 * @author julianwa / https://github.com/julianwa

 */

THREE.RenderableObject = function () {

	this.id = 0;

	this.object = null;

	this.z = 0;

};

//

THREE.RenderableFace = function () {

	this.id = 0;

	this.v1 = new THREE.RenderableVertex();

	this.v2 = new THREE.RenderableVertex();

	this.v3 = new THREE.RenderableVertex();

	this.normalModel = new THREE.Vector3();

	this.vertexNormalsModel = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];

	this.vertexNormalsLength = 0;

	this.color = new THREE.Color();

	this.material = null;

	this.uvs = [ new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2() ];

	this.z = 0;

};

//

THREE.RenderableVertex = function () {

	this.position = new THREE.Vector3();

	this.positionWorld = new THREE.Vector3();

	this.positionScreen = new THREE.Vector4();

	this.visible = true;

};

THREE.RenderableVertex.prototype.copy = function ( vertex ) {

	this.positionWorld.copy( vertex.positionWorld );

	this.positionScreen.copy( vertex.positionScreen );

};

//

THREE.RenderableLine = function () {

	this.id = 0;

	this.v1 = new THREE.RenderableVertex();

	this.v2 = new THREE.RenderableVertex();

	this.vertexColors = [ new THREE.Color(), new THREE.Color() ];

	this.material = null;

	this.z = 0;

};

//

THREE.RenderableSprite = function () {

	this.id = 0;

	this.object = null;

	this.x = 0;

	this.y = 0;

	this.z = 0;

	this.rotation = 0;

	this.scale = new THREE.Vector2();

	this.material = null;

};

//

THREE.Projector = function () {

	var _object, _objectCount, _objectPool = [], _objectPoolLength = 0,

	_vertex, _vertexCount, _vertexPool = [], _vertexPoolLength = 0,

	_face, _faceCount, _facePool = [], _facePoolLength = 0,

	_line, _lineCount, _linePool = [], _linePoolLength = 0,

	_sprite, _spriteCount, _spritePool = [], _spritePoolLength = 0,

	_renderData = { objects: [], lights: [], elements: [] },

	_vA = new THREE.Vector3(),

	_vB = new THREE.Vector3(),

	_vC = new THREE.Vector3(),

	_vector3 = new THREE.Vector3(),

	_vector4 = new THREE.Vector4(),

	_clipBox = new THREE.Box3( new THREE.Vector3( - 1, - 1, - 1 ), new THREE.Vector3( 1, 1, 1 ) ),

	_boundingBox = new THREE.Box3(),

	_points3 = new Array( 3 ),

	_points4 = new Array( 4 ),

	_viewMatrix = new THREE.Matrix4(),

	_viewProjectionMatrix = new THREE.Matrix4(),

	_modelMatrix,

	_modelViewProjectionMatrix = new THREE.Matrix4(),

	_normalMatrix = new THREE.Matrix3(),

	_frustum = new THREE.Frustum(),

	_clippedVertex1PositionScreen = new THREE.Vector4(),

	_clippedVertex2PositionScreen = new THREE.Vector4();

	//

	this.projectVector = function ( vector, camera ) {

		console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );

		vector.project( camera );

	};

	this.unprojectVector = function ( vector, camera ) {

		console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );

		vector.unproject( camera );

	};

	this.pickingRay = function ( vector, camera ) {

		console.error( 'THREE.Projector: .pickingRay() has been removed.' );

	};

	//

	var RenderList = function () {

		var normals = [];

		var uvs = [];

		var object = null;

		var material = null;

		var normalMatrix = new THREE.Matrix3();

		var setObject = function ( value ) {

			object = value;

			material = object.material;

			normalMatrix.getNormalMatrix( object.matrixWorld );

			normals.length = 0;

			uvs.length = 0;

		};

		var projectVertex = function ( vertex ) {

			var position = vertex.position;

			var positionWorld = vertex.positionWorld;

			var positionScreen = vertex.positionScreen;

			positionWorld.copy( position ).applyMatrix4( _modelMatrix );

			positionScreen.copy( positionWorld ).applyMatrix4( _viewProjectionMatrix );

			var invW = 1 / positionScreen.w;

			positionScreen.x *= invW;

			positionScreen.y *= invW;

			positionScreen.z *= invW;

			vertex.visible = positionScreen.x >= - 1 && positionScreen.x <= 1 &&

					 positionScreen.y >= - 1 && positionScreen.y <= 1 &&

					 positionScreen.z >= - 1 && positionScreen.z <= 1;

		};

		var pushVertex = function ( x, y, z ) {

			_vertex = getNextVertexInPool();

			_vertex.position.set( x, y, z );

			projectVertex( _vertex );

		};

		var pushNormal = function ( x, y, z ) {

			normals.push( x, y, z );

		};

		var pushUv = function ( x, y ) {

			uvs.push( x, y );

		};

		var checkTriangleVisibility = function ( v1, v2, v3 ) {

			if ( v1.visible === true || v2.visible === true || v3.visible === true ) return true;

			_points3[ 0 ] = v1.positionScreen;

			_points3[ 1 ] = v2.positionScreen;

			_points3[ 2 ] = v3.positionScreen;

			return _clipBox.isIntersectionBox( _boundingBox.setFromPoints( _points3 ) );

		};

		var checkBackfaceCulling = function ( v1, v2, v3 ) {

			return ( ( 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;

		};

		var pushLine = function ( a, b ) {

			var v1 = _vertexPool[ a ];

			var v2 = _vertexPool[ b ];

			_line = getNextLineInPool();

			_line.id = object.id;

			_line.v1.copy( v1 );

			_line.v2.copy( v2 );

			_line.z = ( v1.positionScreen.z + v2.positionScreen.z ) / 2;

			_line.material = object.material;

			_renderData.elements.push( _line );

		};

		var pushTriangle = function ( a, b, c ) {

			var v1 = _vertexPool[ a ];

			var v2 = _vertexPool[ b ];

			var v3 = _vertexPool[ c ];

			if ( checkTriangleVisibility( v1, v2, v3 ) === false ) return;

			if ( material.side === THREE.DoubleSide || checkBackfaceCulling( v1, v2, v3 ) === true ) {

				_face = getNextFaceInPool();

				_face.id = object.id;

				_face.v1.copy( v1 );

				_face.v2.copy( v2 );

				_face.v3.copy( v3 );

				_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;

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

					var offset = arguments[ i ] * 3;

					var normal = _face.vertexNormalsModel[ i ];

					normal.set( normals[ offset ], normals[ offset + 1 ], normals[ offset + 2 ] );

					normal.applyMatrix3( normalMatrix ).normalize();

					var offset2 = arguments[ i ] * 2;

					var uv = _face.uvs[ i ];

					uv.set( uvs[ offset2 ], uvs[ offset2 + 1 ] );

				}

				_face.vertexNormalsLength = 3;

				_face.material = object.material;

				_renderData.elements.push( _face );

			}

		};

		return {

			setObject: setObject,

			projectVertex: projectVertex,

			checkTriangleVisibility: checkTriangleVisibility,

			checkBackfaceCulling: checkBackfaceCulling,

			pushVertex: pushVertex,

			pushNormal: pushNormal,

			pushUv: pushUv,

			pushLine: pushLine,

			pushTriangle: pushTriangle

		}

	};

	var renderList = new RenderList();

	this.projectScene = function ( scene, camera, sortObjects, sortElements ) {

		_faceCount = 0;

		_lineCount = 0;

		_spriteCount = 0;

		_renderData.elements.length = 0;

		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();

		if ( camera.parent === undefined ) camera.updateMatrixWorld();

		_viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );

		_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );

		_frustum.setFromMatrix( _viewProjectionMatrix );

		//

		_objectCount = 0;

		_renderData.objects.length = 0;

		_renderData.lights.length = 0;

		scene.traverseVisible( function ( object ) {

			if ( object instanceof THREE.Light ) {

				_renderData.lights.push( object );

			} else if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Sprite ) {

				if ( object.material.visible === false ) return;

				if ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) {

					_object = getNextObjectInPool();

					_object.id = object.id;

					_object.object = object;

					if ( object.renderDepth !== null ) {

						_object.z = object.renderDepth;

					} else {

						_vector3.setFromMatrixPosition( object.matrixWorld );

						_vector3.applyProjection( _viewProjectionMatrix );

						_object.z = _vector3.z;

					}

					_renderData.objects.push( _object );

				}

			}

		} );

		if ( sortObjects === true ) {

			_renderData.objects.sort( painterSort );

		}

		//

		for ( var o = 0, ol = _renderData.objects.length; o < ol; o ++ ) {

			var object = _renderData.objects[ o ].object;

			var geometry = object.geometry;

			renderList.setObject( object );

			_modelMatrix = object.matrixWorld;

			_vertexCount = 0;

			if ( object instanceof THREE.Mesh ) {

				if ( geometry instanceof THREE.BufferGeometry ) {

					var attributes = geometry.attributes;

					var offsets = geometry.offsets;

					if ( attributes.position === undefined ) continue;

					var positions = attributes.position.array;

					for ( var i = 0, l = positions.length; i < l; i += 3 ) {

						renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );

					}

					if ( attributes.normal !== undefined ) {

						var normals = attributes.normal.array;

						for ( var i = 0, l = normals.length; i < l; i += 3 ) {

							renderList.pushNormal( normals[ i ], normals[ i + 1 ], normals[ i + 2 ] );

						}

					}

					if ( attributes.uv !== undefined ) {

						var uvs = attributes.uv.array;

						for ( var i = 0, l = uvs.length; i < l; i += 2 ) {

							renderList.pushUv( uvs[ i ], uvs[ i + 1 ] );

						}

					}

					if ( attributes.index !== undefined ) {

						var indices = attributes.index.array;

						if ( offsets.length > 0 ) {

							for ( var o = 0; o < offsets.length; o ++ ) {

								var offset = offsets[ o ];

								var index = offset.index;

								for ( var i = offset.start, l = offset.start + offset.count; i < l; i += 3 ) {

									renderList.pushTriangle( indices[ i ] + index, indices[ i + 1 ] + index, indices[ i + 2 ] + index );

								}

							}

						} else {

							for ( var i = 0, l = indices.length; i < l; i += 3 ) {

								renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] );

							}

						}

					} else {

						for ( var i = 0, l = positions.length / 3; i < l; i += 3 ) {

							renderList.pushTriangle( i, i + 1, i + 2 );

						}

					}

				} else if ( geometry instanceof THREE.Geometry ) {

					var vertices = geometry.vertices;

					var faces = geometry.faces;

					var faceVertexUvs = geometry.faceVertexUvs[ 0 ];

					_normalMatrix.getNormalMatrix( _modelMatrix );

					var isFaceMaterial = object.material instanceof THREE.MeshFaceMaterial;

					var objectMaterials = isFaceMaterial === true ? object.material : null;

					for ( var v = 0, vl = vertices.length; v < vl; v ++ ) {

						var vertex = vertices[ v ];

						renderList.pushVertex( vertex.x, vertex.y, vertex.z );

					}

					for ( var f = 0, fl = faces.length; f < fl; f ++ ) {

						var face = faces[ f ];

						var material = isFaceMaterial === true

							 ? objectMaterials.materials[ face.materialIndex ]

							 : object.material;

						if ( material === undefined ) continue;

						var side = material.side;

						var v1 = _vertexPool[ face.a ];

						var v2 = _vertexPool[ face.b ];

						var v3 = _vertexPool[ face.c ];

						if ( material.morphTargets === true ) {

							var morphTargets = geometry.morphTargets;

							var morphInfluences = object.morphTargetInfluences;

							var v1p = v1.position;

							var v2p = v2.position;

							var v3p = v3.position;

							_vA.set( 0, 0, 0 );

							_vB.set( 0, 0, 0 );

							_vC.set( 0, 0, 0 );

							for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {

								var influence = morphInfluences[ t ];

								if ( influence === 0 ) continue;

								var targets = morphTargets[ t ].vertices;

								_vA.x += ( targets[ face.a ].x - v1p.x ) * influence;

								_vA.y += ( targets[ face.a ].y - v1p.y ) * influence;

								_vA.z += ( targets[ face.a ].z - v1p.z ) * influence;

								_vB.x += ( targets[ face.b ].x - v2p.x ) * influence;

								_vB.y += ( targets[ face.b ].y - v2p.y ) * influence;

								_vB.z += ( targets[ face.b ].z - v2p.z ) * influence;

								_vC.x += ( targets[ face.c ].x - v3p.x ) * influence;

								_vC.y += ( targets[ face.c ].y - v3p.y ) * influence;

								_vC.z += ( targets[ face.c ].z - v3p.z ) * influence;

							}

							v1.position.add( _vA );

							v2.position.add( _vB );

							v3.position.add( _vC );

							renderList.projectVertex( v1 );

							renderList.projectVertex( v2 );

							renderList.projectVertex( v3 );

						}

						if ( renderList.checkTriangleVisibility( v1, v2, v3 ) === false ) continue;

						var visible = renderList.checkBackfaceCulling( v1, v2, v3 );

						if ( side !== THREE.DoubleSide ) {

							if ( side === THREE.FrontSide && visible === false ) continue;

							if ( side === THREE.BackSide && visible === true ) continue;

						}

						_face = getNextFaceInPool();

						_face.id = object.id;

						_face.v1.copy( v1 );

						_face.v2.copy( v2 );

						_face.v3.copy( v3 );

						_face.normalModel.copy( face.normal );

						if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) {

							_face.normalModel.negate();

						}

						_face.normalModel.applyMatrix3( _normalMatrix ).normalize();

						var faceVertexNormals = face.vertexNormals;

						for ( var n = 0, nl = Math.min( faceVertexNormals.length, 3 ); n < nl; n ++ ) {

							var normalModel = _face.vertexNormalsModel[ n ];

							normalModel.copy( faceVertexNormals[ n ] );

							if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) {

								normalModel.negate();

							}

							normalModel.applyMatrix3( _normalMatrix ).normalize();

						}

						_face.vertexNormalsLength = faceVertexNormals.length;

						var vertexUvs = faceVertexUvs[ f ];

						if ( vertexUvs !== undefined ) {

							for ( var u = 0; u < 3; u ++ ) {

								_face.uvs[ u ].copy( vertexUvs[ u ] );

							}

						}

						_face.color = face.color;

						_face.material = material;

						_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;

						_renderData.elements.push( _face );

					}

				}

			} else if ( object instanceof THREE.Line ) {

				if ( geometry instanceof THREE.BufferGeometry ) {

					var attributes = geometry.attributes;

					if ( attributes.position !== undefined ) {

						var positions = attributes.position.array;

						for ( var i = 0, l = positions.length; i < l; i += 3 ) {

							renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );

						}

						if ( attributes.index !== undefined ) {

							var indices = attributes.index.array;

							for ( var i = 0, l = indices.length; i < l; i += 2 ) {

								renderList.pushLine( indices[ i ], indices[ i + 1 ] );

							}

						} else {

							var step = object.mode === THREE.LinePieces ? 2 : 1;

							for ( var i = 0, l = ( positions.length / 3 ) - 1; i < l; i += step ) {

								renderList.pushLine( i, i + 1 );

							}

						}

					}

				} else if ( geometry instanceof THREE.Geometry ) {

					_modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix );

					var vertices = object.geometry.vertices;

					if ( vertices.length === 0 ) continue;

					v1 = getNextVertexInPool();

					v1.positionScreen.copy( vertices[ 0 ] ).applyMatrix4( _modelViewProjectionMatrix );

					// Handle LineStrip and LinePieces

					var step = object.mode === THREE.LinePieces ? 2 : 1;

					for ( var v = 1, vl = vertices.length; v < vl; v ++ ) {

						v1 = getNextVertexInPool();

						v1.positionScreen.copy( vertices[ v ] ).applyMatrix4( _modelViewProjectionMatrix );

						if ( ( v + 1 ) % step > 0 ) continue;

						v2 = _vertexPool[ _vertexCount - 2 ];

						_clippedVertex1PositionScreen.copy( v1.positionScreen );

						_clippedVertex2PositionScreen.copy( v2.positionScreen );

						if ( clipLine( _clippedVertex1PositionScreen, _clippedVertex2PositionScreen ) === true ) {

							// Perform the perspective divide

							_clippedVertex1PositionScreen.multiplyScalar( 1 / _clippedVertex1PositionScreen.w );

							_clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w );

							_line = getNextLineInPool();

							_line.id = object.id;

							_line.v1.positionScreen.copy( _clippedVertex1PositionScreen );

							_line.v2.positionScreen.copy( _clippedVertex2PositionScreen );

							_line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z );

							_line.material = object.material;

							if ( object.material.vertexColors === THREE.VertexColors ) {

								_line.vertexColors[ 0 ].copy( object.geometry.colors[ v ] );

								_line.vertexColors[ 1 ].copy( object.geometry.colors[ v - 1 ] );

							}

							_renderData.elements.push( _line );

						}

					}

				}

			} else if ( object instanceof THREE.Sprite ) {

				_vector4.set( _modelMatrix.elements[ 12 ], _modelMatrix.elements[ 13 ], _modelMatrix.elements[ 14 ], 1 );

				_vector4.applyMatrix4( _viewProjectionMatrix );

				var invW = 1 / _vector4.w;

				_vector4.z *= invW;

				if ( _vector4.z >= - 1 && _vector4.z <= 1 ) {

					_sprite = getNextSpriteInPool();

					_sprite.id = object.id;

					_sprite.x = _vector4.x * invW;

					_sprite.y = _vector4.y * invW;

					_sprite.z = _vector4.z;

					_sprite.object = object;

					_sprite.rotation = object.rotation;

					_sprite.scale.x = object.scale.x * Math.abs( _sprite.x - ( _vector4.x + camera.projectionMatrix.elements[ 0 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 12 ] ) );

					_sprite.scale.y = object.scale.y * Math.abs( _sprite.y - ( _vector4.y + camera.projectionMatrix.elements[ 5 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 13 ] ) );

					_sprite.material = object.material;

					_renderData.elements.push( _sprite );

				}

			}

		}

		if ( sortElements === true ) {

			_renderData.elements.sort( painterSort );

		}

		return _renderData;

	};

	// Pools

	function getNextObjectInPool() {

		if ( _objectCount === _objectPoolLength ) {

			var object = new THREE.RenderableObject();

			_objectPool.push( object );

			_objectPoolLength ++;

			_objectCount ++;

			return object;

		}

		return _objectPool[ _objectCount ++ ];

	}

	function getNextVertexInPool() {

		if ( _vertexCount === _vertexPoolLength ) {

			var vertex = new THREE.RenderableVertex();

			_vertexPool.push( vertex );

			_vertexPoolLength ++;

			_vertexCount ++;

			return vertex;

		}

		return _vertexPool[ _vertexCount ++ ];

	}

	function getNextFaceInPool() {

		if ( _faceCount === _facePoolLength ) {

			var face = new THREE.RenderableFace();

			_facePool.push( face );

			_facePoolLength ++;

			_faceCount ++;

			return face;

		}

		return _facePool[ _faceCount ++ ];

	}

	function getNextLineInPool() {

		if ( _lineCount === _linePoolLength ) {

			var line = new THREE.RenderableLine();

			_linePool.push( line );

			_linePoolLength ++;

			_lineCount ++

			return line;

		}

		return _linePool[ _lineCount ++ ];

	}

	function getNextSpriteInPool() {

		if ( _spriteCount === _spritePoolLength ) {

			var sprite = new THREE.RenderableSprite();

			_spritePool.push( sprite );

			_spritePoolLength ++;

			_spriteCount ++

			return sprite;

		}

		return _spritePool[ _spriteCount ++ ];

	}

	//

	function painterSort( a, b ) {

		if ( a.z !== b.z ) {

			return b.z - a.z;

		} else if ( a.id !== b.id ) {

			return a.id - b.id;

		} else {

			return 0;

		}

	}

	function clipLine( s1, s2 ) {

		var alpha1 = 0, alpha2 = 1,

		// Calculate the boundary coordinate of each vertex for the near and far clip planes,

		// Z = -1 and Z = +1, respectively.

		bc1near =  s1.z + s1.w,

		bc2near =  s2.z + s2.w,

		bc1far =  - s1.z + s1.w,

		bc2far =  - s2.z + s2.w;

		if ( bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0 ) {

			// Both vertices lie entirely within all clip planes.

			return true;

		} else if ( ( bc1near < 0 && bc2near < 0 ) || ( bc1far < 0 && bc2far < 0 ) ) {

			// Both vertices lie entirely outside one of the clip planes.

			return false;

		} else {

			// The line segment spans at least one clip plane.

			if ( bc1near < 0 ) {

				// v1 lies outside the near plane, v2 inside

				alpha1 = Math.max( alpha1, bc1near / ( bc1near - bc2near ) );

			} else if ( bc2near < 0 ) {

				// v2 lies outside the near plane, v1 inside

				alpha2 = Math.min( alpha2, bc1near / ( bc1near - bc2near ) );

			}

			if ( bc1far < 0 ) {

				// v1 lies outside the far plane, v2 inside

				alpha1 = Math.max( alpha1, bc1far / ( bc1far - bc2far ) );

			} else if ( bc2far < 0 ) {

				// v2 lies outside the far plane, v2 inside

				alpha2 = Math.min( alpha2, bc1far / ( bc1far - bc2far ) );

			}

			if ( alpha2 < alpha1 ) {

				// The line segment spans two boundaries, but is outside both of them.

				// (This can't happen when we're only clipping against just near/far but good

				//  to leave the check here for future usage if other clip planes are added.)

				return false;

			} else {

				// Update the s1 and s2 vertices to match the clipped line segment.

				s1.lerp( s2, alpha1 );

				s2.lerp( s1, 1 - alpha2 );

				return true;

			}

		}

	}

};

18-THREE.JS 基本材质的更多相关文章

18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
Three.js开发指南---使用three.js的材质（第四章）
材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等一材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...
three.js各种材质的实现源码
three.js常用材质:基本材质.兰伯特材质.冯氏材质.标准材质. 我们可以自己使用着色器实现这些材质,用于批量渲染等用途. 为了简单,假设物体只有一张漫反射贴图,场景中只存在一个环境光和一个平行光 ...
使用Three.js的材质
1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...
three.js - 添加材质灯光阴影
看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
20-THREE.JS 混合材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
18 行 JS 代码编一个倒时器
有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...
23-THREE.JS 光照材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
22-THREE.JS 面材质
<!DOCTYPE html> <html> <head> <title>Example 04.05 - Mesh face material</ ...
19-THREE.JS 深度材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

随机推荐

利用kubeadm部署kubernetes 1.7 with flannel
一.Installation 1.安装环境为CentOS 7 2.安装Docker yum install -y docker systemctl enable docker systemctl st ...
Scrapy框架-scrapy框架架构详解
1.Scrapy框架介绍写一个爬虫,需要做很多的事情.比如:发送网络请求.数据解析.数据存储.反反爬虫机制(更换ip代理.设置请求头等).异步请求等.这些工作如果每次都要自己从零开始写的话,比较浪费 ...
01 javaSe 01 抽象类和接口
抽象类接口目录(?)[-] 1 抽象类与接口是面向对象思想层面概念不是程序设计语言层面概念 2 抽象类是本体的抽象接口是行为的抽象 3 C中抽象类与接口的探讨目录(?)[+] ...
ssh远程执行远程执行命令
ssh zxrac1 '/home/oracle/tmp/t5.sh 2 2 >/dev/null 2>&1 &'
阿里、腾讯、京东、微软，各家算法&数据挖掘岗位面经大起底!
阿里.腾讯.京东.微软,各家算法&数据挖掘岗位面经大起底! 2016-02-24 36大数据 36大数据作者: 江少华摘要: 从2015年8月到2015年10月,花了3个月时间找工作,先后 ...
c++ ScopeExitGuard
说到Native Languages就不得不说资源管理,因为资源管理向来都是Native Languages的一个大问题,其中内存管理又是资源当中的一个大问题,由于堆内存需要手动分配和释放,所以必须确 ...
Codeforces Round #468（div2）
A Friends Meeting 题意:有两个人在数轴上的不同位置,现在他们需要到一个位置碰面.每次每人只能向左或向右走1个单位,轮流进行.每个人第一次走时疲劳度+1,第二次走时疲劳度+2,以此类推 ...
子元素绝对定位absolute后,自动撑开宽度
position: absolute; white-space: nowrap;
iOS消息推送原理
推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]): ...
$python虚拟化运行环境——virtualenv
介绍 virtualenv是一种虚拟化环境,可以理解为创建了一个虚拟化的pyhon运行空间,可以从新安装各种库,而与本机环境互不影响,互相隔离. 安装及使用首先要安装包管理工具pip(pip的使用详 ...

18-THREE.JS 基本材质

18-THREE.JS 基本材质的更多相关文章

随机推荐

热门专题