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

Added VertexNormalsHelper and WireframeHelper. Tweaks to BoxHelper and FaceNormalsHelper.

上级 3f8dba9f
......@@ -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;
......
......@@ -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;
......
<!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>
......@@ -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 );
}
};
......
......@@ -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 ) );
}
......
/**
* @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 );
/**
* @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 );
......@@ -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",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册