Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 2e97f4f0 编写于 作者: M Mugen87
浏览文件
操作

Examples: Refactored webgl_geometry_normals.html

上级 f9edcec8
隐藏空白更改
内联 并排
Showing with 85 addition and 242 deletion
examples/webgl_geometry_normals.html
浏览文件 @ 2e97f4f0
<!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();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或