Startsida Utforska Hjälp
Logga in
javascript
/
three.js
spegling av https://github.com/tazdij/three.js.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

Added VertexNormalsHelper and WireframeHelper. Tweaks to BoxHelper and FaceNormalsHelper.

Mr.doob 12 år sedan
förälder
3f8dba9f9a
incheckning
bad6535be1
8 ändrade filer med 220 tillägg och 22 borttagningar
Delad Vy Visa Diff Statistik
  1. 0 1
      editor/js/Viewport.js
  2. 0 1
      examples/webgl_geometry_subdivision.html
  3. 102 0
      examples/webgl_helpers.html
  4. 19 16
      src/extras/helpers/BoxHelper.js
  5. 9 4
      src/extras/helpers/FaceNormalsHelper.js
  6. 39 0
      src/extras/helpers/VertexNormalsHelper.js
  7. 49 0
      src/extras/helpers/WireframeHelper.js
  8. 2 0
      utils/build/includes/extras.json

+ 0 - 1
editor/js/Viewport.js
Visa fil 

@@ -36,7 +36,6 @@ var Viewport = function ( signals ) {
 
 	//
 
 
 	var selectionBox = new THREE.BoxHelper();
 
-	selectionBox.material.color.setHex( 0xffff00 );
 
 	selectionBox.material.depthTest = false;
 
 	selectionBox.material.transparent = true;
 
 	selectionBox.visible = false;

+ 0 - 1
examples/webgl_geometry_subdivision.html
Visa fil 

@@ -246,7 +246,6 @@
 
 				var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
 
 				var mesh = new THREE.Mesh( geometry, material )
 
 				group.add( mesh );
 
-				group.add( new THREE.FaceNormalsHelper( mesh ) );
 
 
 				var debugNewPoints = false;
 
 				var debugOldPoints = false;

+ 102 - 0
examples/webgl_helpers.html
Visa fil 

@@ -0,0 +1,102 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - helpers</title>
 
+		<meta charset="utf-8">
 
+		<style>
 
+			body {
 
+				margin: 0px;
 
+				background-color: #000000;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+
 
+		<script>
 
+
 
+			var camera, scene, renderer;
 
+			var mesh;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera.position.z = 400;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				var light = new THREE.PointLight();
 
+				light.position.set( 200, 100, 150 );
 
+				scene.add( light );
 
+
 
+				scene.add( new THREE.PointLightHelper( light, 5 ) );
 
+
 
+				var loader = new THREE.JSONLoader();
 
+				loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function ( geometry, materials ) {
 
+
 
+					var material = new THREE.MeshBasicMaterial( { opacity: 0.25, wireframe: true, depthTest: false, transparent: true } );
 
+
 
+					mesh = new THREE.Mesh( geometry, material );
 
+					mesh.scale.multiplyScalar( 50 );
 
+					scene.add( mesh );
 
+
 
+					scene.add( new THREE.FaceNormalsHelper( mesh, 0.2 ) );
 
+
 
+					scene.add( new THREE.VertexNormalsHelper( mesh, 0.2 ) );
 
+
 
+					/*
 
+					var helper = new THREE.WireframeHelper( mesh );
 
+					helper.material.depthTest = false;
 
+					helper.material.opacity = 0.5;
 
+					helper.material.transparent = true;
 
+					scene.add( helper );
 
+					*/
 
+
 
+					scene.add( new THREE.BoxHelper( mesh ) );
 
+
 
+				} );
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				if ( mesh !== undefined ) {
 
+
 
+					mesh.rotation.y += 0.01;
 
+
 
+				}
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 19 - 16
src/extras/helpers/BoxHelper.js
Visa fil 

@@ -2,11 +2,7 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-THREE.BoxHelper = function ( size ) {
 
-
 
-	size = size || 1;
 
-
 
-	var geometry = new THREE.Geometry();
 
+THREE.BoxHelper = function ( object ) {
 
 
 	//   5____4
 
 	// 1/___0/|
 
@@ -14,19 +10,22 @@ THREE.BoxHelper = function ( size ) {
 
 	// 2/___3/
 
 
 	var vertices = [
 
-		new THREE.Vector3(   size,   size,   size ),
 
-		new THREE.Vector3( - size,   size,   size ),
 
-		new THREE.Vector3( - size, - size,   size ),
 
-		new THREE.Vector3(   size, - size,   size ),
 
-
 
-		new THREE.Vector3(   size,   size, - size ),
 
-		new THREE.Vector3( - size,   size, - size ),
 
-		new THREE.Vector3( - size, - size, - size ),
 
-		new THREE.Vector3(   size, - size, - size )
 
+		new THREE.Vector3(   1,   1,   1 ),
 
+		new THREE.Vector3( - 1,   1,   1 ),
 
+		new THREE.Vector3( - 1, - 1,   1 ),
 
+		new THREE.Vector3(   1, - 1,   1 ),
 
+
 
+		new THREE.Vector3(   1,   1, - 1 ),
 
+		new THREE.Vector3( - 1,   1, - 1 ),
 
+		new THREE.Vector3( - 1, - 1, - 1 ),
 
+		new THREE.Vector3(   1, - 1, - 1 )
 
 	];
 
 
+	this.vertices = vertices;
 
+
 
 	// TODO: Wouldn't be nice if Line had .segments?
 
 
+	var geometry = new THREE.Geometry();
 
 	geometry.vertices.push(
 
 		vertices[ 0 ], vertices[ 1 ],
 
 		vertices[ 1 ], vertices[ 2 ],
 
@@ -44,9 +43,13 @@ THREE.BoxHelper = function ( size ) {
 
 		vertices[ 3 ], vertices[ 7 ]
 
 	);
 
 
-	this.vertices = vertices;
 
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ), THREE.LinePieces );
 
+
 
+	if ( object !== undefined ) {
 
 
-	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial(), THREE.LinePieces );
 
+		this.update( object );
 
+
 
+	}
 
 
 };

+ 9 - 4
src/extras/helpers/FaceNormalsHelper.js
Visa fil 

@@ -8,12 +8,17 @@ THREE.FaceNormalsHelper = function ( object, size ) {
 
 
 	var geometry = new THREE.Geometry();
 
 
-	for( var i = 0, l = object.geometry.faces.length; i < l; i ++ ) {
 
+	var faces = object.geometry.faces;
 
 
-		var face = object.geometry.faces[ i ];
 
+	for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
 
-		geometry.vertices.push( face.centroid );
 
-		geometry.vertices.push( face.normal.clone().multiplyScalar( size ).add( face.centroid ) );
 
+		var face = faces[ i ];
 
+
 
+		var centroid = face.centroid;
 
+		var normal = face.normal.clone();
 
+
 
+		geometry.vertices.push( centroid );
 
+		geometry.vertices.push( normal.multiplyScalar( size ).add( centroid ) );
 
 
 	}

+ 39 - 0
src/extras/helpers/VertexNormalsHelper.js
Visa fil 

@@ -0,0 +1,39 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+THREE.VertexNormalsHelper = function ( object, size ) {
 
+
 
+	size = size || 20;
 
+
 
+	var keys = [ 'a', 'b', 'c', 'd' ];
 
+	var geometry = new THREE.Geometry();
 
+
 
+	var vertices = object.geometry.vertices;
 
+	var faces = object.geometry.faces;
 
+
 
+	for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
+
 
+		var face = faces[ i ];
 
+
 
+		for ( var j = 0, jl = face.vertexNormals.length; j < jl; j ++ ) {
 
+
 
+			var vertexId = face[ keys[ j ] ];
 
+			var vertex = vertices[ vertexId ];
 
+			var normal = face.vertexNormals[ j ].clone();
 
+
 
+			geometry.vertices.push( vertex );
 
+			geometry.vertices.push( normal.multiplyScalar( size ).add( vertex ) );
 
+
 
+		}
 
+
 
+	}
 
+
 
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: 0xff0000 } ), THREE.LinePieces );
 
