提交 99b235cf 编写于 作者: J Joshua Koo

Merge remote-tracking branch 'mrdoob/dev'

......@@ -5,7 +5,7 @@ three.js
The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg> and WebGL renderers.
[Examples](http://mrdoob.github.com/three.js/)[Documentation](http://mrdoob.github.com/three.js/docs/)[Help](http://stackoverflow.com/questions/tagged/three.js)
[Examples](http://mrdoob.github.com/three.js/)[Documentation](http://mrdoob.github.com/three.js/docs/)[Migrating](https://github.com/mrdoob/three.js/wiki/Migration)[Help](http://stackoverflow.com/questions/tagged/three.js)
### Usage ###
......@@ -65,6 +65,35 @@ This code creates a scene, then creates a camera, adds the camera and cube to th
### Change log ###
2012 09 15 - **r51** (405,240 KB, gzip: 99,326 KB)
* Added `STLLoader`. ([aleeper](http://github.com/aleeper) and [mrdoob](http://github.com/mrdoob))
* Optimised `Ray` (2x faster). ([gero3](http://github.com/gero3))
* Added `.getDescendants` method to `Object3D`. ([gero3](http://github.com/gero3) and [mrdoob](http://github.com/mrdoob))
* `SkinnedMesh` can now work with `MorphAnimMesh`. ([apendua](http://github.com/apendua))
* Changed `CameraHelper`. Now it matches the camera independently of where it's in the scene graph. ([mrdoob](http://github.com/mrdoob))
* Removed the need for manually setting texture units with `ShaderMaterial`. ([alteredq](http://github.com/alteredq))
* Added `HemisphereLight`. ([alteredq](http://github.com/alteredq))
* Fixed `WebGLRenderer` handling of flip sided materials. ([WestLangley](http://github.com/WestLangley) and [alteredq](http://github.com/alteredq))
* Added support to normals maps in `MeshPhongMaterial`. ([crobi](http://github.com/crobi) and [alteredq](http://github.com/alteredq))
* Added handling of `BufferGeometry` for `ParticleSystems`. ([alteredq](http://github.com/alteredq))
* Added support for compressed textures and cube maps to `WebGLRenderer`. ([alteredq](http://github.com/alteredq))
* Outliner and Material panel improvements to the [editor](http://mrdoob.github.com/three.js/editor/). ([mrdoob](http://github.com/mrdoob))
* Added material.emissive support to `CanvasRenderer` and `SVGRenderer`. ([mrdoob](http://github.com/mrdoob))
* Added handling of multiple UV layers and anisotropy to Blender exporter. ([alteredq](http://github.com/alteredq))
* Handling bump and anisotropy in `Loader` and `SceneLoader`. ([alteredq](http://github.com/alteredq))
* Added mousewheel support to `TrackballControls`. ([jherrm](http://github.com/jherrm))
* Added `MTLLoader` and `OBJMTLLoader`. ([angelxuanchang](http://github.com/angelxuanchang))
* Updated `UTF8Loader` to latest version. ([angelxuanchang](http://github.com/angelxuanchang) and [alteredq](http://github.com/alteredq))
* Pluginized `SceneLoader`. ([alteredq](http://github.com/alteredq))
* Added support of `object.renderDepth` in `Projector`. ([mrdoob](http://github.com/mrdoob))
* Made build system more flexible. ([mrdoob](http://github.com/mrdoob))
* Many enhancements to `SceneLoader`. ([alteredq](http://github.com/alteredq))
* Experimenting with `CSS3DRenderer`. ([mrdoob](http://github.com/mrdoob))
* Added `ShapeGeometry`. ([jonobr1](http://github.com/jonobr1))
* Fixes to `Vector3`'s `.setEulerFromRotationMatrix` method.([WestLangley](http://github.com/WestLangley))
2012 08 15 - **r50** (391,250 KB, gzip: 96,143 KB)
* Experimenting with [SoftwareRenderer](http://pouet.net/topic.php?which=8760&page=1). ([mrdoob](http://github.com/mrdoob) and [rygorous](http://github.com/rygorous))
......
此差异已折叠。
......@@ -7,29 +7,25 @@
<link type="text/css" rel="stylesheet" href="../../../page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>CubeGeometry</h1>
<div class="desc">todo</div>
<div class="desc">CubeGeometry is the quadrilateral primitive geometry class. It is typically used for creating a cube or irregular quadrilateral of the dimensions provided within the (optional) 'width', 'height', & 'depth' constructor arguments.</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<h2>Properties</h2>
<h3>.[page:Vector3 todo]</h3>
<h2>Methods</h2>
<h3>.todo( [page:Vector3 todo] )</h3>
<h3>[name]([page:Float width], [page:Float height], [page:Float depth], [page:Integer segmentsWidth], [page:Integer segmentsHeight], [page:Integer segmentsDepth], [page:Array materials], [page:Array sides])</h3>
<div>
todo — todo<br />
width — Width of the sides on the X axis.<br />
height — Height of the sides on the Y axis.<br />
depth — Depth of the sides on the Z axis.<br />
segmentsWidth — Number of segmented faces along the width of the sides.<br />
segmentsHeight — Number of segmented faces along the height of the sides.<br />
segmentsDepth — Number of segmented faces along the depth of the sides.<br />
materials — An array containing six [page:Material]s.<br />
sides — An array containig six [page:Boolean]s defining whether the side needs to be created.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
......@@ -11,26 +11,75 @@
<h1>[name]</h1>
<div class="desc">todo</div>
<div class="desc">A material for drawing geometries in a simple shaded (flat or wireframe) way.</div>
<div class="desc">The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<h3>[name]( [page:Object parameters] )</h3>
<div>parameters is an object with one or more properties defining the material's appearance.</div>
<div>
color — geometry color in hexadecimal. Default is 0xffffff.<br />
wireframe — render geometry as wireframe. Default is false.<br />
wireframeLinewidth — Line thickness. Default is 1.<br />
wireframeLinecap — Define appearance of line ends. Default is 'round'.<br />
wireframeLinejoin — Define appearance of line joints. Default is 'round'.<br />
shading — Define shading type. Default is THREE.SmoothShading.<br />
vertexColors — Define whether the material uses vertex colors, or not. Default is false.<br />
fog — Define whether the material color is affected by global fog settings. Default is false.<br />
lightMap — TODO. Default is null.<br />
specularMap — TODO. Default is null.<br />
envMap — TODO. Default is null.<br />
skinning — TODO. Default is false.<br />
morphTargets — TODO. Default is false.
</div>
<h2>Properties</h2>
<h3>.[page:Vector3 todo]</h3>
<h3>.[page:Integer color]</h3>
<div>Sets the color of the geometry. Default is 0xffffff.</div>
<h3>.[page:Boolean wireframe]</h3>
<div>Render geometry as wireframe. Default is false (i.e. render as flat polygons).</div>
<h3>.[page:Float wireframeLinewidth]</h3>
<div>Controls wireframe thickness. Default is 1.</div>
<h3>.[page:String wireframeLinecap]</h3>
<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
<h2>Methods</h2>
<h3>.[page:String wireframeLinejoin]</h3>
<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
<h3>.[page:String shading]</h3>
<div>Define shading type. Default is THREE.SmoothShading.</div>
<h3>.todo( [page:Vector3 todo] )</h3>
<div>
todo — todo<br />
</div>
<h3>.[page:Boolean vertexColors]</h3>
<div>Define whether the material uses vertex colors, or not. Default is false.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
<h3>.[page:Boolean fog]</h3>
<div>Define whether the material color is affected by global fog settings.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
<h3>.[page:Texture lightMap]</h3>
<div>Set light map. Default is null.</div>
<h3>.[page:Texture specularMap]</h3>
<div>Set specular map. Default is null.</div>
<h3>.[page:TextureCube envMap]</h3>
<div>Set env map. Default is null.</div>
<h3>.[page:Boolean skinning]</h3>
<div>Define whether the material uses skinning. Default is false.</div>
<h3>.[page:Boolean morphTargets]</h3>
<div>Define whether the material uses morphTargets. Default is false.</div>
<h2>Source</h2>
......
......@@ -84,7 +84,7 @@
<script src="list.js"></script>
<script>
var REVISION = '50';
var REVISION = '51';
var panel = document.getElementById( 'panel' );
var viewer = document.getElementById( 'viewer' );
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js gui</title>
<title>three.js editor</title>
<style>
body {
font-family: Arial, sans-serif;
......@@ -47,6 +47,8 @@
var signals = {
sceneCreated: new SIGNALS.Signal(),
sceneChanged: new SIGNALS.Signal(),
objectAdded: new SIGNALS.Signal(),
objectSelected: new SIGNALS.Signal(),
objectChanged: new SIGNALS.Signal(),
......@@ -62,107 +64,159 @@
menubar.setHeight( '32px' );
document.body.appendChild( menubar.dom );
var viewport = new Viewport( signals );
viewport.setTop( '32px' );
viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
document.body.appendChild( viewport.dom );
var sidebar = new Sidebar( signals );
sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
sidebar.setTop( '32px' );
sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
document.body.appendChild( sidebar.dom );
var viewport = new Viewport( signals );
viewport.setTop( '32px' );
viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
document.body.appendChild( viewport.dom );
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
var file = event.dataTransfer.files[ 0 ];
var extension = file.name.split( '.' )[1].toLowerCase();
var extension = file.name.split( '.' ).pop().toLowerCase();
var reader = new FileReader();
reader.onload = function ( event ) {
var contents = event.target.result;
parseFile( event.target.result, extension );
switch ( extension ) {
};
case 'dae':
reader.readAsText( file );
var parser = new DOMParser();
var xml = parser.parseFromString( contents, 'text/xml' );
}, false );
// TODO: Update ColladaLoader
var parseFile = function ( contents, extension ) {
var loader = new THREE.ColladaLoader();
loader.parse( xml, function ( collada ) {
switch ( extension ) {
signals.objectAdded.dispatch( collada.scene );
signals.objectSelected.dispatch( collada.scene );
case 'dae':
} );
var parser = new DOMParser();
var xml = parser.parseFromString( contents, 'text/xml' );
break;
// TODO: Update ColladaLoader
case 'js':
var loader = new THREE.ColladaLoader();
loader.parse( xml, function ( collada ) {
var geometry = new THREE.GeometryLoader().parse( JSON.parse( contents ) );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( collada.scene );
signals.objectSelected.dispatch( collada.scene );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
} );
break;
break;
case 'obj':
case 'js':
var object = new THREE.OBJLoader().parse( contents );
// 2.0
signals.objectAdded.dispatch( object );
signals.objectSelected.dispatch( object );
if ( contents.indexOf( 'postMessage' ) !== -1 ) {
break;
var blob = new Blob( [ contents ], { type: 'text/javascript' } );
var url = URL.createObjectURL( blob );
case 'stl':
var worker = new Worker( url );
var geometry = new THREE.STLLoader().parse( contents );
worker.onmessage = function ( event ) {
var mesh = new THREE.Mesh( geometry );
event.data.metadata = { 'format': 2 };
parseFile( JSON.stringify( event.data ), extension );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
};
worker.postMessage( new Date().getTime() );
return;
break;
}
case 'utf8':
// 3.0
// TODO
var data = JSON.parse( contents );
break;
if ( data.metadata === undefined ) data.metadata = { type: 'geometry' }; // 2.0
if ( data.metadata.type === undefined ) data.metadata.type = 'geometry'; // 3.0
case 'vtk':
if ( data.metadata.type === 'geometry' ) {
var geometry = new THREE.GeometryLoader().parse( data );
var material = new THREE.MeshLambertMaterial();
var geometry = new THREE.VTKLoader().parse( contents );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
break;
} else if ( data.metadata.type === 'scene' ) {
}
new THREE.SceneLoader().parse( data, function ( scene ) {
};
signals.objectAdded.dispatch( scene );
signals.objectSelected.dispatch( scene );
reader.readAsText( file );
}, '' );
}, false );
}
break;
//
case 'obj':
var object = new THREE.OBJLoader().parse( contents );
signals.objectAdded.dispatch( object );
signals.objectSelected.dispatch( object );
break;
case 'stl':
var geometry = new THREE.STLLoader().parse( contents );
var material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
break;
case 'utf8':
var geometry = new THREE.UTF8Loader().parse( contents );
var material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
break;
case 'vtk':
var geometry = new THREE.VTKLoader().parse( contents );
var material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
break;
}
}
var geometry = new THREE.SphereGeometry( 75, 25, 15 );
var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
......@@ -171,8 +225,6 @@
signals.objectAdded.dispatch( mesh );
signals.objectSelected.dispatch( mesh );
//
var onWindowResize = function ( event ) {
signals.windowResize.dispatch();
......
......@@ -283,7 +283,6 @@ UI.Select = function ( position ) {
this.dom.addEventListener( 'change', function ( event ) {
// console.log( scope.dom.selectedIndex );
if ( scope.onChangeCallback ) scope.onChangeCallback();
}, false );
......@@ -294,12 +293,27 @@ UI.Select = function ( position ) {
UI.Select.prototype = Object.create( UI.Element.prototype );
UI.Select.prototype.setMultiple = function ( boolean ) {
this.dom.multiple = boolean;
return this;
};
UI.Select.prototype.setOptions = function ( options ) {
for ( var i = 0; i < options.length; i ++ ) {
while ( this.dom.children.length > 0 ) {
this.dom.removeChild( this.dom.firstChild );
}
for ( var key in options ) {
var option = document.createElement( 'option' );
option.appendChild( document.createTextNode( options[ i ] ) );
option.value = key;
option.innerHTML = options[ key ];
this.dom.appendChild( option );
}
......@@ -330,30 +344,49 @@ UI.Select.prototype.onChange = function ( callback ) {
};
// Checkbox
// Boolean
UI.Checkbox = function ( position ) {
UI.Boolean = function ( position ) {
UI.Element.call( this );
UI.Select.call( this, position );
var scope = this;
this.setOptions( [ 'true', 'false' ] );
this.dom = document.createElement( 'input' );
this.dom.type = 'checkbox';
this.dom.style.position = position || 'relative';
this.onChangeCallback = null;
this.dom.addEventListener( 'change', function ( event ) {
if ( scope.onChangeCallback ) scope.onChangeCallback();
}, false );
return this;
};
UI.Boolean.prototype = Object.create( UI.Select.prototype );
UI.Checkbox.prototype = Object.create( UI.Element.prototype );
UI.Boolean.prototype.getValue = function () {
UI.Checkbox.prototype.getValue = function () {
return this.dom.value === 'true';
return this.dom.checked;
};
UI.Boolean.prototype.setValue = function ( value ) {
UI.Checkbox.prototype.setValue = function ( value ) {
this.dom.value = value.toString();
this.dom.checked = value;
return this;
};
UI.Checkbox.prototype.onChange = function ( callback ) {
this.onChangeCallback = callback;
return this;
......@@ -507,17 +540,10 @@ UI.Number.prototype.setValue = function ( value ) {
};
UI.Number.prototype.setMin = function ( value ) {
this.min = value;
return this;
};
UI.Number.prototype.setMax = function ( value ) {
UI.Number.prototype.setRange = function ( min, max ) {
this.max = value;
this.min = min;
this.max = max;
return this;
......
Sidebar.Outliner = function ( signals ) {
var objects = {
'PerspectiveCamera': THREE.PerspectiveCamera,
'PointLight': THREE.PointLight,
'DirectionalLight': THREE.DirectionalLight,
'Mesh': THREE.Mesh,
'Object3D': THREE.Object3D
};
var selected = null;
var container = new UI.Panel();
container.setPadding( '8px' );
container.setBorderTop( '1px solid #ccc' );
container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
var sceneGraph = new UI.Select().setMultiple( true ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
container.add( sceneGraph );
container.add( new UI.Break(), new UI.Break() );
var scene = null;
function update() {
var id = parseInt( sceneGraph.getValue() );
for ( var i in scene.children ) {
var object = scene.children[ i ];
if ( object.id === id ) {
signals.objectSelected.dispatch( object );
return;
}
}
}
function getObjectInstanceName( object ) {
for ( var key in objects ) {
if ( object instanceof objects[ key ] ) return key;
}
}
// events
signals.sceneCreated.add( function ( object ) {
scene = object;
} );
signals.sceneChanged.add( function ( object ) {
scene = object;
var options = {};
( function createList( object, pad ) {
for ( var key in object.children ) {
var child = object.children[ key ];
options[ child.id ] = pad + '+ ' + object.name + ' [' + getObjectInstanceName( child ) + ']';
createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
}
} )( scene, '' );
sceneGraph.setOptions( options );
} );
signals.objectSelected.add( function ( object ) {
sceneGraph.setValue( object !== null ? object.id: null );
} );
return container;
}
Sidebar.Properties.Geometry = function ( signals ) {
var geometries = {
"ConvexGeometry": THREE.ConvexGeometry,
"CubeGeometry": THREE.CubeGeometry,
"CylinderGeometry": THREE.CylinderGeometry,
"ExtrudeGeometry": THREE.ExtrudeGeometry,
"IcosahedronGeometry": THREE.IcosahedronGeometry,
"LatheGeometry": THREE.LatheGeometry,
"OctahedronGeometry": THREE.OctahedronGeometry,
"ParametricGeometry": THREE.ParametricGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
"PolyhedronGeometry": THREE.PolyhedronGeometry,
"SphereGeometry": THREE.SphereGeometry,
"TetrahedronGeometry": THREE.TetrahedronGeometry,
"TextGeometry": THREE.TextGeometry,
"TorusGeometry": THREE.TorusGeometry,
"TorusKnotGeometry": THREE.TorusKnotGeometry,
"TubeGeometry": THREE.TubeGeometry,
"Geometry": THREE.Geometry
};
var container = new UI.Panel();
container.setDisplay( 'none' );
......@@ -7,24 +29,46 @@ Sidebar.Properties.Geometry = function ( signals ) {
container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setLabel( 'Export' ).onClick( exportGeometry ) );
container.add( new UI.Break(), new UI.Break() );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
// name
var geometryNameRow = new UI.Panel();
var geometryName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( geometryName );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
geometryNameRow.add( geometryName );
container.add( geometryNameRow );
// class
var geometryClassRow = new UI.Panel();
var geometryClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( geometryClass );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( verticesCount );
container.add( new UI.HorizontalRule() );
geometryClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
geometryClassRow.add( geometryClass );
container.add( geometryClassRow );
// vertices
var geometryVerticesRow = new UI.Panel();
var geometryVertices = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
geometryVerticesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
geometryVerticesRow.add( geometryVertices );
container.add( geometryVerticesRow );
// faces
var geometryFacesRow = new UI.Panel();
var geometryFaces = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
geometryFacesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
geometryFacesRow.add( geometryFaces );
container.add( geometryFacesRow );
container.add( new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
var facesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( facesCount );
container.add( new UI.Break(), new UI.Break(), new UI.Break() );
//
......@@ -41,8 +85,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
geometryName.setValue( object.geometry.name );
geometryClass.setValue( getGeometryInstanceName( object.geometry ) );
verticesCount.setValue( object.geometry.vertices.length );
facesCount.setValue( object.geometry.faces.length );
geometryVertices.setValue( object.geometry.vertices.length );
geometryFaces.setValue( object.geometry.faces.length );
} else {
......@@ -56,28 +100,6 @@ Sidebar.Properties.Geometry = function ( signals ) {
function getGeometryInstanceName( geometry ) {
var geometries = {
"ConvexGeometry": THREE.ConvexGeometry,
"CubeGeometry": THREE.CubeGeometry,
"CylinderGeometry": THREE.CylinderGeometry,
"ExtrudeGeometry": THREE.ExtrudeGeometry,
"IcosahedronGeometry": THREE.IcosahedronGeometry,
"LatheGeometry": THREE.LatheGeometry,
"OctahedronGeometry": THREE.OctahedronGeometry,
"ParametricGeometry": THREE.ParametricGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
"PolyhedronGeometry": THREE.PolyhedronGeometry,
"SphereGeometry": THREE.SphereGeometry,
"TetrahedronGeometry": THREE.TetrahedronGeometry,
"TextGeometry": THREE.TextGeometry,
"TorusGeometry": THREE.TorusGeometry,
"TorusKnotGeometry": THREE.TorusKnotGeometry,
"TubeGeometry": THREE.TubeGeometry,
"Geometry": THREE.Geometry
};
for ( var key in geometries ) {
if ( geometry instanceof geometries[ key ] ) return key;
......
Sidebar.Properties.Material = function ( signals ) {
var materials = {
'LineBasicMaterial': THREE.LineBasicMaterial,
'MeshBasicMaterial': THREE.MeshBasicMaterial,
'MeshDepthMaterial': THREE.MeshDepthMaterial,
'MeshFaceMaterial': THREE.MeshFaceMaterial,
'MeshLambertMaterial': THREE.MeshLambertMaterial,
'MeshNormalMaterial': THREE.MeshNormalMaterial,
'MeshPhongMaterial': THREE.MeshPhongMaterial,
'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
'ParticleDOMMaterial': THREE.ParticleDOMMaterial,
'ShaderMaterial': THREE.ShaderMaterial,
'Material': THREE.Material
};
var container = new UI.Panel();
container.setDisplay( 'none' );
container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
// name
var materialNameRow = new UI.Panel();
var materialName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
materialNameRow.add( materialName );
container.add( materialNameRow );
// class
var materialClassRow = new UI.Panel();
var materialClass = new UI.Select( 'absolute' ).setOptions( {
'LineBasicMaterial': 'LineBasicMaterial',
'MeshBasicMaterial': 'MeshBasicMaterial',
'MeshDepthMaterial': 'MeshDepthMaterial',
'MeshFaceMaterial': 'MeshFaceMaterial',
'MeshLambertMaterial': 'MeshLambertMaterial',
'MeshNormalMaterial': 'MeshNormalMaterial',
'MeshPhongMaterial': 'MeshPhongMaterial'
} ).setLeft( '90px' ).setWidth( '180px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
materialClassRow.add( materialClass );
container.add( materialClassRow );
// color
var materialColorRow = new UI.Panel();
var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialColorRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
materialColorRow.add( materialColor );
container.add( materialColorRow );
// ambient
var materialAmbientRow = new UI.Panel();
var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialAmbientRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
materialAmbientRow.add( materialAmbient );
container.add( materialAmbientRow );
// emissive
var materialEmissiveRow = new UI.Panel();
var materialEmissive = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialEmissiveRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Emissive' ).setColor( '#666' ) );
materialEmissiveRow.add( materialEmissive );
container.add( materialEmissiveRow );
// specular
var materialSpecularRow = new UI.Panel();
var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialSpecularRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
materialSpecularRow.add( materialSpecular );
container.add( materialSpecularRow );
// shininess
var materialShininessRow = new UI.Panel();
var materialShininess = new UI.Number( 'absolute' ).setValue( 30 ).setLeft( '90px' ).onChange( update );
materialShininessRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Shininess' ).setColor( '#666' ) );
materialShininessRow.add( materialShininess );
container.add( materialShininessRow );
// map
var materialMapRow = new UI.Panel();
var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
materialMapRow.add( materialMap );
container.add( materialMapRow );
// light map
var materialLightMapRow = new UI.Panel();
var materialLightMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialLightMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Light Map' ).setColor( '#666' ) );
materialLightMapRow.add( materialLightMap );
container.add( materialLightMapRow );
// bump map
var materialBumpMapRow = new UI.Panel();
var materialBumpMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialBumpMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Bump Map' ).setColor( '#666' ) );
materialBumpMapRow.add( materialBumpMap );
container.add( materialBumpMapRow );
// normal map
var materialNormalMapRow = new UI.Panel();
var materialNormalMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialNormalMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Normal Map' ).setColor( '#666' ) );
materialNormalMapRow.add( materialNormalMap );
container.add( materialNormalMapRow );
// specular map
var materialSpecularMapRow = new UI.Panel();
var materialSpecularMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialSpecularMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Specular Map' ).setColor( '#666' ) );
materialSpecularMapRow.add( materialSpecularMap );
container.add( materialSpecularMapRow );
// env map
var materialEnvMapRow = new UI.Panel();
var materialEnvMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialEnvMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Env Map' ).setColor( '#666' ) );
materialEnvMapRow.add( materialEnvMap );
container.add( materialEnvMapRow );
// opacity
var materialOpacityRow = new UI.Panel();
var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
materialOpacityRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
materialOpacityRow.add( materialOpacity );
container.add( materialOpacityRow );
// transparent
var materialTransparentRow = new UI.Panel();
var materialTransparent = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
materialTransparentRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
materialTransparentRow.add( materialTransparent );
container.add( materialTransparentRow );
// wireframe
var materialWireframeRow = new UI.Panel();
var materialWireframe = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
var materialWireframeLinewidth = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '120px' ).setRange( 0, 100 ).onChange( update );
materialWireframeRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ) );
materialWireframeRow.add( materialWireframe );
materialWireframeRow.add( materialWireframeLinewidth );
container.add( materialWireframeRow );
//
var selected = null;
function update() {
var material = selected.material;
if ( material ) {
if ( material instanceof materials[ materialClass.getValue() ] == false ) {
material = new materials[ materialClass.getValue() ]();
selected.material = material;
}
if ( material.color !== undefined ) {
material.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
}
if ( material.ambient !== undefined ) {
material.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
}
if ( material.emissive !== undefined ) {
material.emissive.setHex( parseInt( materialEmissive.getValue().substr( 1 ), 16 ) );
}
if ( material.specular !== undefined ) {
material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
}
if ( material.shininess !== undefined ) {
material.shininess = materialShininess.getValue();
}
if ( material.opacity !== undefined ) {
material.opacity = materialOpacity.getValue();
}
if ( material.transparent !== undefined ) {
material.transparent = materialTransparent.getValue();
}
if ( material.wireframe !== undefined ) {
material.wireframe = materialWireframe.getValue();
}
if ( material.wireframeLinewidth !== undefined ) {
material.wireframeLinewidth = materialWireframeLinewidth.getValue();
}
updateRows();
signals.materialChanged.dispatch( material );
}
};
function updateRows() {
var material = selected.material;
materialColorRow.setDisplay( material.color !== undefined ? '' : 'none' );
materialAmbientRow.setDisplay( material.ambient !== undefined ? '' : 'none' );
materialEmissiveRow.setDisplay( material.emissive !== undefined ? '' : 'none' );
materialSpecularRow.setDisplay( material.specular !== undefined ? '' : 'none' );
materialShininessRow.setDisplay( material.shininess !== undefined ? '' : 'none' );
materialMapRow.setDisplay( material.map !== undefined ? '' : 'none' );
materialLightMapRow.setDisplay( material.lightMap !== undefined ? '' : 'none' );
materialBumpMapRow.setDisplay( material.bumpMap !== undefined ? '' : 'none' );
materialNormalMapRow.setDisplay( material.normalMap !== undefined ? '' : 'none' );
materialSpecularMapRow.setDisplay( material.specularMap !== undefined ? '' : 'none' );
materialEnvMapRow.setDisplay( material.envMap !== undefined ? '' : 'none' );
materialOpacityRow.setDisplay( material.opacity !== undefined ? '' : 'none' );
materialTransparentRow.setDisplay( material.transparent !== undefined ? '' : 'none' );
materialWireframeRow.setDisplay( material.wireframe !== undefined ? '' : 'none' );
};
function getMaterialInstanceName( material ) {
for ( var key in materials ) {
if ( material instanceof materials[ key ] ) return key;
}
}
// events
signals.objectSelected.add( function ( object ) {
if ( object && object.material ) {
selected = object;
container.setDisplay( '' );
var material = object.material;
materialName.setValue( material.name );
materialClass.setValue( getMaterialInstanceName( material ) );
if ( material.color !== undefined ) {
materialColor.setValue( '#' + material.color.getHex().toString( 16 ) );
}
if ( material.ambient !== undefined ) {
materialAmbient.setValue( '#' + material.ambient.getHex().toString( 16 ) );
}
if ( material.emissive !== undefined ) {
materialEmissive.setValue( '#' + material.emissive.getHex().toString( 16 ) );
}
if ( material.specular !== undefined ) {
materialSpecular.setValue( '#' + material.specular.getHex().toString( 16 ) );
}
if ( material.shininess !== undefined ) {
materialShininess.setValue( material.shininess );
}
/*
if ( material.map !== undefined ) {
materialMap.setValue( material.map );
}
*/
if ( material.opacity !== undefined ) {
materialOpacity.setValue( material.opacity );
}
if ( material.transparent !== undefined ) {
materialTransparent.setValue( material.transparent );
}
if ( material.wireframe !== undefined ) {
materialWireframe.setValue( material.wireframe );
}
if ( material.wireframeLinewidth !== undefined ) {
materialWireframeLinewidth.setValue( material.wireframeLinewidth );
}
updateRows();
} else {
selected = null;
container.setDisplay( 'none' );
}
} );
return container;
}
Sidebar.Properties.Object3D = function ( signals ) {
var objects = {
'PerspectiveCamera': THREE.PerspectiveCamera,
'PointLight': THREE.PointLight,
'DirectionalLight': THREE.DirectionalLight,
'Mesh': THREE.Mesh,
'Object3D': THREE.Object3D
};
var container = new UI.Panel();
container.setDisplay( 'none' );
var objectType = new UI.Text().setColor( '#666' );
container.add( objectType );
container.add( new UI.Break(), new UI.Break() );
// name
var objectNameRow = new UI.Panel();
var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' );
objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
objectNameRow.add( objectName );
container.add( objectNameRow );
// position
var objectPositionRow = new UI.Panel();
var objectPositionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectPositionY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectPositionZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectPositionRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
container.add( objectPositionRow );
// rotation
var objectRotationRow = new UI.Panel();
var objectRotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectRotationY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectRotationZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectRotationRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
container.add( objectRotationRow );
// scale
var objectScaleRow = new UI.Panel();
var objectScaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectScaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectScaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectScaleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
container.add( objectScaleRow );
// visible
var objectVisibleRow = new UI.Panel();
var objectVisible = new UI.Checkbox( 'absolute' ).setLeft( '90px' ).onChange( update );
objectVisibleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Visible' ).setColor( '#666' ) );
objectVisibleRow.add( objectVisible );
container.add( objectVisibleRow );
container.add( new UI.Break(), new UI.Break() );
//
var selected = null;
function update() {
if ( selected ) {
selected.position.x = objectPositionX.getValue();
selected.position.y = objectPositionY.getValue();
selected.position.z = objectPositionZ.getValue();
selected.rotation.x = objectRotationX.getValue();
selected.rotation.y = objectRotationY.getValue();
selected.rotation.z = objectRotationZ.getValue();
selected.scale.x = objectScaleX.getValue();
selected.scale.y = objectScaleY.getValue();
selected.scale.z = objectScaleZ.getValue();
selected.visible = objectVisible.getValue();
signals.objectChanged.dispatch( selected );
}
}
function getObjectInstanceName( object ) {
for ( var key in objects ) {
if ( object instanceof objects[ key ] ) return key;
}
}
// events
signals.objectSelected.add( function ( object ) {
selected = object;
if ( object ) {
container.setDisplay( 'block' );
objectType.setValue( getObjectInstanceName( object ).toUpperCase() );
objectName.setValue( object.name );
objectPositionX.setValue( object.position.x );
objectPositionY.setValue( object.position.y );
objectPositionZ.setValue( object.position.z );
objectRotationX.setValue( object.rotation.x );
objectRotationY.setValue( object.rotation.y );
objectRotationZ.setValue( object.rotation.z );
objectScaleX.setValue( object.scale.x );
objectScaleY.setValue( object.scale.y );
objectScaleZ.setValue( object.scale.z );
objectVisible.setValue( object.visible );
} else {
container.setDisplay( 'none' );
}
} );
return container;
}
......@@ -69,6 +69,7 @@ var Viewport = function ( signals ) {
light.position.set( - 1, - 0.5, 0 ).normalize();
scene.add( light );
signals.sceneChanged.dispatch( scene );
// object picking
......@@ -86,7 +87,7 @@ var Viewport = function ( signals ) {
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
var intersects = ray.intersectObjects( objects, true );
if ( intersects.length ) {
......@@ -117,26 +118,23 @@ var Viewport = function ( signals ) {
scene.add( object );
render();
signals.sceneChanged.dispatch( scene );
} );
signals.objectChanged.add( function ( object ) {
object.updateMatrix();
object.updateMatrixWorld();
selectionBox.matrixWorld.copy( object.matrixWorld );
render();
} );
signals.objectSelected.add( function ( object ) {
var selected = null;
if ( object === null ) {
signals.objectSelected.add( function ( object ) {
selectionBox.visible = false;
selectionBox.visible = false;
} else if ( object.geometry ) {
if ( object !== null && object.geometry ) {
var geometry = object.geometry;
......@@ -182,7 +180,7 @@ var Viewport = function ( signals ) {
selectionBox.geometry.verticesNeedUpdate = true;
selectionBox.matrixWorld.copy( object.matrixWorld );
selectionBox.matrixWorld = object.matrixWorld;
selectionBox.visible = true;
......
......@@ -84,20 +84,23 @@
// shadow
var shadowTexture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
shadowTexture.image = event.content;
shadowTexture.needsUpdate = true;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
} );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
loader.load( 'textures/shadow.png' );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: shadowTexture, overdraw: true } );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 250;
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - geometry - shapes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
text-align:center;
}
</style>
</head>
<body>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shape geometry</div>
<script src="../build/three.min.js"></script>
<script src="js/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var text, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );
scene = new THREE.Scene();
parent = new THREE.Object3D();
parent.position.y = 50;
scene.add( parent );
function addShape( shape, color, x, y, z, rx, ry, rz, s ) {
// flat shape
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( { color: color, side: THREE.DoubleSide, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( x, y, z );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
parent.add( mesh );
// line
var geometry = shape.createPointsGeometry();
var material = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333, transparent: true } );
var line = new THREE.Line( geometry, material );
line.position.set( x, y, z );
line.rotation.set( rx, ry, rz );
line.scale.set( s, s, s );
parent.add( line );
}
// California
var californiaPts = [];
californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
californiaPts.push( new THREE.Vector2 ( 450, 300 ) );
californiaPts.push( new THREE.Vector2 ( 392, 392 ) );
californiaPts.push( new THREE.Vector2 ( 266, 438 ) );
californiaPts.push( new THREE.Vector2 ( 190, 570 ) );
californiaPts.push( new THREE.Vector2 ( 190, 600 ) );
californiaPts.push( new THREE.Vector2 ( 160, 620 ) );
californiaPts.push( new THREE.Vector2 ( 160, 650 ) );
californiaPts.push( new THREE.Vector2 ( 180, 640 ) );
californiaPts.push( new THREE.Vector2 ( 165, 680 ) );
californiaPts.push( new THREE.Vector2 ( 150, 670 ) );
californiaPts.push( new THREE.Vector2 ( 90, 737 ) );
californiaPts.push( new THREE.Vector2 ( 80, 795 ) );
californiaPts.push( new THREE.Vector2 ( 50, 835 ) );
californiaPts.push( new THREE.Vector2 ( 64, 870 ) );
californiaPts.push( new THREE.Vector2 ( 60, 945 ) );
californiaPts.push( new THREE.Vector2 ( 300, 945 ) );
californiaPts.push( new THREE.Vector2 ( 300, 743 ) );
californiaPts.push( new THREE.Vector2 ( 600, 473 ) );
californiaPts.push( new THREE.Vector2 ( 626, 425 ) );
californiaPts.push( new THREE.Vector2 ( 600, 370 ) );
californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
var californiaShape = new THREE.Shape( californiaPts );
// Triangle
var triangleShape = new THREE.Shape();
triangleShape.moveTo( 80, 20 );
triangleShape.lineTo( 40, 80 );
triangleShape.lineTo( 120, 80 );
triangleShape.lineTo( 80, 20 ); // close path
// Heart
var x = 0, y = 0;
var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
heartShape.moveTo( x + 25, y + 25 );
heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35,x - 30,y + 35 );
heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
// Square
var sqLength = 80;
var squareShape = new THREE.Shape();
squareShape.moveTo( 0,0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );
// Rectangle
var rectLength = 120, rectWidth = 40;
var rectShape = new THREE.Shape();
rectShape.moveTo( 0,0 );
rectShape.lineTo( 0, rectWidth );
rectShape.lineTo( rectLength, rectWidth );
rectShape.lineTo( rectLength, 0 );
rectShape.lineTo( 0, 0 );
// Rounded rectangle
var roundedRectShape = new THREE.Shape();
( function roundedRect( ctx, x, y, width, height, radius ){
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height) ;
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
} )( roundedRectShape, 0, 0, 50, 50, 20 );
// Circle
var circleRadius = 40;
var circleShape = new THREE.Shape();
circleShape.moveTo( 0, circleRadius );
circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
circleShape.quadraticCurveTo( circleRadius, -circleRadius, 0, -circleRadius );
circleShape.quadraticCurveTo( -circleRadius, -circleRadius, -circleRadius, 0 );
circleShape.quadraticCurveTo( -circleRadius, circleRadius, 0, circleRadius );
// Fish
x = y = 0;
var fishShape = new THREE.Shape();
fishShape.moveTo(x,y);
fishShape.quadraticCurveTo(x + 50, y - 80, x + 90, y - 10);
fishShape.quadraticCurveTo(x + 100, y - 10, x + 115, y - 40);
fishShape.quadraticCurveTo(x + 115, y, x + 115, y + 40);
fishShape.quadraticCurveTo(x + 100, y + 10, x + 90, y + 10);
fishShape.quadraticCurveTo(x + 50, y + 80, x, y);
// Arc circle
var arcShape = new THREE.Shape();
arcShape.moveTo( 50, 10 );
arcShape.absarc( 10, 10, 40, 0, Math.PI*2, false );
var holePath = new THREE.Path();
holePath.moveTo( 20, 10 );
holePath.absarc( 10, 10, 10, 0, Math.PI*2, true );
arcShape.holes.push( holePath );
// Smiley
var smileyShape = new THREE.Shape();
smileyShape.moveTo( 80, 40 );
smileyShape.absarc( 40, 40, 40, 0, Math.PI*2, false );
var smileyEye1Path = new THREE.Path();
smileyEye1Path.moveTo( 35, 20 );
// smileyEye1Path.absarc( 25, 20, 10, 0, Math.PI*2, true );
smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI*2, true );
smileyShape.holes.push( smileyEye1Path );
var smileyEye2Path = new THREE.Path();
smileyEye2Path.moveTo( 65, 20 );
smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI*2, true );
smileyShape.holes.push( smileyEye2Path );
var smileyMouthPath = new THREE.Path();
// ugly box mouth
// smileyMouthPath.moveTo( 20, 40 );
// smileyMouthPath.lineTo( 60, 40 );
// smileyMouthPath.lineTo( 60, 60 );
// smileyMouthPath.lineTo( 20, 60 );
// smileyMouthPath.lineTo( 20, 40 );
smileyMouthPath.moveTo( 20, 40 );
smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
smileyMouthPath.quadraticCurveTo( 40, 80, 20, 60 );
smileyMouthPath.quadraticCurveTo( 5, 50, 20, 40 );
smileyShape.holes.push( smileyMouthPath );
// Spline shape + path extrusion
var splinepts = [];
splinepts.push( new THREE.Vector2 ( 350, 100 ) );
splinepts.push( new THREE.Vector2 ( 400, 450 ) );
splinepts.push( new THREE.Vector2 ( -140, 350 ) );
splinepts.push( new THREE.Vector2 ( 0, 0 ) );
var splineShape = new THREE.Shape( );
splineShape.moveTo( 0, 0 );
splineShape.splineThru( splinepts );
// addShape( shape, color, x, y, z, rx, ry,rz, s );
addShape( californiaShape, 0xffaa00, -300, -100, 0, 0, 0, 0, 0.25 );
addShape( triangleShape, 0xffee00, -180, 0, 0, 0, 0, 0, 1 );
addShape( roundedRectShape, 0x005500, -150, 150, 0, 0, 0, 0, 1 );
addShape( squareShape, 0x0055ff, 150, 100, 0, 0, 0, 0, 1 );
addShape( heartShape, 0xff1100, 0, 100, 0, Math.PI, 0, 0, 1 );
addShape( circleShape, 0x00ff11, 120, 250, 0, 0, 0, 0, 1 );
addShape( fishShape, 0x222222, -60, 200, 0, 0, 0, 0, 1 );
addShape( smileyShape, 0xee00ff, -270, 250, 0, Math.PI, 0, 0, 1 );
addShape( arcShape, 0xbb4422, 150, 0, 0, 0, 0, 0, 1 );
addShape( splineShape, 0x888888, -50, -100, 0, 0, 0, 0, 0.2 );
//
renderer = new THREE.CanvasRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
renderer.sortElements = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
......@@ -65,7 +65,10 @@
scene = new THREE.Scene();
var data = generateHeight( 1024, 1024 );
var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTexture( data, 1024, 1024 ) ), overdraw: true } );
var texture = new THREE.Texture( generateTexture( data, 1024, 1024 ) );
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var quality = 16, step = 1024 / quality;
......
......@@ -71,7 +71,7 @@
// Cubes
geometry = new THREE.CubeGeometry( 100, 100, 100 );
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, overdraw: true } );
material = new THREE.MeshDepthMaterial( { overdraw: true } );
for ( var i = 0; i < 20; i ++ ) {
......
......@@ -4,7 +4,7 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.AnaglyphEffect = function ( renderer ) {
THREE.AnaglyphEffect = function ( renderer, width, height ) {
var eyeRight = new THREE.Matrix4();
var eyeLeft = new THREE.Matrix4();
......@@ -17,16 +17,17 @@ THREE.AnaglyphEffect = function ( renderer ) {
var _cameraR = new THREE.PerspectiveCamera();
_cameraR.matrixAutoUpdate = false;
var _scene = new THREE.Scene();
var _camera = new THREE.OrthographicCamera( -1, 1, 1, - 1, 0, 1 );
var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
_camera.position.z = 2;
_scene.add( _camera );
var _scene = new THREE.Scene();
var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params );
var _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
if ( width === undefined ) width = 512;
if ( height === undefined ) height = 512;
var _renderTargetL = new THREE.WebGLRenderTarget( width, height, _params );
var _renderTargetR = new THREE.WebGLRenderTarget( width, height, _params );
var _material = new THREE.ShaderMaterial( {
......@@ -160,8 +161,6 @@ THREE.AnaglyphEffect = function ( renderer ) {
renderer.render( scene, _cameraR, _renderTargetR, true );
_scene.updateMatrixWorld();
renderer.render( _scene, _camera );
};
......
......@@ -60,21 +60,19 @@ THREE.ColladaLoader = function () {
if ( document.implementation && document.implementation.createDocument ) {
var req = new XMLHttpRequest();
var request = new XMLHttpRequest();
if ( req.overrideMimeType ) req.overrideMimeType( "text/xml" );
request.onreadystatechange = function() {
req.onreadystatechange = function() {
if( request.readyState == 4 ) {
if( req.readyState == 4 ) {
if( request.status == 0 || request.status == 200 ) {
if( req.status == 0 || req.status == 200 ) {
if ( req.responseXML ) {
if ( request.responseXML ) {
readyCallbackFunc = readyCallback;
parse( req.responseXML, undefined, url );
parse( request.responseXML, undefined, url );
} else {
......@@ -84,17 +82,17 @@ THREE.ColladaLoader = function () {
}
} else if ( req.readyState == 3 ) {
} else if ( request.readyState == 3 ) {
if ( progressCallback ) {
if ( length == 0 ) {
length = req.getResponseHeader( "Content-Length" );
length = request.getResponseHeader( "Content-Length" );
}
progressCallback( { total: length, loaded: req.responseText.length } );
progressCallback( { total: length, loaded: request.responseText.length } );
}
......@@ -102,8 +100,8 @@ THREE.ColladaLoader = function () {
}
req.open( "GET", url, true );
req.send( null );
request.open( "GET", url, true );
request.send( null );
} else {
......
/**
* Loads a Wavefront .mtl file specifying materials
*
* @author angelxuanchang
*/
THREE.MTLLoader = function( baseUrl, options ) {
THREE.EventTarget.call( this );
this.baseUrl = baseUrl;
this.options = options;
};
THREE.MTLLoader.prototype = {
/**
* Loads a MTL file
*
* Loading progress is indicated by the following events:
* "load" event (successful loading): type = 'load', content = THREE.MTLLoader.MaterialCreator
* "error" event (error loading): type = 'load', message
* "progress" event (progress loading): type = 'progress', loaded, total
*
* @param url - location of MTL file
*/
load: function( url ) {
var scope = this;
var xhr = new XMLHttpRequest();
function onloaded( event ) {
if ( event.target.status === 200 || event.target.status === 0 ) {
var materialCreator = scope.parse( event.target.responseText );
// Notify caller, that I'm done
scope.dispatchEvent( { type: 'load', content: materialCreator } );
} else {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']',
response: event.target.responseText } );
}
}
xhr.addEventListener( 'load', onloaded, false );
xhr.addEventListener( 'progress', function ( event ) {
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
}, false );
xhr.addEventListener( 'error', function () {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
}, false );
xhr.open( 'GET', url, true );
xhr.send( null );
},
/**
* Parses loaded MTL file
* @param text - Content of MTL file
* @return {THREE.MTLLoader.MaterialCreator}
*/
parse: function( text ) {
var lines = text.split( "\n" );
var info = {};
var delimiter_pattern = /\s+/;
var materialsInfo = {};
for ( var i = 0; i < lines.length; i ++ ) {
var line = lines[ i ];
line = line.trim();
if ( line.length === 0 || line.charAt( 0 ) === '#' ) {
// Blank line or comment ignore
continue;
}
var pos = line.indexOf( ' ' );
var key = ( pos >= 0 ) ? line.substring( 0, pos) : line;
key = key.toLowerCase();
var value = ( pos >= 0 ) ? line.substring( pos + 1 ) : "";
value = value.trim();
if ( key === "newmtl" ) {
// New material
info = { name: value };
materialsInfo[ value ] = info;
} else if ( info ) {
if ( key === "ka" || key === "kd" || key === "ks" ) {
var ss = value.split( delimiter_pattern, 3 );
info[ key ] = [ parseFloat( ss[0] ), parseFloat( ss[1] ), parseFloat( ss[2] ) ];
} else {
info[ key ] = value;
}
}
}
var materialCreator = new THREE.MTLLoader.MaterialCreator( this.baseUrl, this.options );
materialCreator.setMaterials( materialsInfo );
return materialCreator;
}
};
/**
* Create a new THREE-MTLLoader.MaterialCreator
* @param baseUrl - Url relative to which textures are loaded
* @param options - Set of options on how to construct the materials
* side: Which side to apply the material
* THREE.FrontSide (default), THREE.BackSide, THREE.DoubleSide
* wrap: What type of wrapping to apply for textures
* THREE.RepeatWrapping (default), THREE.ClampToEdgeWrapping, THREE.MirroredRepeatWrapping
* normalizeRGB: RGBs need to be normalized to 0-1 from 0-255
* Default: false, assumed to be already normalized
* ignoreZeroRGBs: Ignore values of RGBs (Ka,Kd,Ks) that are all 0's
* Default: false
* invertTransparency: If transparency need to be inverted (inversion is needed if d = 0 is fully opaque)
* Default: false (d = 1 is fully opaque)
* @constructor
*/
THREE.MTLLoader.MaterialCreator = function( baseUrl, options ) {
THREE.EventTarget.call( this );
this.baseUrl = baseUrl;
this.options = options;
this.materialsInfo = {};
this.materials = {};
this.materialsArray = [];
this.nameLookup = {};
this.side = ( this.options && this.options.side )? this.options.side: THREE.FrontSide;
this.wrap = ( this.options && this.options.wrap )? this.options.wrap: THREE.RepeatWrapping;
};
THREE.MTLLoader.MaterialCreator.prototype = {
setMaterials: function( materialsInfo ) {
this.materialsInfo = this.convert( materialsInfo );
this.materials = {};
this.materialsArray = [];
this.nameLookup = {};
},
convert: function( materialsInfo ) {
if ( !this.options ) return materialsInfo;
var converted = {};
for ( var mn in materialsInfo ) {
// Convert materials info into normalized form based on options
var mat = materialsInfo[ mn ];
var covmat = {};
converted[ mn ] = covmat;
for ( var prop in mat ) {
var save = true;
var value = mat[ prop ];
var lprop = prop.toLowerCase();
switch ( lprop ) {
case 'kd':
case 'ka':
case 'ks':
// Diffuse color (color under white light) using RGB values
if ( this.options && this.options.normalizeRGB ) {
value = [ value[0]/255, value[1]/255, value[2]/255 ];
}
if ( this.options && this.options.ignoreZeroRGBs ) {
if ( value[0] === 0.0 && value[1] === 0.0 && value[1] === 0.0 ) {
// ignore
save = false;
}
}
break;
case 'd':
// According to MTL format (http://paulbourke.net/dataformats/mtl/):
// d is dissolve for current material
// factor of 1.0 is fully opaque, a factor of 0 is fully dissolved (completely transparent)
if ( this.options && this.options.invertTransparency ) {
value = 1 - value;
}
break;
default:
break;
}
if ( save ) {
covmat[lprop] = value;
}
}
}
return converted;
},
preload: function () {
for ( var mn in this.materialsInfo ) {
this.create( mn );
}
},
getIndex: function( materialName ) {
return this.nameLookup[ materialName ];
},
getAsArray: function() {
var index = 0;
for ( var mn in this.materialsInfo ) {
this.materialsArray[ index ] = this.create( mn );
this.nameLookup[ mn ] = index;
index ++;
}
return this.materialsArray;
},
create: function ( materialName ) {
if ( this.materials[ materialName ] === undefined ) {
this.createMaterial_( materialName );
}
return this.materials[ materialName ];
},
createMaterial_: function ( materialName ) {
// Create material
var mat = this.materialsInfo[ materialName ];
var params = {
name: materialName,
side: this.side
};
for ( var prop in mat ) {
var value = mat[ prop ];
switch ( prop.toLowerCase() ) {
// Ns is material specular exponent
case 'kd':
// Diffuse color (color under white light) using RGB values
params[ 'diffuse' ] = new THREE.Color().setRGB( value[0], value[1], value[2] );
break;
case 'ka':
// Ambient color (color under shadow) using RGB values
params[ 'ambient' ] = new THREE.Color().setRGB( value[0], value[1], value[2] );
break;
case 'ks':
// Specular color (color when light is reflected from shiny surface) using RGB values
params[ 'specular' ] = new THREE.Color().setRGB( value[0], value[1], value[2] );
break;
case 'map_kd':
// Diffuse texture map
params[ 'map' ] = THREE.MTLLoader.loadTexture( this.baseUrl + value );
params[ 'map' ].wrapS = this.wrap;
params[ 'map' ].wrapT = this.wrap;
break;
case 'ns':
// The specular exponent (defines the focus of the specular highlight)
// A high exponent results in a tight, concentrated highlight. Ns values normally range from 0 to 1000.
params['shininess'] = value;
break;
case 'd':
// According to MTL format (http://paulbourke.net/dataformats/mtl/):
// d is dissolve for current material
// factor of 1.0 is fully opaque, a factor of 0 is fully dissolved (completely transparent)
if ( value < 1 ) {
params['transparent'] = true;
params['opacity'] = value;
}
break;
default:
break;
}
}
if ( params[ 'diffuse' ] ) {
if ( !params[ 'ambient' ]) params[ 'ambient' ] = params[ 'diffuse' ];
params[ 'color' ] = params[ 'diffuse' ];
}
this.materials[ materialName ] = new THREE.MeshPhongMaterial( params );
return this.materials[ materialName ];
}
};
THREE.MTLLoader.loadTexture = function ( url, mapping, onLoad, onError ) {
var isCompressed = url.toLowerCase().endsWith( ".dds" );
if ( isCompressed ) {
var texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );
} else {
var image = new Image();
var texture = new THREE.Texture( image, mapping );
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
texture.image = THREE.MTLLoader.ensurePowerOfTwo_( event.content );
texture.needsUpdate = true;
if ( onLoad ) onLoad( texture );
} );
loader.addEventListener( 'error', function ( event ) {
if ( onError ) onError( event.message );
} );
loader.crossOrigin = this.crossOrigin;
loader.load( url, image );
}
return texture;
};
THREE.MTLLoader.ensurePowerOfTwo_ = function ( image ) {
if ( ! THREE.MTLLoader.isPowerOfTwo_( image.width ) || ! THREE.MTLLoader.isPowerOfTwo_( image.height ) ) {
var canvas = document.createElement( "canvas" );
canvas.width = THREE.MTLLoader.nextHighestPowerOfTwo_( image.width );
canvas.height = THREE.MTLLoader.nextHighestPowerOfTwo_( image.height );
var ctx = canvas.getContext("2d");
ctx.drawImage( image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height );
return canvas;
}
return image;
};
THREE.MTLLoader.isPowerOfTwo_ = function ( x ) {
return ( x & ( x - 1 ) ) === 0;
};
THREE.MTLLoader.nextHighestPowerOfTwo_ = function( x ) {
--x;
for ( var i = 1; i < 32; i <<= 1 ) {
x = x | x >> i;
}
return x + 1;
};
......@@ -15,28 +15,28 @@ THREE.OBJLoader.prototype = {
load: function ( url ) {
var scope = this;
var xhr = new XMLHttpRequest();
var request = new XMLHttpRequest();
xhr.addEventListener( 'load', function ( event ) {
request.addEventListener( 'load', function ( event ) {
scope.dispatchEvent( { type: 'load', content: scope.parse( event.target.responseText ) } );
}, false );
xhr.addEventListener( 'progress', function ( event ) {
request.addEventListener( 'progress', function ( event ) {
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
}, false );
xhr.addEventListener( 'error', function () {
request.addEventListener( 'error', function () {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
}, false );
xhr.open( 'GET', url, true );
xhr.send( null );
request.open( 'GET', url, true );
request.send( null );
},
......
/**
* Loads a Wavefront .obj file with materials
*
* @author mrdoob / http://mrdoob.com/
* @author angelxuanchang
*/
THREE.OBJMTLLoader = function ( ) {
THREE.EventTarget.call( this );
};
THREE.OBJMTLLoader.prototype = {
constructor: THREE.OBJMTLLoader,
/**
* Load a Wavefront OBJ file with materials (MTL file)
*
* Loading progress is indicated by the following events:
* "load" event (successful loading): type = 'load', content = THREE.Object3D
* "error" event (error loading): type = 'load', message
* "progress" event (progress loading): type = 'progress', loaded, total
*
* If the MTL file cannot be loaded, then a MeshLambertMaterial is used as a default
* @param url - Location of OBJ file to load
* @param mtlfileurl - MTL file to load (optional, if not specified, attempts to use MTL specified in OBJ file)
* @param options - Options on how to interpret the material (see THREE.MTLLoader.MaterialCreator )
*
*/
load: function ( url, mtlfileurl, options ) {
var scope = this;
var xhr = new XMLHttpRequest();
var mtlDone; // Is the MTL done (true if no MTL, error loading MTL, or MTL actually loaded)
var obj3d; // Loaded model (from obj file)
var materialsCreator; // Material creator is created when MTL file is loaded
// Loader for MTL
var mtlLoader = new THREE.MTLLoader( url.substr( 0, url.lastIndexOf( "/" ) + 1 ), options );
mtlLoader.addEventListener( 'load', waitReady );
mtlLoader.addEventListener( 'error', waitReady );
// Try to load mtlfile
if ( mtlfileurl ) {
mtlLoader.load( mtlfileurl );
mtlDone = false;
} else {
mtlDone = true;
}
function waitReady( event ) {
if ( event.type === 'load' ) {
if ( event.content instanceof THREE.MTLLoader.MaterialCreator ) {
// MTL file is loaded
mtlDone = true;
materialsCreator = event.content;
materialsCreator.preload();
} else {
// OBJ file is loaded
if ( event.target.status === 200 || event.target.status === 0 ) {
var objContent = event.target.responseText;
if ( mtlfileurl ) {
// Parse with passed in MTL file
obj3d = scope.parse( objContent );
} else {
// No passed in MTL file, look for mtlfile in obj file
obj3d = scope.parse( objContent, function( mtlfile ) {
mtlDone = false;
mtlLoader.load( mtlLoader.baseUrl + mtlfile );
} );
}
} else {
// Error loading OBJ file....
scope.dispatchEvent( {
type: 'error',
message: 'Couldn\'t load URL [' + url + ']',
response: event.target.responseText } );
}
}
} else if ( event.type === 'error' ) {
// MTL failed to load -- oh well, we will just not have material ...
mtlDone = true;
}
if ( mtlDone && obj3d ) {
// MTL file is loaded and OBJ file is loaded
// Apply materials to model
if ( materialsCreator ) {
THREE.SceneUtils.traverseHierarchy( obj3d, function( node ) {
if ( node instanceof THREE.Mesh ) {
if ( node.material.name ) {
var material = materialsCreator.create( node.material.name );
if (material ) node.material = material;
}
}
} );
}
// Notify listeners
scope.dispatchEvent( { type: 'load', content: obj3d } );
}
}
xhr.addEventListener( 'load', waitReady, false );
xhr.addEventListener( 'progress', function ( event ) {
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
}, false );
xhr.addEventListener( 'error', function () {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
}, false );
xhr.open( 'GET', url, true );
xhr.send( null );
},
/**
* Parses loaded .obj file
* @param data - content of .obj file
* @param mtllibCallback - callback to handle mtllib declaration (optional)
* @return {THREE.Object3D} - Object3D (with default material)
*/
parse: function ( data, mtllibCallback ) {
function vector( x, y, z ) {
return new THREE.Vector3( x, y, z );
}
function uv( u, v ) {
return new THREE.UV( u, v );
}
function face3( a, b, c, normals ) {
return new THREE.Face3( a, b, c, normals );
}
function face4( a, b, c, d, normals ) {
return new THREE.Face4( a, b, c, d, normals );
}
function finalize_mesh( group, mesh_info ) {
mesh_info.geometry.computeCentroids();
mesh_info.geometry.computeFaceNormals();
mesh_info.geometry.computeBoundingSphere();
group.add( new THREE.Mesh( mesh_info.geometry, mesh_info.material ) );
}
var vertices = [];
var normals = [];
var uvs = [];
// v float float float
var vertex_pattern = /v( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/;
// vn float float float
var normal_pattern = /vn( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/;
// vt float float
var uv_pattern = /vt( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/;
// f vertex vertex vertex ...
var face_pattern1 = /f( +[\d]+)( [\d]+)( [\d]+)( [\d]+)?/;
// f vertex/uv vertex/uv vertex/uv ...
var face_pattern2 = /f( +([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))?/;
// f vertex/uv/normal vertex/uv/normal vertex/uv/normal ...
var face_pattern3 = /f( +([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))?/;
// f vertex//normal vertex//normal vertex//normal ...
var face_pattern4 = /f( +([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))?/;
var final_model = new THREE.Object3D();
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
var cur_mesh = {
material: new THREE.MeshLambertMaterial(),
geometry: geometry
};
var lines = data.split( "\n" );
for ( var i = 0; i < lines.length; i ++ ) {
var line = lines[ i ];
line = line.trim();
// temporary variable storing pattern matching result
var result;
if ( line.length === 0 || line.charAt( 0 ) === '#' ) {
continue;
} else if ( ( result = vertex_pattern.exec( line ) ) !== null ) {
// ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
vertices.push( vector(
parseFloat( result[ 1 ] ),
parseFloat( result[ 2 ] ),
parseFloat( result[ 3 ] )
) );
} else if ( ( result = normal_pattern.exec( line ) ) !== null ) {
// ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
normals.push( vector(
parseFloat( result[ 1 ] ),
parseFloat( result[ 2 ] ),
parseFloat( result[ 3 ] )
) );
} else if ( ( result = uv_pattern.exec( line ) ) !== null ) {
// ["vt 0.1 0.2", "0.1", "0.2"]
uvs.push( uv(
parseFloat( result[ 1 ] ),
parseFloat( result[ 2 ] )
) );
} else if ( ( result = face_pattern1.exec( line ) ) !== null ) {
// ["f 1 2 3", "1", "2", "3", undefined]
if ( result[ 4 ] === undefined ) {
geometry.faces.push( face3(
parseInt( result[ 1 ] ) - 1,
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 3 ] ) - 1
) );
} else {
geometry.faces.push( face4(
parseInt( result[ 1 ] ) - 1,
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 3 ] ) - 1,
parseInt( result[ 4 ] ) - 1
) );
}
} else if ( ( result = face_pattern2.exec( line ) ) !== null ) {
// ["f 1/1 2/2 3/3", " 1/1", "1", "1", " 2/2", "2", "2", " 3/3", "3", "3", undefined, undefined, undefined]
if ( result[ 10 ] === undefined ) {
geometry.faces.push( face3(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 5 ] ) - 1,
parseInt( result[ 8 ] ) - 1
) );
geometry.faceVertexUvs[ 0 ].push( [
uvs[ parseInt( result[ 3 ] ) - 1 ],
uvs[ parseInt( result[ 6 ] ) - 1 ],
uvs[ parseInt( result[ 9 ] ) - 1 ]
] );
} else {
geometry.faces.push( face4(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 5 ] ) - 1,
parseInt( result[ 8 ] ) - 1,
parseInt( result[ 11 ] ) - 1
) );
geometry.faceVertexUvs[ 0 ].push( [
uvs[ parseInt( result[ 3 ] ) - 1 ],
uvs[ parseInt( result[ 6 ] ) - 1 ],
uvs[ parseInt( result[ 9 ] ) - 1 ],
uvs[ parseInt( result[ 12 ] ) - 1 ]
] );
}
} else if ( ( result = face_pattern3.exec( line ) ) !== null ) {
// ["f 1/1/1 2/2/2 3/3/3", " 1/1/1", "1", "1", "1", " 2/2/2", "2", "2", "2", " 3/3/3", "3", "3", "3", undefined, undefined, undefined, undefined]
if ( result[ 13 ] === undefined ) {
geometry.faces.push( face3(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 6 ] ) - 1,
parseInt( result[ 10 ] ) - 1,
[
normals[ parseInt( result[ 4 ] ) - 1 ],
normals[ parseInt( result[ 8 ] ) - 1 ],
normals[ parseInt( result[ 12 ] ) - 1 ]
]
) );
geometry.faceVertexUvs[ 0 ].push( [
uvs[ parseInt( result[ 3 ] ) - 1 ],
uvs[ parseInt( result[ 7 ] ) - 1 ],
uvs[ parseInt( result[ 11 ] ) - 1 ]
] );
} else {
geometry.faces.push( face4(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 6 ] ) - 1,
parseInt( result[ 10 ] ) - 1,
parseInt( result[ 14 ] ) - 1,
[
normals[ parseInt( result[ 4 ] ) - 1 ],
normals[ parseInt( result[ 8 ] ) - 1 ],
normals[ parseInt( result[ 12 ] ) - 1 ],
normals[ parseInt( result[ 16 ] ) - 1 ]
]
) );
geometry.faceVertexUvs[ 0 ].push( [
uvs[ parseInt( result[ 3 ] ) - 1 ],
uvs[ parseInt( result[ 7 ] ) - 1 ],
uvs[ parseInt( result[ 11 ] ) - 1 ],
uvs[ parseInt( result[ 15 ] ) - 1 ]
] );
}
} else if ( ( result = face_pattern4.exec( line ) ) !== null ) {
// ["f 1//1 2//2 3//3", " 1//1", "1", "1", " 2//2", "2", "2", " 3//3", "3", "3", undefined, undefined, undefined]
if ( result[ 10 ] === undefined ) {
geometry.faces.push( face3(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 5 ] ) - 1,
parseInt( result[ 8 ] ) - 1,
[
normals[ parseInt( result[ 3 ] ) - 1 ],
normals[ parseInt( result[ 6 ] ) - 1 ],
normals[ parseInt( result[ 9 ] ) - 1 ]
]
) );
} else {
geometry.faces.push( face4(
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 5 ] ) - 1,
parseInt( result[ 8 ] ) - 1,
parseInt( result[ 11 ] ) - 1,
[
normals[ parseInt( result[ 3 ] ) - 1 ],
normals[ parseInt( result[ 6 ] ) - 1 ],
normals[ parseInt( result[ 9 ] ) - 1 ],
normals[ parseInt( result[ 12 ] ) - 1 ]
]
) );
}
} else if ( line.startsWith( "usemtl " ) ) {
var material_name = line.substring( 7 );
material_name = material_name.trim();
var material = new THREE.MeshLambertMaterial();
material.name = material_name;
if ( geometry.faces.length > 0 ) {
// Finalize previous geometry and add to model
finalize_mesh( final_model, cur_mesh );
geometry = new THREE.Geometry();
geometry.vertices = vertices;
cur_mesh = { geometry: geometry };
}
cur_mesh.material = material;
//material_index = materialsCreator.getIndex( material_name );
} else if ( line.startsWith( "g " ) ) {
// Polygon group for object
var group_name = line.substring( 2 );
group_name = group_name.trim();
} else if ( line.startsWith( "o " ) ) {
// Object
var object_name = line.substring(2);
//object_name = $.trim(object_name);
} else if (line.startsWith("s ")) {
// Smooth shading
} else if (line.startsWith("mtllib ")) {
// mtl file
if (mtllibCallback) {
var mtlfile = line.substring(7);
mtlfile = $.trim(mtlfile);
mtllibCallback(mtlfile);
}
} else {
console.error("Unhandled line " + line);
}
}
finalize_mesh(final_model, cur_mesh);
return final_model;
}
};
......@@ -31,28 +31,28 @@ THREE.STLLoader.prototype = {
load: function ( url ) {
var scope = this;
var xhr = new XMLHttpRequest();
var request = new XMLHttpRequest();
xhr.addEventListener( 'load', function ( event ) {
request.addEventListener( 'load', function ( event ) {
scope.dispatchEvent( { type: 'load', content: scope.parse( event.target.responseText ) } );
}, false );
xhr.addEventListener( 'progress', function ( event ) {
request.addEventListener( 'progress', function ( event ) {
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
}, false );
xhr.addEventListener( 'error', function () {
request.addEventListener( 'error', function () {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
}, false );
xhr.open( 'GET', url, true );
xhr.send( null );
request.open( 'GET', url, true );
request.send( null );
},
......
此差异已折叠。
......@@ -15,28 +15,28 @@ THREE.VTKLoader.prototype = {
load: function ( url ) {
var scope = this;
var xhr = new XMLHttpRequest();
var request = new XMLHttpRequest();
xhr.addEventListener( 'load', function ( event ) {
request.addEventListener( 'load', function ( event ) {
scope.dispatchEvent( { type: 'load', content: scope.parse( event.target.responseText ) } );
}, false );
xhr.addEventListener( 'progress', function ( event ) {
request.addEventListener( 'progress', function ( event ) {
scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
}, false );
xhr.addEventListener( 'error', function () {
request.addEventListener( 'error', function () {
scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
}, false );
xhr.open( 'GET', url, true );
xhr.send( null );
request.open( 'GET', url, true );
request.send( null );
},
......
......@@ -18,13 +18,13 @@ THREE.CTMLoader.prototype = Object.create( THREE.Loader.prototype );
// Load multiple CTM parts defined in JSON
THREE.CTMLoader.prototype.loadParts = function( url, callback, useWorker, useBuffers, basePath ) {
THREE.CTMLoader.prototype.loadParts = function( url, callback, parameters ) {
var scope = this;
var xhr = new XMLHttpRequest();
basePath = basePath ? basePath : this.extractUrlBase( url );
var basePath = parameters.basePath ? parameters.basePath : this.extractUrlBase( url );
xhr.onreadystatechange = function() {
......@@ -62,7 +62,8 @@ THREE.CTMLoader.prototype.loadParts = function( url, callback, useWorker, useBuf
// load joined CTM file
var partUrl = basePath + jsonObject.data;
scope.load( partUrl, callbackFinal, useWorker, useBuffers, jsonObject.offsets );
var parametersPart = { useWorker: parameters.useWorker, useBuffers: parameters.useBuffers, offsets: jsonObject.offsets };
scope.load( partUrl, callbackFinal, parametersPart );
}
......@@ -82,11 +83,12 @@ THREE.CTMLoader.prototype.loadParts = function( url, callback, useWorker, useBuf
// - url (required)
// - callback (required)
THREE.CTMLoader.prototype.load = function( url, callback, useWorker, useBuffers, offsets ) {
THREE.CTMLoader.prototype.load = function( url, callback, parameters ) {
var scope = this;
offsets = offsets !== undefined ? offsets : [ 0 ];
var offsets = parameters.offsets !== undefined ? parameters.offsets : [ 0 ];
var useBuffers = parameters.useBuffers !== undefined ? parameters.useBuffers : true;
var xhr = new XMLHttpRequest(),
callbackProgress = null;
......@@ -103,7 +105,7 @@ THREE.CTMLoader.prototype.load = function( url, callback, useWorker, useBuffers,
//var s = Date.now();
if ( useWorker ) {
if ( parameters.useWorker ) {
var worker = new Worker( "js/loaders/ctm/CTMWorker.js" );
......@@ -136,7 +138,6 @@ THREE.CTMLoader.prototype.load = function( url, callback, useWorker, useBuffers,
} else {
for ( var i = 0; i < offsets.length; i ++ ) {
var stream = new CTM.Stream( binaryData );
......
......@@ -96,5 +96,3 @@ THREE.BloomPass.prototype = {
THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );
......@@ -109,34 +109,15 @@ THREE.EffectComposer.prototype = {
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
THREE.EffectComposer.camera.left = window.innerWidth / - 2;
THREE.EffectComposer.camera.right = window.innerWidth / 2;
THREE.EffectComposer.camera.top = window.innerHeight / 2;
THREE.EffectComposer.camera.bottom = window.innerHeight / - 2;
THREE.EffectComposer.camera.updateProjectionMatrix();
}
};
// shared ortho camera
THREE.EffectComposer.initWidth = window.innerWidth || 1;
THREE.EffectComposer.initHeight = window.innerHeight || 1;
THREE.EffectComposer.camera = new THREE.OrthographicCamera( THREE.EffectComposer.initWidth / - 2, THREE.EffectComposer.initWidth / 2, THREE.EffectComposer.initHeight / 2, THREE.EffectComposer.initHeight / - 2, -10000, 10000 );
// shared fullscreen quad scene
THREE.EffectComposer.geometry = new THREE.PlaneGeometry( 1, 1 );
THREE.EffectComposer.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null );
THREE.EffectComposer.quad.position.z = -100;
THREE.EffectComposer.quad.scale.set( THREE.EffectComposer.initWidth, THREE.EffectComposer.initHeight, 1 );
THREE.EffectComposer.quad = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null );
THREE.EffectComposer.scene = new THREE.Scene();
THREE.EffectComposer.scene.add( THREE.EffectComposer.quad );
THREE.EffectComposer.scene.add( THREE.EffectComposer.camera );
/**
* Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
* @author mrdoob / http://mrdoob.com/
*/
THREE.CSS3DObject = function ( element ) {
THREE.Object3D.call( this );
this.element = element;
this.element.style.position = "absolute";
this.element.style.WebkitTransformStyle = 'preserve-3d';
this.element.style.MozTransformStyle = 'preserve-3d';
this.element.style.oTransformStyle = 'preserve-3d';
};
THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
//
THREE.CSS3DRenderer = function () {
console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
var _width, _height;
var _widthHalf, _heightHalf;
var _projector = new THREE.Projector();
this.domElement = document.createElement( 'div' );
this.domElement.style.WebkitTransformStyle = 'preserve-3d';
this.domElement.style.WebkitPerspectiveOrigin = '50% 50%';
this.domElement.style.MozTransformStyle = 'preserve-3d';
this.domElement.style.MozPerspectiveOrigin = '50% 50%';
this.domElement.style.oTransformStyle = 'preserve-3d';
this.domElement.style.oPerspectiveOrigin = '50% 50%';
// TODO: Shouldn't it be possible to remove cameraElement?
this.cameraElement = document.createElement( 'div' );
this.cameraElement.style.WebkitTransformStyle = 'preserve-3d';
this.cameraElement.style.MozTransformStyle = 'preserve-3d';
this.cameraElement.style.oTransformStyle = 'preserve-3d';
this.domElement.appendChild( this.cameraElement );
this.setSize = function ( width, height ) {
_width = width;
_height = height;
_widthHalf = _width / 2;
_heightHalf = _height / 2;
this.domElement.style.width = width + 'px';
this.domElement.style.height = height + 'px';
this.cameraElement.style.width = width + 'px';
this.cameraElement.style.height = height + 'px';
};
var epsilon = function ( value ) {
return Math.abs( value ) < 0.000001 ? 0 : value;
}
var getCameraCSSMatrix = function ( matrix ) {
var elements = matrix.elements;
return 'matrix3d(' +
epsilon( elements[ 0 ] ) + ',' +
epsilon( - elements[ 1 ] ) + ',' +
epsilon( elements[ 2 ] ) + ',' +
epsilon( elements[ 3 ] ) + ',' +
epsilon( elements[ 4 ] ) + ',' +
epsilon( - elements[ 5 ] ) + ',' +
epsilon( elements[ 6 ] ) + ',' +
epsilon( elements[ 7 ] ) + ',' +
epsilon( elements[ 8 ] ) + ',' +
epsilon( - elements[ 9 ] ) + ',' +
epsilon( elements[ 10 ] ) + ',' +
epsilon( elements[ 11 ] ) + ',' +
epsilon( elements[ 12 ] ) + ',' +
epsilon( - elements[ 13 ] ) + ',' +
epsilon( elements[ 14 ] ) + ',' +
epsilon( elements[ 15 ] ) +
')';
}
var getObjectCSSMatrix = function ( matrix ) {
var elements = matrix.elements;
return 'translate3d(-50%,-50%,0) scale3d(1,-1,1) matrix3d(' +
epsilon( elements[ 0 ] ) + ',' +
epsilon( elements[ 1 ] ) + ',' +
epsilon( elements[ 2 ] ) + ',' +
epsilon( elements[ 3 ] ) + ',' +
epsilon( elements[ 4 ] ) + ',' +
epsilon( elements[ 5 ] ) + ',' +
epsilon( elements[ 6 ] ) + ',' +
epsilon( elements[ 7 ] ) + ',' +
epsilon( elements[ 8 ] ) + ',' +
epsilon( elements[ 9 ] ) + ',' +
epsilon( elements[ 10 ] ) + ',' +
epsilon( elements[ 11 ] ) + ',' +
epsilon( elements[ 12 ] ) + ',' +
epsilon( elements[ 13 ] ) + ',' +
epsilon( elements[ 14 ] ) + ',' +
epsilon( elements[ 15 ] ) +
')';
}
this.render = function ( scene, camera ) {
var fov = 0.5 / Math.tan( camera.fov * Math.PI / 360 ) * _height;
this.domElement.style.WebkitPerspective = fov + "px";
this.domElement.style.MozPerspective = fov + "px";
this.domElement.style.oPerspective = fov + "px";
var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) + " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
this.cameraElement.style.WebkitTransform = style;
this.cameraElement.style.MozTransform = style;
this.cameraElement.style.oTransform = style;
var objects = _projector.projectScene( scene, camera, false ).objects;
for ( var i = 0, il = objects.length; i < il; i ++ ) {
var object = objects[ i ].object;
if ( object instanceof THREE.CSS3DObject ) {
var element = object.element;
style = getObjectCSSMatrix( object.matrixWorld );
element.style.WebkitTransform = style;
element.style.MozTransform = style;
element.style.oTransform = style;
if ( element.parentNode !== this.cameraElement ) {
this.cameraElement.appendChild( element );
}
}
}
};
};
/**
* @author mr.doob / http://mrdoob.com/
* @author mrdoob / http://mrdoob.com/
*/
THREE.DOMRenderer = function () {
......
/**
* @author mr.doob / http://mrdoob.com/
* @author mrdoob / http://mrdoob.com/
*/
THREE.SVGRenderer = function () {
......@@ -97,7 +97,7 @@ THREE.SVGRenderer = function () {
_this.info.render.vertices = 0;
_this.info.render.faces = 0;
_renderData = _projector.projectScene( scene, camera, this.sortElements );
_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
_elements = _renderData.elements;
_lights = _renderData.lights;
......@@ -350,15 +350,18 @@ THREE.SVGRenderer = function () {
if ( _enableLighting ) {
var diffuse = material.color;
var emissive = material.emissive;
_color.r = _ambientLight.r;
_color.g = _ambientLight.g;
_color.b = _ambientLight.b;
calculateLight( _lights, element.centroidWorld, element.normalWorld, _color );
_color.r = Math.max( 0, Math.min( material.color.r * _color.r, 1 ) );
_color.g = Math.max( 0, Math.min( material.color.g * _color.g, 1 ) );
_color.b = Math.max( 0, Math.min( material.color.b * _color.b, 1 ) );
_color.r = diffuse.r * _color.r + emissive.r;
_color.g = diffuse.g * _color.g + emissive.g;
_color.b = diffuse.b * _color.b + emissive.b;
} else {
......@@ -407,15 +410,18 @@ THREE.SVGRenderer = function () {
if ( _enableLighting ) {
var diffuse = material.color;
var emissive = material.emissive;
_color.r = _ambientLight.r;
_color.g = _ambientLight.g;
_color.b = _ambientLight.b;
calculateLight( _lights, element.centroidWorld, element.normalWorld, _color );
_color.r = Math.max( 0, Math.min( material.color.r * _color.r, 1 ) );
_color.g = Math.max( 0, Math.min( material.color.g * _color.g, 1 ) );
_color.b = Math.max( 0, Math.min( material.color.b * _color.b, 1 ) );
_color.r = diffuse.r * _color.r + emissive.r;
_color.g = diffuse.g * _color.g + emissive.g;
_color.b = diffuse.b * _color.b + emissive.b;
} else {
......
/**
* @author mr.doob / http://mrdoob.com/
* @author mrdoob / http://mrdoob.com/
*/
THREE.SoftwareRenderer = function () {
......
/**
* @author mr.doob / http://mrdoob.com/
* @author mrdoob / http://mrdoob.com/
*/
THREE.SoftwareRenderer2 = function () {
......
/**
* @author mr.doob / http://mrdoob.com/
* @author mrdoob / http://mrdoob.com/
*/
THREE.SoftwareRenderer3 = function () {
......
......@@ -118,7 +118,7 @@
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].value = normalTexture;
uniforms[ "uNormalScale" ].value = 0.85;
uniforms[ "uNormalScale" ].value.set( 0.85, 0.85 );
uniforms[ "tDiffuse" ].value = planetTexture;
uniforms[ "tSpecular" ].value = specularTexture;
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
var scene2, renderer2;
var controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 200, 200 );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
scene2 = new THREE.Scene();
for ( var i = 0; i < 20; i ++ ) {
var element = document.createElement( 'div' );
element.style.width = '100px';
element.style.height = '100px';
element.style.background = new THREE.Color( Math.random() * 0xffffff ).getContextStyle();
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 200 - 100;
object.position.y = Math.random() * 200 - 100;
object.position.z = Math.random() * 200 - 100;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
scene2.add( object );
}
//
renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
document.body.appendChild( renderer2.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
renderer2.render( scene2, camera );
}
</script>
</body>
</html>
{
"materials": {
"gums": { "map_Kd": "James_Mouth_Gum_Lores.jpg" },
"tongue": { "map_Kd": "James_Tongue_Lores.jpg" },
"teethbottom": { "Kd": [251, 248, 248] },
"teethtop": { "Kd": [251, 248, 248] },
"topeyelashes": { "Kd": [66, 52, 42], "map_Kd": "James_EyeLashTopTran.png", "d": 0.999 },
"bottomeyelashes": { "Kd": [66, 52, 42], "map_Kd": "James_EyeLashBotTran.png", "d": 0.999 },
"head": { "map_Kd": "James_Face_Color_Hair_Lores.jpg", "Ks": [25,25,25], "Ns": 70 },
"eyetrans": { "Kd": [0, 0, 0] },
"pupil": { "Kd": [1, 1, 1] },
"iris": { "map_Kd": "James_Eye_Inner_Green.jpg" },
"eyeball": { "map_Kd": "James_Eye_Green.jpg" },
"pants": { "map_Kd": "MJeans1TEX_Lores.jpg", "Ks": [30,30,30], "Ns": 20 },
"tshirt3": { "map_Kd": "MTshirt3TEX_Lores.jpg", "Ks": [30,30,30], "Ns": 20 },
"skinbody": { "map_Kd": "James_Body_Lores.jpg", "Ks": [25,25,25], "Ns": 70 },
"fingernails": { "map_Kd": "Nail_Hand_01_Lores.jpg" },
"soleshoe": { "map_Kd": "MCasShoe1TEX_Lores.jpg" },
"sole": { "map_Kd": "MCasShoe1TEX_Lores.jpg" },
"laces": { "map_Kd": "MCasShoe1TEX_Lores.jpg" },
"bow": { "map_Kd": "MCasShoe1TEX_Lores.jpg" }
},
"decodeParams": {
"decodeOffsets": [-2533,-149,-6225,0,0,-511,-511,-511],
"decodeScales": [0.000043,0.000043,0.000043,0.000978,0.000978,0.001957,0.001957,0.001957]
},
"urls": {
"ben.utf8": [
{ "material": "bottomeyelashes",
"attribRange": [0, 130],
"codeRange": [1040, 388, 192]
},
{ "material": "bow",
"attribRange": [1428, 1848],
"codeRange": [16212, 6457, 3224]
},
{ "material": "eyeball",
"attribRange": [22669, 3834],
"codeRange": [53341, 14697, 7284]
},
{ "material": "eyetrans",
"attribRange": [68038, 5248],
"codeRange": [110022, 20180, 9964]
},
{ "material": "fingernails",
"attribRange": [130202, 1023],
"codeRange": [138386, 2669, 1228]
},
{ "material": "gums",
"attribRange": [141055, 1446],
"codeRange": [152623, 5270, 2624]
},
{ "material": "head",
"attribRange": [157893, 2219],
"codeRange": [175645, 8353, 4168]
},
{ "material": "iris",
"attribRange": [183998, 902],
"codeRange": [191214, 3332, 1664]
},
{ "material": "laces",
"attribRange": [194546, 1016],
"codeRange": [202674, 3590, 1792]
},
{ "material": "pants",
"attribRange": [206264, 8200],
"codeRange": [271864, 30625, 15293]
},
{ "material": "pupil",
"attribRange": [302489, 148],
"codeRange": [303673, 581, 288]
},
{ "material": "skinbody",
"attribRange": [304254, 4990],
"codeRange": [344174, 15770, 7830]
},
{ "material": "sole",
"attribRange": [359944, 2588],
"codeRange": [380648, 9345, 4668]
},
{ "material": "soleshoe",
"attribRange": [389993, 3164],
"codeRange": [415305, 10721, 5352]
},
{ "material": "teethbottom",
"attribRange": [426026, 1235],
"codeRange": [435906, 3513, 1656]
},
{ "material": "teethtop",
"attribRange": [439419, 1666],
"codeRange": [452747, 3937, 1816]
},
{ "material": "tongue",
"attribRange": [456684, 845],
"codeRange": [463444, 3162, 1578]
},
{ "material": "topeyelashes",
"attribRange": [466606, 130],
"codeRange": [467646, 388, 192]
},
{ "material": "tshirt3",
"attribRange": [468034, 4283],
"codeRange": [502298, 14470, 7216]
}
]
}
}
\ No newline at end of file
{
"materials": {
"gums": { "map_Kd": "dds/James_Mouth_Gum_Lores.dds" },
"tongue": { "map_Kd": "dds/James_Tongue_Lores.dds" },
"teethbottom": { "Kd": [251, 248, 248] },
"teethtop": { "Kd": [251, 248, 248] },
"topeyelashes": { "Kd": [66, 52, 42], "map_Kd": "dds/James_EyeLashTopTran.dds", "d": 0.999 },
"bottomeyelashes": { "Kd": [66, 52, 42], "map_Kd": "dds/James_EyeLashBotTran.dds", "d": 0.999 },
"head": { "map_Kd": "dds/James_Face_Color_Hair_Lores.dds", "Ks": [25,25,25], "Ns": 70 },
"eyetrans": { "Kd": [0, 0, 0] },
"pupil": { "Kd": [1, 1, 1] },
"iris": { "map_Kd": "dds/James_Eye_Inner_Green.dds" },
"eyeball": { "map_Kd": "dds/James_Eye_Green.dds" },
"pants": { "map_Kd": "dds/MJeans1TEX_Lores.dds", "Ks": [30,30,30], "Ns": 20 },
"tshirt3": { "map_Kd": "dds/MTshirt3TEX_Lores.dds", "Ks": [30,30,30], "Ns": 20 },
"skinbody": { "map_Kd": "dds/James_Body_Lores.dds", "Ks": [25,25,25], "Ns": 70 },
"fingernails": { "map_Kd": "dds/Nail_Hand_01_Lores.dds" },
"soleshoe": { "map_Kd": "dds/MCasShoe1TEX_Lores.dds" },
"sole": { "map_Kd": "dds/MCasShoe1TEX_Lores.dds" },
"laces": { "map_Kd": "dds/MCasShoe1TEX_Lores.dds" },
"bow": { "map_Kd": "dds/MCasShoe1TEX_Lores.dds" }
},
"decodeParams": {
"decodeOffsets": [-2533,-149,-6225,0,0,-511,-511,-511],
"decodeScales": [0.000043,0.000043,0.000043,0.000978,0.000978,0.001957,0.001957,0.001957]
},
"urls": {
"ben.utf8": [
{ "material": "bottomeyelashes",
"attribRange": [0, 130],
"codeRange": [1040, 388, 192]
},
{ "material": "bow",
"attribRange": [1428, 1848],
"codeRange": [16212, 6457, 3224]
},
{ "material": "eyeball",
"attribRange": [22669, 3834],
"codeRange": [53341, 14697, 7284]
},
{ "material": "eyetrans",
"attribRange": [68038, 5248],
"codeRange": [110022, 20180, 9964]
},
{ "material": "fingernails",
"attribRange": [130202, 1023],
"codeRange": [138386, 2669, 1228]
},
{ "material": "gums",
"attribRange": [141055, 1446],
"codeRange": [152623, 5270, 2624]
},
{ "material": "head",
"attribRange": [157893, 2219],
"codeRange": [175645, 8353, 4168]
},
{ "material": "iris",
"attribRange": [183998, 902],
"codeRange": [191214, 3332, 1664]
},
{ "material": "laces",
"attribRange": [194546, 1016],
"codeRange": [202674, 3590, 1792]
},
{ "material": "pants",
"attribRange": [206264, 8200],
"codeRange": [271864, 30625, 15293]
},
{ "material": "pupil",
"attribRange": [302489, 148],
"codeRange": [303673, 581, 288]
},
{ "material": "skinbody",
"attribRange": [304254, 4990],
"codeRange": [344174, 15770, 7830]
},
{ "material": "sole",
"attribRange": [359944, 2588],
"codeRange": [380648, 9345, 4668]
},
{ "material": "soleshoe",
"attribRange": [389993, 3164],
"codeRange": [415305, 10721, 5352]
},
{ "material": "teethbottom",
"attribRange": [426026, 1235],
"codeRange": [435906, 3513, 1656]
},
{ "material": "teethtop",
"attribRange": [439419, 1666],
"codeRange": [452747, 3937, 1816]
},
{ "material": "tongue",
"attribRange": [456684, 845],
"codeRange": [463444, 3162, 1578]
},
{ "material": "topeyelashes",
"attribRange": [466606, 130],
"codeRange": [467646, 388, 192]
},
{ "material": "tshirt3",
"attribRange": [468034, 4283],
"codeRange": [502298, 14470, 7216]
}
]
}
}
\ No newline at end of file
{
"materials": {
"preview": { "Kd": [184, 136, 234] },
"nails": { "Kd": [251, 238, 209], "map_Kd": "hand.jpg", "Ks": [30,30,30], "Ns": 100 },
"skin": { "Kd": [207, 181, 161], "map_Kd": "hand.jpg", "Ks": [30,30,30], "Ns": 30 }
},
"decodeParams": {
"decodeOffsets": [-7473,-239,-8362,0,0,-511,-511,-511],
"decodeScales": [0.000050,0.000050,0.000050,0.000978,0.000978,0.001957,0.001957,0.001957]
},
"urls": {
"hand.utf8": [
{ "material": "nails",
"attribRange": [0, 261],
"codeRange": [2088, 817, 404]
},
{ "material": "preview",
"attribRange": [2905, 688],
"codeRange": [8409, 2570, 1280]
},
{ "material": "skin",
"attribRange": [10979, 8899],
"codeRange": [82171, 31026, 15451]
}
]
}
}
\ No newline at end of file
......@@ -2,15 +2,16 @@
"metadata" :
{
"formatVersion" : 3,
"generatedBy" : "Blender 2.60 Exporter",
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.63 Exporter",
"vertices" : 8,
"faces" : 6,
"normals" : 0,
"colors" : 0,
"uvs" : 0,
"uvs" : [],
"materials" : 1,
"morphTargets" : 0
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
......@@ -19,16 +20,20 @@
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material",
"colorAmbient" : [0.0, 0.0, 0.0],
"blending" : "NormalBlending",
"colorAmbient" : [0.6400000190734865, 0.10179081114814892, 0.126246120426746],
"colorDiffuse" : [0.6400000190734865, 0.10179081114814892, 0.126246120426746],
"colorSpecular" : [0.5, 0.5, 0.5],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
}],
"vertices": [1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,1.000000,1.000000,0.999999,-1.000001,1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,1.000000],
"vertices": [1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,1,1,0.999999,-1,1,-1,-1,1,-1,1,1],
"morphTargets": [],
......@@ -36,10 +41,17 @@
"colors": [],
"uvs": [[]],
"uvs": [],
"faces": [3,0,1,2,3,0,3,4,7,6,5,0,3,0,4,5,1,0,3,1,5,6,2,0,3,2,6,7,3,0,3,4,0,3,7,0]
"faces": [3,0,1,2,3,0,3,4,7,6,5,0,3,0,4,5,1,0,3,1,5,6,2,0,3,2,6,7,3,0,3,4,0,3,7,0],
"bones" : [],
"skinIndices" : [],
"skinWeights" : [],
"animation" : {}
}
此差异已折叠。
此差异已折叠。
Textures from:
http://opengameart.org/node/7506
http://opengameart.org/node/8038
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -275,9 +275,6 @@
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册