|
|
@@ -1,7 +1,7 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js webgl - geometry - Subdivisions with Catmull-Clark</title>
|
|
|
+ <title>three.js webgl - geometry - normals</title>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<style>
|
|
|
@@ -11,304 +11,149 @@
|
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: Monospace;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
+ <div id="container"></div>
|
|
|
+ <div id="info">
|
|
|
+ <a href="https://threejs.org" target="_blank">three.js</a> - geometry - normals</a>
|
|
|
+ <p>
|
|
|
+ <span>Yellow Arrows: Face Normals</span><br>
|
|
|
+ <span>Red Arrows: Vertex Normals</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
<script src="../build/three.js"></script>
|
|
|
<script src="js/controls/OrbitControls.js"></script>
|
|
|
+ <script src="./js/libs/dat.gui.min.js"></script>
|
|
|
<script src="js/libs/stats.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
- var container, stats;
|
|
|
-
|
|
|
+ var container, stats, gui;
|
|
|
var camera, controls, scene, renderer;
|
|
|
+ var mesh, geometry;
|
|
|
|
|
|
- var cube, plane;
|
|
|
-
|
|
|
- // Create new object by parameters
|
|
|
-
|
|
|
- var createSomething = function( klass, args ) {
|
|
|
-
|
|
|
- var F = function( klass, args ) {
|
|
|
-
|
|
|
- return klass.apply( this, args );
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- F.prototype = klass.prototype;
|
|
|
-
|
|
|
- return new F( klass, args );
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- // Cube
|
|
|
-
|
|
|
- var materials = [];
|
|
|
-
|
|
|
- for ( var i = 0; i < 6; i ++ ) {
|
|
|
-
|
|
|
- materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } ) ] );
|
|
|
-
|
|
|
- }
|
|
|
+ var geometries = [
|
|
|
|
|
|
- var geometriesParams = [
|
|
|
-
|
|
|
- { type: 'BoxGeometry', args: [ 200, 200, 200, 2, 2, 2, materials ] },
|
|
|
- { type: 'TorusGeometry', args: [ 100, 60, 12, 12 ] },
|
|
|
- { type: 'TorusKnotGeometry', args: [ ] },
|
|
|
- { type: 'SphereGeometry', args: [ 100, 12, 12 ] },
|
|
|
- { type: 'SphereGeometry', args: [ 100, 5, 5 ] },
|
|
|
- { type: 'SphereGeometry', args: [ 100, 13, 13 ] },
|
|
|
- { type: 'IcosahedronGeometry', args: [ 100, 1 ] },
|
|
|
- { type: 'CylinderGeometry', args: [ 25, 75, 200, 8, 3 ]} ,
|
|
|
- { type: 'OctahedronGeometry', args: [200, 0] },
|
|
|
- { type: 'LatheGeometry', args: [ [
|
|
|
- new THREE.Vector2(0,-100),
|
|
|
- new THREE.Vector2(50,-50),
|
|
|
- new THREE.Vector2(10,0),
|
|
|
- new THREE.Vector2(50,050),
|
|
|
- new THREE.Vector2(0,100) ] ]},
|
|
|
- { type: 'LatheGeometry', args: [ [
|
|
|
- new THREE.Vector2(0,-100),
|
|
|
- new THREE.Vector2(50,-50),
|
|
|
- new THREE.Vector2(10,0),
|
|
|
- new THREE.Vector2(50,050),
|
|
|
- new THREE.Vector2(100,100) ], 12, 0, Math.PI ] },
|
|
|
- { type: 'LatheGeometry', args: [ [
|
|
|
- new THREE.Vector2(10,-100),
|
|
|
- new THREE.Vector2(50,-50),
|
|
|
- new THREE.Vector2(10,0),
|
|
|
- new THREE.Vector2(50,050),
|
|
|
- new THREE.Vector2(0,100) ], 12, Math.PI*2/3, Math.PI*3/2 ] },
|
|
|
- { type: 'TextGeometry', args: ['&', {
|
|
|
- size: 200,
|
|
|
- height: 50,
|
|
|
- curveSegments: 1
|
|
|
- }]},
|
|
|
- { type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
|
|
|
+ { type: 'BoxGeometry', geometry: new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ) },
|
|
|
+ { type: 'CircleGeometry', geometry: new THREE.CircleGeometry( 200, 32 ) },
|
|
|
+ { type: 'CylinderGeometry', geometry: new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ) } ,
|
|
|
+ { type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronGeometry( 100, 1 ) },
|
|
|
+ { type: 'OctahedronGeometry', geometry: new THREE.OctahedronGeometry( 200, 0 ) },
|
|
|
+ { type: 'PlaneGeometry', geometry: new THREE.PlaneGeometry( 200, 200, 4, 4 ) },
|
|
|
+ { type: 'RingGeometry', geometry: new THREE.RingGeometry( 32, 64, 16 ) },
|
|
|
+ { type: 'SphereGeometry', geometry: new THREE.SphereGeometry( 100, 12, 12 ) },
|
|
|
+ { type: 'TorusGeometry', geometry: new THREE.TorusGeometry( 64, 16, 12, 12 ) },
|
|
|
+ { type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotGeometry( 64, 16 ) }
|
|
|
|
|
|
];
|
|
|
|
|
|
- var loader = new THREE.FontLoader();
|
|
|
- loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
|
|
|
-
|
|
|
- geometriesParams[ 12 ].args[ 1 ].font = font;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- var info;
|
|
|
- var geometryIndex = 0;
|
|
|
+ var options = {
|
|
|
+ Geometry: 0
|
|
|
+ };
|
|
|
|
|
|
- // start scene
|
|
|
+ var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
|
|
|
- function nextGeometry() {
|
|
|
-
|
|
|
- geometryIndex ++;
|
|
|
-
|
|
|
- if ( geometryIndex > geometriesParams.length - 1 ) {
|
|
|
-
|
|
|
- geometryIndex = 0;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- addStuff();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function switchGeometry(i) {
|
|
|
-
|
|
|
- geometryIndex = i;
|
|
|
-
|
|
|
- addStuff();
|
|
|
- }
|
|
|
-
|
|
|
- function updateInfo() {
|
|
|
-
|
|
|
- var params = geometriesParams[ geometryIndex ];
|
|
|
-
|
|
|
- var dropdown = '<select id="dropdown" onchange="switchGeometry(this.value)">';
|
|
|
-
|
|
|
- for ( i = 0; i < geometriesParams.length; i ++ ) {
|
|
|
- dropdown += '<option value="' + i + '"';
|
|
|
-
|
|
|
- dropdown += (geometryIndex == i) ? ' selected' : '';
|
|
|
-
|
|
|
- dropdown += '>' + geometriesParams[i].type + '</option>';
|
|
|
- }
|
|
|
-
|
|
|
- dropdown += '</select>';
|
|
|
+ function addMesh() {
|
|
|
|
|
|
- var text =
|
|
|
- 'Drag to spin THREE.' + params.type +
|
|
|
- '<br>' +
|
|
|
- '<br>Geometry: ' + dropdown + ' <a href="#" onclick="nextGeometry();return false;">next</a>';
|
|
|
+ if ( mesh !== undefined ) {
|
|
|
|
|
|
- text +=
|
|
|
- '<br><br><font color="3333FF">Blue Arrows: Face Normals</font>' +
|
|
|
- '<br><font color="FF3333">Red Arrows: Vertex Normals before Geometry.mergeVertices</font>' +
|
|
|
- '<br>Black Arrows: Vertex Normals after Geometry.mergeVertices';
|
|
|
-
|
|
|
- info.innerHTML = text;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function addStuff() {
|
|
|
-
|
|
|
- if ( window.group !== undefined ) {
|
|
|
-
|
|
|
- scene.remove( group );
|
|
|
+ scene.remove( mesh );
|
|
|
+ geometry.dispose();
|
|
|
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- var params = geometriesParams[ geometryIndex ];
|
|
|
-
|
|
|
- geometry = createSomething( THREE[ params.type ], params.args );
|
|
|
+ geometry = geometries[ options.Geometry ].geometry;
|
|
|
|
|
|
// scale geometry to a uniform size
|
|
|
+
|
|
|
geometry.computeBoundingSphere();
|
|
|
|
|
|
var scaleFactor = 160 / geometry.boundingSphere.radius;
|
|
|
geometry.scale( scaleFactor, scaleFactor, scaleFactor );
|
|
|
|
|
|
- var originalGeometry = geometry.clone();
|
|
|
- originalGeometry.computeFaceNormals();
|
|
|
- originalGeometry.computeVertexNormals( true );
|
|
|
-
|
|
|
- // in case of duplicated vertices
|
|
|
- geometry.mergeVertices();
|
|
|
- geometry.computeFaceNormals();
|
|
|
- geometry.computeVertexNormals( true );
|
|
|
-
|
|
|
- updateInfo();
|
|
|
-
|
|
|
- var faceABCD = "abcd";
|
|
|
- var color, f, p, n, vertexIndex;
|
|
|
-
|
|
|
- for ( i = 0; i < geometry.faces.length; i ++ ) {
|
|
|
-
|
|
|
- f = geometry.faces[ i ];
|
|
|
-
|
|
|
- n = ( f instanceof THREE.Face3 ) ? 3 : 4;
|
|
|
-
|
|
|
- for( var j = 0; j < n; j++ ) {
|
|
|
-
|
|
|
- vertexIndex = f[ faceABCD.charAt( j ) ];
|
|
|
-
|
|
|
- p = geometry.vertices[ vertexIndex ];
|
|
|
-
|
|
|
- color = new THREE.Color( 0xffffff );
|
|
|
- color.setHSL( ( p.y ) / 400 + 0.5, 1.0, 0.5 );
|
|
|
-
|
|
|
- f.vertexColors[ j ] = color;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- group = new THREE.Group();
|
|
|
- scene.add( group );
|
|
|
-
|
|
|
- var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } ) );
|
|
|
- group.add( mesh );
|
|
|
-
|
|
|
- var fvNames = [ 'a', 'b', 'c', 'd' ];
|
|
|
-
|
|
|
- var normalLength = 15;
|
|
|
-
|
|
|
- for( var f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
|
|
|
- var face = geometry.faces[ f ];
|
|
|
-
|
|
|
- var centroid = new THREE.Vector3()
|
|
|
- .add( geometry.vertices[ face.a ] )
|
|
|
- .add( geometry.vertices[ face.b ] )
|
|
|
- .add( geometry.vertices[ face.c ] )
|
|
|
- .divideScalar( 3 );
|
|
|
+ mesh = new THREE.Mesh( geometry, material );
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
- var arrow = new THREE.ArrowHelper(
|
|
|
- face.normal,
|
|
|
- centroid,
|
|
|
- normalLength,
|
|
|
- 0x3333FF );
|
|
|
- mesh.add( arrow );
|
|
|
- }
|
|
|
-
|
|
|
- for( var f = 0, fl = originalGeometry.faces.length; f < fl; f ++ ) {
|
|
|
- var face = originalGeometry.faces[ f ];
|
|
|
- if( face.vertexNormals === undefined ) {
|
|
|
- continue;
|
|
|
- }
|
|
|
- for( var v = 0, vl = face.vertexNormals.length; v < vl; v ++ ) {
|
|
|
- var arrow = new THREE.ArrowHelper(
|
|
|
- face.vertexNormals[ v ],
|
|
|
- originalGeometry.vertices[ face[ fvNames[ v ] ] ],
|
|
|
- normalLength,
|
|
|
- 0xFF3333 );
|
|
|
- mesh.add( arrow );
|
|
|
- }
|
|
|
- }
|
|
|
+ var faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
|
|
|
+ mesh.add( faceNormalsHelper );
|
|
|
|
|
|
- for( var f = 0, fl = mesh.geometry.faces.length; f < fl; f ++ ) {
|
|
|
- var face = mesh.geometry.faces[ f ];
|
|
|
- if( face.vertexNormals === undefined ) {
|
|
|
- continue;
|
|
|
- }
|
|
|
- for( var v = 0, vl = face.vertexNormals.length; v < vl; v ++ ) {
|
|
|
- var arrow = new THREE.ArrowHelper(
|
|
|
- face.vertexNormals[ v ],
|
|
|
- mesh.geometry.vertices[ face[ fvNames[ v ] ] ],
|
|
|
- normalLength,
|
|
|
- 0x000000 );
|
|
|
- mesh.add( arrow );
|
|
|
- }
|
|
|
- }
|
|
|
+ var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
|
|
|
+ mesh.add( vertexNormalsHelper );
|
|
|
|
|
|
}
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
-
|
|
|
- info = document.createElement( 'div' );
|
|
|
- info.style.position = 'absolute';
|
|
|
- info.style.top = '10px';
|
|
|
- info.style.width = '100%';
|
|
|
- info.style.textAlign = 'center';
|
|
|
- info.innerHTML = 'Drag to spin the geometry ';
|
|
|
- container.appendChild( info );
|
|
|
+ container = document.getElementById( 'container' );
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
camera.position.z = 500;
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
- var light = new THREE.PointLight( 0xffffff, 1.5 );
|
|
|
- light.position.set( 1000, 1000, 2000 );
|
|
|
- scene.add( light );
|
|
|
+ addMesh();
|
|
|
|
|
|
- addStuff();
|
|
|
+ //
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true } ); // WebGLRenderer CanvasRenderer
|
|
|
- renderer.setClearColor( 0xf0f0f0 );
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
+ //
|
|
|
+
|
|
|
stats = new Stats();
|
|
|
container.appendChild( stats.dom );
|
|
|
|
|
|
//
|
|
|
|
|
|
+ var geometries = {
|
|
|
+ BoxGeometry: 0,
|
|
|
+ CircleGeometry: 1,
|
|
|
+ CylinderGeometry: 2,
|
|
|
+ IcosahedronGeometry: 3,
|
|
|
+ OctahedronGeometry: 4,
|
|
|
+ PlaneGeometry: 5,
|
|
|
+ RingGeometry: 6,
|
|
|
+ SphereGeometry: 7,
|
|
|
+ TorusGeometry: 8,
|
|
|
+ TorusKnotGeometry: 9
|
|
|
+ };
|
|
|
+
|
|
|
+ gui = new dat.GUI( { width: 350 } );
|
|
|
+ gui.add( options, 'Geometry', geometries ).onChange( function( value ) {
|
|
|
+
|
|
|
+ addMesh();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
|
|
|
+ //
|
|
|
+
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
}
|
|
|
@@ -328,8 +173,6 @@
|
|
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
|
|
- controls.update();
|
|
|
-
|
|
|
render();
|
|
|
stats.update();
|
|
|
|
Mr.doob