+
 
+	this.matrixAutoUpdate = false;
 
+	this.matrixWorld = object.matrixWorld;
 
+
 
+};
 
+
 
+THREE.VertexNormalsHelper.prototype = Object.create( THREE.Line.prototype );

+ 49 - 0
src/extras/helpers/WireframeHelper.js
Visa fil 

@@ -0,0 +1,49 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+THREE.WireframeHelper = function ( object ) {
 
+
 
+	var edge = [ 0, 0 ], hash = {};
 
+	var sortFunction = function ( a, b ) { return a - b };
 
+
 
+	var keys = [ 'a', 'b', 'c', 'd' ];
 
+	var geometry = new THREE.Geometry();
 
+
 
+	var vertices = object.geometry.vertices;
 
+	var faces = object.geometry.faces;
 
+
 
+	for ( var i = 0, l = faces.length; i < l; i ++ ) {
 
+
 
+		var face = faces[ i ];
 
+		var length = face instanceof THREE.Face4 ? 4 : 3;
 
+
 
+		for ( var j = 0; j < length; j ++ ) {
 
+
 
+			edge[ 0 ] = face[ keys[ j ] ];
 
+			edge[ 1 ] = face[ keys[ ( j + 1 ) % length ] ];
 
+			edge.sort( sortFunction );
 
+
 
+			var key = edge.toString();
 
+
 
+			if ( hash[ key ] === undefined ) {
 
+
 
+				geometry.vertices.push( vertices[ edge[ 0 ] ] );
 
+				geometry.vertices.push( vertices[ edge[ 1 ] ] );
 
+
 
+				hash[ key ] = true;
 
+
 
+			}
 
+
 
+		}
 
+
 
+	}
 
+
 
+	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: 0xffffff } ), THREE.LinePieces );
 
+
 
+	this.matrixAutoUpdate = false;
 
+	this.matrixWorld = object.matrixWorld;
 
+
 
+};
 
+
 
+THREE.WireframeHelper.prototype = Object.create( THREE.Line.prototype );

+ 2 - 0
utils/build/includes/extras.json
Visa fil 

@@ -53,6 +53,8 @@
 
 	"src/extras/helpers/HemisphereLightHelper.js",
 
 	"src/extras/helpers/PointLightHelper.js",
 
 	"src/extras/helpers/SpotLightHelper.js",
 
+	"src/extras/helpers/VertexNormalsHelper.js",
 
+	"src/extras/helpers/WireframeHelper.js",
 
 	"src/extras/objects/ImmediateRenderObject.js",
 
 	"src/extras/objects/LensFlare.js",
 
 	"src/extras/objects/MorphBlendMesh.js",