Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 5d8f56c8 编写于 作者: R Ricardo Cabello
浏览文件
操作

Merge pull request #6653 from callumprentice/dev 

Simplify example as per suggestions from @westlangley and @mrdoob
上级 bef4df4c cf1efbd8
隐藏空白更改
内联 并排
Showing with 252 addition and 1 deletion
examples/index.html
浏览文件 @ 5d8f56c8
......@@ -359,7 +359,7 @@
"webgl_buffergeometry",
"webgl_buffergeometry_custom_attributes_particles",
"webgl_buffergeometry_drawcalls",
"webgl_buffergeometry_from_geometry",
"webgl_buffergeometry_constructed_from_geometry",
"webgl_buffergeometry_instancing",
"webgl_buffergeometry_instancing_dynamic",
"webgl_buffergeometry_instancing_billboards",
......
examples/webgl_buffergeometry_from_geometry.html → examples/webgl_buffergeometry_constructed_from_geometry.html
浏览文件 @ 5d8f56c8
<!DOCTYPE html>
<html>
<head>
<title>three.js - Geometry to BufferGeometry Example</title>
<title>three.js - BufferGeometry constructed from Geometry Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="initial-scale=1.0, maximum-scale=1.0" name="viewport">
<meta name="Generator" content="https://callum.com">
......@@ -29,14 +29,11 @@
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/libs/stats.min.js"></script>
<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
<script type="text/javascript" src="js/libs/dat.gui.min.js"></script>
</head>
<body onload="app()">
<div id="title"></div>
<script>
var camera, scene, renderer, controls, stats, gui;
var bufferMesh = 0;
var parameters = 0;
var camera, scene, renderer, controls, stats;
function app() {
......@@ -89,375 +86,60 @@
window.addEventListener( 'resize', onWindowResize, false );
createGui( 'Cylinder' );
createScene();
}
function createGeometry() {
if ( parameters.geomType === 'Cylinder' ) {
return new THREE.CylinderGeometry(
parameters.radius, parameters.radius, parameters.maxHeight, parameters.numSides, 1, !parameters.endCaps );
} else
if ( parameters.geomType === 'Cone' ) {
return new THREE.CylinderGeometry(
parameters.radius1, parameters.radius2, parameters.maxHeight, parameters.numSides, 1, !parameters.endCaps );
} else
if ( parameters.geomType === 'Sphere' ) {
return new THREE.SphereGeometry(
parameters.radius, parameters.segments, parameters.segments );
} else
if ( parameters.geomType === 'Tetrahedron' ) {
return new THREE.TetrahedronGeometry(
parameters.radius );
} else
if ( parameters.geomType === 'Heart' ) {
var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
var x = 0,
y = 0;
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 );
var extrudeSettings = {
amount: 8,
bevelEnabled: true,
bevelSegments: 1,
steps: 2,
bevelSize: 1,
bevelThickness: 1
};
var geom = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
geom.applyMatrix( new THREE.Matrix4().makeRotationX( -THREE.Math.degToRad( 90 ) ) );
geom.applyMatrix( new THREE.Matrix4().makeScale( 0.1, 0.1, 0.1 ) );
geom.applyMatrix( new THREE.Matrix4().makeScale( parameters.radius, parameters.radius, parameters.radius ) );
return geom;
} else
if ( parameters.geomType === 'Torus' ) {
return new THREE.TorusGeometry(
parameters.radius1, parameters.radius2, parameters.segments, parameters.segments );
} else
if ( parameters.geomType === 'Torus Knot' ) {
return new THREE.TorusKnotGeometry(
parameters.radius1, parameters.radius2, parameters.segments, parameters.segments );
}
}
function createGui( geom_type ) {
if ( gui && gui.domElement ) {
document.body.removeChild( gui.domElement )
}
gui = new dat.GUI( {
autoPlace: false
} );
gui.domElement.style.position = 'absolute';
gui.domElement.style.top = '24px';
gui.domElement.style.right = '0';
document.body.appendChild( gui.domElement );
parameters = {
density: 50,
radius1: 10,
radius2: 5,
radius: 8,
numSides: 16,
maxHeight: 40,
endCaps: true,
segments: 16,
randomHeights: true
var heart_shape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
var x = 0,
y = 0;
heart_shape.moveTo( x + 25, y + 25 );
heart_shape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
heart_shape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
heart_shape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
heart_shape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
heart_shape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
heart_shape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
var extrudeSettings = {
amount: 16,
bevelEnabled: true,
bevelSegments: 1,
steps: 2,
bevelSize: 1,
bevelThickness: 1
};
var object_list = [ 'Cylinder', 'Cone', 'Sphere', 'Tetrahedron', 'Heart', 'Torus', 'Torus Knot' ];
if ( geom_type === 'Cylinder' ) {
parameters.geomType = geom_type;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'numSides', 3, 64 ).step( 1 ).name( "Cylinder sides" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'maxHeight', 1, 80 ).name( "Max height" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'endCaps', true ).name( "End caps" ).onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'randomHeights', true ).name( "Random heights" ).onChange( function ( value ) {
createScene();
} );
} else
if ( geom_type === 'Cone' ) {
parameters.geomType = geom_type;
parameters.radius1 = 0;
parameters.radius2 = 9;
parameters.endCaps = false;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius1', 0, 20 ).name( "Top radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius2', 0, 20 ).name( "Bottom radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'numSides', 3, 64 ).step( 1 ).name( "Cone sides" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'maxHeight', 1, 80 ).name( "Max height" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'endCaps', true ).name( "End caps" ).onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'randomHeights', true ).name( "Random heights" ).onChange( function ( value ) {
createScene();
} );
} else
if ( geom_type === 'Sphere' ) {
parameters.geomType = geom_type;
parameters.density = 30;
parameters.radius = 12;
parameters.maxHeight = 50.0;
parameters.segments = 16;
parameters.randomHeights = false;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'segments', 0, 20 ).step( 1 ).name( "Segments" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
createScene();
} );
} else
if ( geom_type === 'Tetrahedron' ) {
parameters.geomType = geom_type;
parameters.density = 46;
parameters.radius = 15;
parameters.maxHeight = 50.0;
parameters.randomHeights = true;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
createScene();
} );
} else
if ( geom_type === 'Heart' ) {
parameters.geomType = geom_type;
parameters.density = 20;
parameters.radius = 3.5;
parameters.maxHeight = 50.0;
parameters.randomHeights = false;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen( ).onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
} else
if ( geom_type === 'Torus' || geom_type === 'Torus Knot' ) {
parameters.geomType = geom_type;
parameters.density = 24;
parameters.radius1 = 16;
parameters.radius2 = 2;
parameters.maxHeight = 50.0;
parameters.segments = 32;
parameters.randomHeights = false;
gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
createGui( value );
createScene();
} );
gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius1', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'radius2', 0, 20 ).name( "Tube" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'segments', 0, 64 ).step( 1 ).name( "Segments" ).listen().onFinishChange( function ( value ) {
createScene();
} );
gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
createScene();
} );
}
var geom = new THREE.ExtrudeGeometry( heart_shape, extrudeSettings );
geom.applyMatrix( new THREE.Matrix4().makeRotationX( -THREE.Math.degToRad( 90 ) ) );
geom.applyMatrix( new THREE.Matrix4().makeScale( 0.1, 0.1, 0.1 ) );
geom.applyMatrix( new THREE.Matrix4().makeScale( 4, 4, 4 ) );
return geom;
}
function createScene() {
if ( bufferMesh ) {
scene.remove( bufferMesh );
}
var buffer_geometry = new THREE.BufferGeometry();
var radius = 100.0;
var positions = 0;
var normals = 0;
var colors = 0;
var shape_density = 14;
for ( var num_lat = 0; num_lat < parameters.density / 2; ++ num_lat ) {
for ( var num_lat = 0; num_lat < shape_density / 2; ++ num_lat ) {
var lat_lhs = ( num_lat + 0 ) * 180 / ( parameters.density / 2 );
var lat_rhs = ( num_lat + 1 ) * 180 / ( parameters.density / 2 );
var lat_lhs = ( num_lat + 0 ) * 180 / ( shape_density / 2 );
var lat_rhs = ( num_lat + 1 ) * 180 / ( shape_density / 2 );
var lat = ( lat_lhs + lat_rhs ) / 2.0;
for ( var num_lng = 0; num_lng < parameters.density; ++ num_lng ) {
for ( var num_lng = 0; num_lng < shape_density; ++ num_lng ) {
var lng_lhs = ( num_lng + 0 ) * 360 / parameters.density;
var lng_rhs = ( num_lng + 1 ) * 360 / parameters.density;
var lng_lhs = ( num_lng + 0 ) * 360 / shape_density;
var lng_rhs = ( num_lng + 1 ) * 360 / shape_density;
var lng = ( lng_lhs + lng_rhs ) / 2.0;
var height = parameters.maxHeight;
if ( parameters.randomHeights ) {
height = Math.random() * ( parameters.maxHeight - 5.0 ) + 5;
}
var height = 30.0;
var phi = lat * Math.PI / 180.0;
var theta = lng * Math.PI / 180.0;
......@@ -477,9 +159,9 @@
if ( positions === 0 ) {
var num_stacks = parameters.density * parameters.density / 2;
var num_stacks = shape_density * shape_density / 2;
var str = 'Geometry to BufferGeometry Example - ' + parseInt( num_stacks * geometry.faces.length, 10 ) + ' triangles (<a target="_blank" href="http://callum.com">author</a>)';
var str = 'BufferGeometry constructed from Geometry Example - ' + parseInt( num_stacks * geometry.faces.length, 10 ) + ' triangles (<a target="_blank" href="http://callum.com">author</a>)';
document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
positions = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
......@@ -490,7 +172,7 @@
geometry.faces.forEach( function ( face, index ) {
var cur_element = ( ( num_lng + num_lat * parameters.density ) * geometry.faces.length + index );
var cur_element = ( ( num_lng + num_lat * shape_density ) * geometry.faces.length + index );
positions[ cur_element * 9 + 0 ] = geometry.vertices[ face.a ].x;
positions[ cur_element * 9 + 1 ] = geometry.vertices[ face.a ].y;
......@@ -543,8 +225,8 @@
shading: THREE.SmoothShading
} );
bufferMesh = new THREE.Mesh( buffer_geometry, buffer_material );
scene.add( bufferMesh );
var buffer_mesh = new THREE.Mesh( buffer_geometry, buffer_material );
scene.add( buffer_mesh );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或