|
|
@@ -1,569 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <title>three.js - Geometry to BufferGeometry 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">
|
|
|
- <style>
|
|
|
- body {
|
|
|
- background-color: #000;
|
|
|
- font-family: Monospace;
|
|
|
- margin: 0;
|
|
|
- color: #000;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- #title {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
- padding: 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 1.1em;
|
|
|
- background-color: rgba(64,96,64,0.7);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- #title a {color:#ff0;}
|
|
|
- </style>
|
|
|
- <script type="text/javascript" src="../build/three.min.js"></script>
|
|
|
- <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;
|
|
|
-
|
|
|
- function app() {
|
|
|
-
|
|
|
- if ( ! Detector.webgl ) {
|
|
|
-
|
|
|
- Detector.addGetWebGLMessage();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- renderer = new THREE.WebGLRenderer( {
|
|
|
- antialias: true
|
|
|
- } );
|
|
|
- renderer.setClearColor( 0x000000, 0.0 );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
|
|
|
- camera.position.z = 480.0;
|
|
|
-
|
|
|
- scene.add( new THREE.AmbientLight( 0x444444 ) );
|
|
|
-
|
|
|
- var light1 = new THREE.DirectionalLight( 0x999999, 0.1 );
|
|
|
- light1.position.set( 1, 1, 1 );
|
|
|
- scene.add( light1 );
|
|
|
-
|
|
|
- var light2 = new THREE.DirectionalLight( 0x999999, 1.5 );
|
|
|
- light2.position.set( 0, -1, 0 );
|
|
|
- scene.add( light2 );
|
|
|
-
|
|
|
- controls = new THREE.TrackballControls( camera, renderer.domElement );
|
|
|
- controls.minDistance = 100.0;
|
|
|
- controls.maxDistance = 800.0;
|
|
|
- controls.dynamicDampingFactor = 0.1;
|
|
|
-
|
|
|
- stats = new Stats();
|
|
|
- stats.domElement.style.position = 'absolute';
|
|
|
- stats.domElement.style.top = '24px';
|
|
|
- document.body.appendChild( stats.domElement );
|
|
|
-
|
|
|
- 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 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();
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- 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;
|
|
|
-
|
|
|
- for ( var num_lat = 0; num_lat < parameters.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 = ( lat_lhs + lat_rhs ) / 2.0;
|
|
|
-
|
|
|
- for ( var num_lng = 0; num_lng < parameters.density; ++ num_lng ) {
|
|
|
-
|
|
|
- var lng_lhs = ( num_lng + 0 ) * 360 / parameters.density;
|
|
|
- var lng_rhs = ( num_lng + 1 ) * 360 / parameters.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 phi = lat * Math.PI / 180.0;
|
|
|
- var theta = lng * Math.PI / 180.0;
|
|
|
- var x = radius * Math.sin( phi ) * Math.cos( theta );
|
|
|
- var y = radius * Math.cos( phi );
|
|
|
- var z = radius * Math.sin( phi ) * Math.sin( theta );
|
|
|
-
|
|
|
- var geometry = createGeometry();
|
|
|
-
|
|
|
- geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, height / 2, 0 ) );
|
|
|
- geometry.applyMatrix( new THREE.Matrix4().makeRotationX( -THREE.Math.degToRad( 90 ) ) );
|
|
|
- geometry.applyMatrix( new THREE.Matrix4().lookAt( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( x, y, z ), new THREE.Vector3( 0, 1, 0 ) ) );
|
|
|
- geometry.applyMatrix( new THREE.Matrix4().makeTranslation( x, y, z ) );
|
|
|
-
|
|
|
- var color = new THREE.Color( 0xffffff );
|
|
|
- color.setHSL( lat / 180.0, 1.0, 0.7 );
|
|
|
-
|
|
|
- if ( positions === 0 ) {
|
|
|
-
|
|
|
- var num_stacks = parameters.density * parameters.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>)';
|
|
|
- document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
|
|
|
-
|
|
|
- positions = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
|
|
|
- normals = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
|
|
|
- colors = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- geometry.faces.forEach( function ( face, index ) {
|
|
|
-
|
|
|
- var cur_element = ( ( num_lng + num_lat * parameters.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;
|
|
|
- positions[ cur_element * 9 + 2 ] = geometry.vertices[ face.a ].z;
|
|
|
- positions[ cur_element * 9 + 3 ] = geometry.vertices[ face.b ].x;
|
|
|
- positions[ cur_element * 9 + 4 ] = geometry.vertices[ face.b ].y;
|
|
|
- positions[ cur_element * 9 + 5 ] = geometry.vertices[ face.b ].z;
|
|
|
- positions[ cur_element * 9 + 6 ] = geometry.vertices[ face.c ].x;
|
|
|
- positions[ cur_element * 9 + 7 ] = geometry.vertices[ face.c ].y;
|
|
|
- positions[ cur_element * 9 + 8 ] = geometry.vertices[ face.c ].z;
|
|
|
-
|
|
|
- normals[ cur_element * 9 + 0 ] = face.normal.x;
|
|
|
- normals[ cur_element * 9 + 1 ] = face.normal.y;
|
|
|
- normals[ cur_element * 9 + 2 ] = face.normal.z;
|
|
|
- normals[ cur_element * 9 + 3 ] = face.normal.x;
|
|
|
- normals[ cur_element * 9 + 4 ] = face.normal.y;
|
|
|
- normals[ cur_element * 9 + 5 ] = face.normal.z;
|
|
|
- normals[ cur_element * 9 + 6 ] = face.normal.x;
|
|
|
- normals[ cur_element * 9 + 7 ] = face.normal.y;
|
|
|
- normals[ cur_element * 9 + 8 ] = face.normal.z;
|
|
|
-
|
|
|
- colors[ cur_element * 9 + 0 ] = color.r;
|
|
|
- colors[ cur_element * 9 + 1 ] = color.g;
|
|
|
- colors[ cur_element * 9 + 2 ] = color.b;
|
|
|
- colors[ cur_element * 9 + 3 ] = color.r;
|
|
|
- colors[ cur_element * 9 + 4 ] = color.g;
|
|
|
- colors[ cur_element * 9 + 5 ] = color.b;
|
|
|
- colors[ cur_element * 9 + 6 ] = color.r;
|
|
|
- colors[ cur_element * 9 + 7 ] = color.g;
|
|
|
- colors[ cur_element * 9 + 8 ] = color.b;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- buffer_geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
|
|
|
- buffer_geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
|
|
|
- buffer_geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
|
|
|
-
|
|
|
- buffer_geometry.computeBoundingSphere();
|
|
|
-
|
|
|
- var buffer_material = new THREE.MeshPhongMaterial( {
|
|
|
- color: 0x999999,
|
|
|
- specular: 0x333333,
|
|
|
- shininess: 50,
|
|
|
- side: THREE.DoubleSide,
|
|
|
- vertexColors: THREE.VertexColors,
|
|
|
- shading: THREE.SmoothShading
|
|
|
- } );
|
|
|
-
|
|
|
- bufferMesh = new THREE.Mesh( buffer_geometry, buffer_material );
|
|
|
- scene.add( bufferMesh );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
-
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate( time ) {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
- controls.update();
|
|
|
- stats.update();
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
Callum Prentice