javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - exporter - gltf</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - gltf<br/><br/>
			<button id="export_scene">Export Scene1</button>
			<button id="export_scenes">Export Scene1 and THREE.Scene 2</button>
			<button id="export_object">Export Sphere</button><br/>
			<button id="export_obj">Export WaltHead</button>
			<button id="export_objects">Export Sphere and Grid</button>
			<button id="export_scene_object">Export Scene1 and Sphere</button>
			<br/><br/>
			<label><input id="option_trs" name="trs" type="checkbox"/>TRS</label>
			<label><input id="option_visible" name="visible" type="checkbox" checked="checked"/>Only Visible</label>
			<label><input id="option_drawrange" name="visible" type="checkbox" checked="checked"/>Truncate drawRange</label><br/>
			<label><input id="option_binary" name="visible" type="checkbox">Binary (<code>.glb</code>)</label>
			<label><input id="option_maxsize" name="maxSize" type="number" value="4096" min="2" max="8192" step="1"> Max texture size</label>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
			import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';

			function exportGLTF( input ) {

				const gltfExporter = new GLTFExporter();

				const options = {
					trs: document.getElementById( 'option_trs' ).checked,
					onlyVisible: document.getElementById( 'option_visible' ).checked,
					truncateDrawRange: document.getElementById( 'option_drawrange' ).checked,
					binary: document.getElementById( 'option_binary' ).checked,
					maxTextureSize: Number( document.getElementById( 'option_maxsize' ).value ) || Infinity // To prevent NaN value
				};
				gltfExporter.parse( input, function ( result ) {

					if ( result instanceof ArrayBuffer ) {

						saveArrayBuffer( result, 'scene.glb' );

					} else {

						const output = JSON.stringify( result, null, 2 );
						console.log( output );
						saveString( output, 'scene.gltf' );

					}

				}, options );

			}

			document.getElementById( 'export_scene' ).addEventListener( 'click', function () {

				exportGLTF( scene1 );

			} );

			document.getElementById( 'export_scenes' ).addEventListener( 'click', function () {

				exportGLTF( [ scene1, scene2 ] );

			} );

			document.getElementById( 'export_object' ).addEventListener( 'click', function () {

				exportGLTF( sphere );

			} );

			document.getElementById( 'export_obj' ).addEventListener( 'click', function () {

				exportGLTF( waltHead );

			} );

			document.getElementById( 'export_objects' ).addEventListener( 'click', function () {

				exportGLTF( [ sphere, gridHelper ] );

			} );

			document.getElementById( 'export_scene_object' ).addEventListener( 'click', function () {

				exportGLTF( [ scene1, gridHelper ] );

			} );


			const link = document.createElement( 'a' );
			link.style.display = 'none';
			document.body.appendChild( link ); // Firefox workaround, see #6594

			function save( blob, filename ) {

				link.href = URL.createObjectURL( blob );
				link.download = filename;
				link.click();

				// URL.revokeObjectURL( url ); breaks Firefox...

			}

			function saveString( text, filename ) {

				save( new Blob( [ text ], { type: 'text/plain' } ), filename );

			}


			function saveArrayBuffer( buffer, filename ) {

				save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );

			}

			let container;

			let camera, object, object2, material, geometry, scene1, scene2, renderer;
			let gridHelper, sphere, waltHead;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// Make linear gradient texture
				const data = new Uint8ClampedArray( 100 * 100 * 3 );
				for ( let y = 0; y < 100; y ++ ) {

					for ( let x = 0; x < 100; x ++ ) {

						data[ 3 * ( 100 * y + x ) ] = Math.round( 255 * y / 99 );
						data[ 3 * ( 100 * y + x ) + 1 ] = Math.round( 255 - 255 * y / 99 );

					}

				}

				const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBFormat );
				gradientTexture.minFilter = THREE.LinearFilter;
				gradientTexture.magFilter = THREE.LinearFilter;

				scene1 = new THREE.Scene();
				scene1.name = 'Scene1';

				// ---------------------------------------------------------------------
				// Perspective Camera
				// ---------------------------------------------------------------------
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 600, 400, 0 );

				camera.name = "PerspectiveCamera";
				scene1.add( camera );

				// ---------------------------------------------------------------------
				// Ambient light
				// ---------------------------------------------------------------------
				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
				ambientLight.name = 'AmbientLight';
				scene1.add( ambientLight );

				// ---------------------------------------------------------------------
				// DirectLight
				// ---------------------------------------------------------------------
				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
				dirLight.target.position.set( 0, 0, - 1 );
				dirLight.add( dirLight.target );
				dirLight.lookAt( - 1, - 1, 0 );
				dirLight.name = 'DirectionalLight';
				scene1.add( dirLight );

				// ---------------------------------------------------------------------
				// Grid
				// ---------------------------------------------------------------------
				gridHelper = new THREE.GridHelper( 2000, 20, 0x888888, 0x444444 );
				gridHelper.position.y = - 50;
				gridHelper.name = "Grid";
				scene1.add( gridHelper );

				// ---------------------------------------------------------------------
				// Axes
				// ---------------------------------------------------------------------
				const axes = new THREE.AxesHelper( 500 );
				axes.name = "AxesHelper";
				scene1.add( axes );

				// ---------------------------------------------------------------------
				// Simple geometry with basic material
				// ---------------------------------------------------------------------
				// Icosahedron
				const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
				material = new THREE.MeshBasicMaterial( {
					color: 0xffffff,
					map: mapGrid
				} );

				object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 0 ), material );
				object.position.set( - 200, 0, 200 );
				object.name = 'Icosahedron';
				scene1.add( object );

				// Octahedron
				material = new THREE.MeshBasicMaterial( {
					color: 0x0000ff,
					wireframe: true
				} );
				object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 1 ), material );
				object.position.set( 0, 0, 200 );
				object.name = 'Octahedron';
				scene1.add( object );

				// Tetrahedron
				material = new THREE.MeshBasicMaterial( {
					color: 0xff0000,
					transparent: true,
					opacity: 0.5
				} );

				object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
				object.position.set( 200, 0, 200 );
				object.name = 'Tetrahedron';
				scene1.add( object );

				// ---------------------------------------------------------------------
				// Buffered geometry primitives
				// ---------------------------------------------------------------------
				// Sphere
				material = new THREE.MeshStandardMaterial( {
					color: 0xffff00,
					metalness: 0.5,
					roughness: 1.0,
					flatShading: true
				} );
				material.map = gradientTexture;
				sphere = new THREE.Mesh( new THREE.SphereGeometry( 70, 10, 10 ), material );
				sphere.position.set( 0, 0, 0 );
				sphere.name = "Sphere";
				scene1.add( sphere );

				// Cylinder
				material = new THREE.MeshStandardMaterial( {
					color: 0xff00ff,
					flatShading: true
				} );
				object = new THREE.Mesh( new THREE.CylinderGeometry( 10, 80, 100 ), material );
				object.position.set( 200, 0, 0 );
				object.name = "Cylinder";
				scene1.add( object );

				// TorusKnot
				material = new THREE.MeshStandardMaterial( {
					color: 0xff0000,
					roughness: 1
				} );
				object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 15, 40, 10 ), material );
				object.position.set( - 200, 0, 0 );
				object.name = "Cylinder";
				scene1.add( object );


				// ---------------------------------------------------------------------
				// Hierarchy
				// ---------------------------------------------------------------------
				const mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
				material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );

				object = new THREE.Mesh( new THREE.BoxGeometry( 40, 100, 100 ), material );
				object.position.set( - 200, 0, 400 );
				object.name = "Cube";
				scene1.add( object );

				object2 = new THREE.Mesh( new THREE.BoxGeometry( 40, 40, 40, 2, 2, 2 ), material );
				object2.position.set( 0, 0, 50 );
				object2.rotation.set( 0, 45, 0 );
				object2.name = "SubCube";
				object.add( object2 );


				// ---------------------------------------------------------------------
				// Groups
				// ---------------------------------------------------------------------
				const group1 = new THREE.Group();
				group1.name = "Group";
				scene1.add( group1 );

				const group2 = new THREE.Group();
				group2.name = "subGroup";
				group2.position.set( 0, 50, 0 );
				group1.add( group2 );

				object2 = new THREE.Mesh( new THREE.BoxGeometry( 30, 30, 30 ), material );
				object2.name = "Cube in group";
				object2.position.set( 0, 0, 400 );
				group2.add( object2 );

				// ---------------------------------------------------------------------
				// THREE.Line Strip
				// ---------------------------------------------------------------------
				geometry = new THREE.BufferGeometry();
				let numPoints = 100;
				let positions = new Float32Array( numPoints * 3 );

				for ( let i = 0; i < numPoints; i ++ ) {

					positions[ i * 3 ] = i;
					positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20;
					positions[ i * 3 + 2 ] = 0;

				}

				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
				object.position.set( - 50, 0, - 200 );
				scene1.add( object );

				// ---------------------------------------------------------------------
				// THREE.Line Loop
				// ---------------------------------------------------------------------
				geometry = new THREE.BufferGeometry();
				numPoints = 5;
				const radius = 70;
				positions = new Float32Array( numPoints * 3 );

				for ( let i = 0; i < numPoints; i ++ ) {

					const s = i * Math.PI * 2 / numPoints;
					positions[ i * 3 ] = radius * Math.sin( s );
					positions[ i * 3 + 1 ] = radius * Math.cos( s );
					positions[ i * 3 + 2 ] = 0;

				}

				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
				object.position.set( 0, 0, - 200 );

				scene1.add( object );

				// ---------------------------------------------------------------------
				// Buffer geometry truncated (DrawRange)
				// ---------------------------------------------------------------------
				geometry = new THREE.BufferGeometry();
				const numElements = 6;
				const outOfRange = 3;

				positions = new Float32Array( ( numElements + outOfRange ) * 3 );
				const colors = new Float32Array( ( numElements + outOfRange ) * 3 );

				positions.set( [
					0, 0, 0,
					0, 80, 0,
					80, 0, 0,
					80, 0, 0,
					0, 80, 0,
					80, 80, 0
				] );

				colors.set( [
					1, 0, 0,
					1, 0, 0,
					1, 1, 0,
					1, 1, 0,
					0, 0, 1,
					0, 0, 1,
				] );

				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
				geometry.setDrawRange( 0, numElements );

				object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: true } ) );
				object.name = 'Custom buffered truncated';
				object.position.set( 140, - 40, - 200 );

				scene1.add( object );

				// ---------------------------------------------------------------------
				// THREE.Points
				// ---------------------------------------------------------------------
				numPoints = 100;
				const pointsArray = new Float32Array( numPoints * 3 );
				for ( let i = 0; i < numPoints; i ++ ) {

					pointsArray[ 3 * i ] = - 50 + Math.random() * 100;
					pointsArray[ 3 * i + 1 ] = Math.random() * 100;
					pointsArray[ 3 * i + 2 ] = - 50 + Math.random() * 100;

				}

				const pointsGeo = new THREE.BufferGeometry();
				pointsGeo.setAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );

				const pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
				const pointCloud = new THREE.Points( pointsGeo, pointsMaterial );
				pointCloud.name = "Points";
				pointCloud.position.set( - 200, 0, - 200 );
				scene1.add( pointCloud );

				// ---------------------------------------------------------------------
				// Ortho camera
				// ---------------------------------------------------------------------
				const cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
				scene1.add( cameraOrtho );
				cameraOrtho.name = 'OrthographicCamera';

				material = new THREE.MeshLambertMaterial( {
					color: 0xffff00,
					side: THREE.DoubleSide
				} );

				object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
				object.position.set( 200, 0, - 400 );
				scene1.add( object );

				object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
				object.position.set( 0, 0, - 400 );
				scene1.add( object );

				object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
				object.position.set( - 200, 0, - 400 );
				scene1.add( object );

				//
				const points = [];

				for ( let i = 0; i < 50; i ++ ) {

					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );

				}

				object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
				object.position.set( 200, 0, 400 );
				scene1.add( object );

				// ---------------------------------------------------------------------
				// Big red box hidden just for testing `onlyVisible` option
				// ---------------------------------------------------------------------
				material = new THREE.MeshBasicMaterial( {
					color: 0xff0000
				} );
				object = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
				object.position.set( 0, 0, 0 );
				object.name = "CubeHidden";
				object.visible = false;
				scene1.add( object );

				// ---------------------------------------------------------------------
				//
				//
				const loader = new OBJLoader();
				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {

					waltHead = obj;
					waltHead.scale.multiplyScalar( 1.5 );
					waltHead.position.set( 400, 0, 0 );
					scene1.add( waltHead );

				} );


				// ---------------------------------------------------------------------
				// 2nd THREE.Scene
				// ---------------------------------------------------------------------
				scene2 = new THREE.Scene();
				object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
				object.position.set( 0, 0, 0 );
				object.name = "Cube2ndScene";
				scene2.name = 'Scene2';
				scene2.add( object );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				const timer = Date.now() * 0.0001;

				camera.position.x = Math.cos( timer ) * 800;
				camera.position.z = Math.sin( timer ) * 800;

				camera.lookAt( scene1.position );
				renderer.render( scene1, camera );

			}

		</script>

	</body>
</html>