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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - exporter - collada</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 - collada
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { ColladaExporter } from 'three/addons/exporters/ColladaExporter.js';
			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

			////////////////////////////////////////////////////////////////////////////////
			// Utah/Newell Teapot demo
			////////////////////////////////////////////////////////////////////////////////
			/*global window */

			let camera, scene, renderer;
			let cameraControls;
			let effectController;
			const teapotSize = 100; // vertical height of the teapot is about 2x this, we scale it to millimeters.
			let ambientLight, light;

			let tess = - 1;	// force initialization
			let bBottom;
			let bLid;
			let bBody;
			let bFitLid;
			let bNonBlinn;
			let shading;
			let vertexColors;
			let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, normalMaterial, reflectiveMaterial;

			let teapot, textureCube;

			// allocate these just once
			const diffuseColor = new THREE.Color();
			const specularColor = new THREE.Color();

			init();
			render();

			function init() {

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

				const canvasWidth = window.innerWidth;
				const canvasHeight = window.innerHeight;

				// CAMERA
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
				camera.position.set( - 150, 137.5, 325 );

				// LIGHTS
				ambientLight = new THREE.AmbientLight( 0x333333 );	// 0.2

				light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
				// direction is set in GUI

				// RENDERER
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( canvasWidth, canvasHeight );
				renderer.outputEncoding = THREE.sRGBEncoding;
				container.appendChild( renderer.domElement );

				// EVENTS
				window.addEventListener( 'resize', onWindowResize );

				// CONTROLS
				cameraControls = new OrbitControls( camera, renderer.domElement );
				cameraControls.addEventListener( 'change', render );

				// TEXTURE MAP
				const loader = new THREE.TextureLoader();

				const textureMap = loader.load( 'textures/uv_grid_opengl.jpg' );
				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
				textureMap.anisotropy = 16;
				textureMap.encoding = THREE.sRGBEncoding;

				// NORMAL MAP

				const diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
				const normalMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );

				// REFLECTION MAP
				const path = 'textures/cube/pisa/';
				const urls = [
					path + 'px.png', path + 'nx.png',
					path + 'py.png', path + 'ny.png',
					path + 'pz.png', path + 'nz.png'
				];

				textureCube = new THREE.CubeTextureLoader().load( urls );
				textureCube.encoding = THREE.sRGBEncoding;

				// MATERIALS
				const materialColor = new THREE.Color();
				materialColor.setRGB( 1.0, 1.0, 1.0 );

				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );

				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );

				gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );

				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );

				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );

				normalMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: diffuseMap, normalMap: normalMap, side: THREE.DoubleSide } );

				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );

				// scene itself
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xAAAAAA );

				scene.add( ambientLight );
				scene.add( light );

				// GUI
				setupGui();

			}

			// EVENT HANDLERS

			function onWindowResize() {

				const canvasWidth = window.innerWidth;
				const canvasHeight = window.innerHeight;

				renderer.setSize( canvasWidth, canvasHeight );

				camera.aspect = canvasWidth / canvasHeight;
				camera.updateProjectionMatrix();

				render();

			}

			function setupGui() {

				effectController = {

					shininess: 40.0,
					ka: 0.17,
					kd: 0.51,
					ks: 0.2,
					metallic: true,

					hue:	0.121,
					saturation: 0.73,
					lightness: 0.66,

					lhue:	0.04,
					lsaturation: 0.01,	// non-zero so that fractions will be shown
					llightness: 1.0,
					vertexColors: false,

					// bizarrely, if you initialize these with negative numbers, the sliders
					// will not show any decimal places.
					lx: 0.32,
					ly: 0.39,
					lz: 0.7,
					newTess: 15,
					bottom: true,
					lid: true,
					body: true,
					fitLid: false,
					nonblinn: false,
					newShading: 'glossy',

					export: exportCollada
				};

				let h;

				const gui = new GUI();

				// material (attributes)

				h = gui.addFolder( 'Material control' );

				h.add( effectController, 'shininess', 1.0, 400.0, 1.0 ).name( 'shininess' ).onChange( render );
				h.add( effectController, 'kd', 0.0, 1.0, 0.025 ).name( 'diffuse strength' ).onChange( render );
				h.add( effectController, 'ks', 0.0, 1.0, 0.025 ).name( 'specular strength' ).onChange( render );
				h.add( effectController, 'metallic' ).onChange( render );

				// material (color)

				h = gui.addFolder( 'Material color' );

				h.add( effectController, 'hue', 0.0, 1.0, 0.025 ).name( 'hue' ).onChange( render );
				h.add( effectController, 'saturation', 0.0, 1.0, 0.025 ).name( 'saturation' ).onChange( render );
				h.add( effectController, 'lightness', 0.0, 1.0, 0.025 ).name( 'lightness' ).onChange( render );
				h.add( effectController, 'vertexColors' ).onChange( render );

				// light (point)

				h = gui.addFolder( 'Lighting' );

				h.add( effectController, 'lhue', 0.0, 1.0, 0.025 ).name( 'hue' ).onChange( render );
				h.add( effectController, 'lsaturation', 0.0, 1.0, 0.025 ).name( 'saturation' ).onChange( render );
				h.add( effectController, 'llightness', 0.0, 1.0, 0.025 ).name( 'lightness' ).onChange( render );
				h.add( effectController, 'ka', 0.0, 1.0, 0.025 ).name( 'ambient' ).onChange( render );

				// light (directional)

				h = gui.addFolder( 'Light direction' );

				h.add( effectController, 'lx', - 1.0, 1.0, 0.025 ).name( 'x' ).onChange( render );
				h.add( effectController, 'ly', - 1.0, 1.0, 0.025 ).name( 'y' ).onChange( render );
				h.add( effectController, 'lz', - 1.0, 1.0, 0.025 ).name( 'z' ).onChange( render );

				h = gui.addFolder( 'Tessellation control' );
				h.add( effectController, 'newTess', [ 2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50 ] ).name( 'Tessellation Level' ).onChange( render );
				h.add( effectController, 'lid' ).name( 'display lid' ).onChange( render );
				h.add( effectController, 'body' ).name( 'display body' ).onChange( render );
				h.add( effectController, 'bottom' ).name( 'display bottom' ).onChange( render );
				h.add( effectController, 'fitLid' ).name( 'snug lid' ).onChange( render );
				h.add( effectController, 'nonblinn' ).name( 'original scale' ).onChange( render );

				// shading

				gui.add( effectController, 'newShading', [ 'wireframe', 'flat', 'smooth', 'glossy', 'textured', 'normal', 'reflective' ] ).name( 'Shading' ).onChange( render );

				h = gui.addFolder( 'Export' );
				h.add( effectController, 'export' ).name( 'Export Collada' );

			}


			//

			function render() {

				if ( effectController.newTess !== tess ||
					effectController.bottom !== bBottom ||
					effectController.lid !== bLid ||
					effectController.body !== bBody ||
					effectController.fitLid !== bFitLid ||
					effectController.nonblinn !== bNonBlinn ||
					effectController.newShading !== shading ||
					effectController.vertexColors !== vertexColors ) {

					tess = effectController.newTess;
					bBottom = effectController.bottom;
					bLid = effectController.lid;
					bBody = effectController.body;
					bFitLid = effectController.fitLid;
					bNonBlinn = effectController.nonblinn;
					shading = effectController.newShading;
					vertexColors = effectController.vertexColors;

					createNewTeapot();

				}

				// We're a bit lazy here. We could check to see if any material attributes changed and update
				// only if they have. But, these calls are cheap enough and this is just a demo.
				phongMaterial.shininess = effectController.shininess;
				texturedMaterial.shininess = effectController.shininess;
				normalMaterial.shininess = effectController.shininess;

				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
				if ( effectController.metallic ) {

					// make colors match to give a more metallic look
					specularColor.copy( diffuseColor );

				} else {

					// more of a plastic look
					specularColor.setRGB( 1, 1, 1 );

				}

				diffuseColor.multiplyScalar( effectController.kd );
				flatMaterial.color.copy( diffuseColor );
				gouraudMaterial.color.copy( diffuseColor );
				phongMaterial.color.copy( diffuseColor );
				texturedMaterial.color.copy( diffuseColor );
				normalMaterial.color.copy( diffuseColor );

				specularColor.multiplyScalar( effectController.ks );
				phongMaterial.specular.copy( specularColor );
				texturedMaterial.specular.copy( specularColor );
				normalMaterial.specular.copy( specularColor );

				// Ambient's actually controlled by the light for this demo
				ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );

				light.position.set( effectController.lx, effectController.ly, effectController.lz );
				light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );

				// skybox is rendered separately, so that it is always behind the teapot.
				if ( shading === 'reflective' ) {

					scene.background = textureCube;

				} else {

					scene.background = null;

				}

				renderer.render( scene, camera );

			}

			// Whenever the teapot changes, the scene is rebuilt from scratch (not much to it).
			function createNewTeapot() {

				if ( teapot !== undefined ) {

					teapot.geometry.dispose();
					scene.remove( teapot );

				}

				const teapotGeometry = new TeapotGeometry( teapotSize,
					tess,
					effectController.bottom,
					effectController.lid,
					effectController.body,
					effectController.fitLid,
					! effectController.nonblinn );

				teapot = new THREE.Mesh(
					teapotGeometry,
					shading === 'wireframe' ? wireMaterial : (
						shading === 'flat' ? flatMaterial : (
							shading === 'smooth' ? gouraudMaterial : (
								shading === 'glossy' ? phongMaterial : (
									shading === 'textured' ? texturedMaterial : (
										shading === 'normal' ? normalMaterial : reflectiveMaterial ) ) ) ) ) );	// if no match, pick Phong


				if ( effectController.vertexColors ) {

					teapot.geometry.computeBoundingBox();
					const minY = teapot.geometry.boundingBox.min.y;
					const maxY = teapot.geometry.boundingBox.max.y;
					const sizeY = maxY - minY;

					const colors = [];
					const position = teapot.geometry.getAttribute( 'position' );
					for ( let i = 0, l = position.count; i < l; i ++ ) {

						const y = position.getY( i );
						const r = ( y - minY ) / sizeY;
						const b = 1.0 - r;

						colors.push( r * 128, 0, b * 128 );

					}

					teapot.geometry.setAttribute( 'color', new THREE.Uint8BufferAttribute( colors, 3, true ) );
					teapot.material.vertexColors = true;
					teapot.material.needsUpdate = true;

				} else {

					teapot.geometry.deleteAttribute( 'color' );
					teapot.material.vertexColors = false;
					teapot.material.needsUpdate = true;

				}

				scene.add( teapot );

			}

			const exporter = new ColladaExporter();

			function exportCollada() {

				const result = exporter.parse( teapot, undefined, { upAxis: 'Y_UP', unitName: 'millimeter', unitMeter: 0.001 } );
				let materialType = 'Phong';

				if ( shading === 'wireframe' ) {

					materialType = 'Constant';

				}

				if ( shading === 'smooth' ) {

					materialType = 'Lambert';

				}

				saveString( result.data, 'teapot_' + shading + '_' + materialType + '.dae' );

				result.textures.forEach( tex => {

					saveArrayBuffer( tex.data, `${ tex.name }.${ tex.ext }` );

				} );

			}

			function save( blob, filename ) {

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

			}

			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 );

			}

			const link = document.createElement( 'a' );
			link.style.display = 'none';
			document.body.appendChild( link );

		</script>

	</body>
</html>