samien
/
three.js
дзеркало https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - exporter - gltf - normals</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta property="og:title" content="three.js webgl - exporter - gltf - normals">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/misc_exporter_gltf_normals.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/misc_exporter_gltf_normals.jpg">
		<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 - normals<br/><br/>
			<button id="export_objects">Export</button><br/>
		</div>

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

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

			//

			let container;

			let camera, scene, renderer;
			let mesh1, mesh2;

			init();
			render();

			function init() {

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

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

				container.appendChild( renderer.domElement );

				scene = new THREE.Scene();
				scene.name = 'Scene';

				// camera
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 0, 0, 150 );
				camera.name = 'PerspectiveCamera';
				scene.add( camera );

				// controls
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // use if there is no animation loop
				controls.minDistance = 100;
				controls.maxDistance = 200;

				// lights
				const light = new THREE.DirectionalLight( 0xffffff, 4 );
				light.position.set( 0, 1, 1 );
				light.name = 'DirectionalLight';
				scene.add( light );

				const light2 = new THREE.DirectionalLight( 0xffffff, 4 ); // for back-sided objects
				light2.position.set( 0, 1, - 1 );
				light2.name = 'DirectionalLight2';
				scene.add( light2 );

				// geometry1 - three.js convention: uv (0,0) bottom left
				const geometry1 = new THREE.PlaneGeometry( 50, 50 );

				// geometry2 - glTF convention: uv (0,0) top left
				const geometry2 = new THREE.PlaneGeometry( 50, 50 );
				geometry2.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( [ 0, 0, 1, 0, 0, 1, 1, 1 ] ), 2 ) );

				// textures
				const normalMapOpenGL = new THREE.TextureLoader().load( 'textures/NormalMapOpenGL.png', render );
				const normalMapDirectX = new THREE.TextureLoader().load( 'textures/NormalMapDirectX.png', render );

				// material
				const material = new THREE.MeshStandardMaterial( {
					color: 0x636389,
					roughness: 0.3,
					normalMap: null,
					normalScale: new THREE.Vector2( 0.5, 0.5 ),
					side: THREE.DoubleSide
				} );

				// pick one
				// ---------------------------------------------------
				const GEOMETRY = geometry1; // geometry1 or geometry2
				// ---------------------------------------------------

				// mesh1
				mesh1 = new THREE.Mesh( GEOMETRY, material.clone() );
				mesh1.position.set( - 30, 0, 0 );

				mesh1.material.normalMap = normalMapOpenGL;
				//mesh1.material.normalMap.flipY = false; // default true
				//mesh1.material.normalScale.y *= - 1; // exporter ignores negative normalScale.y

				mesh1.name = 'Mesh1';
				scene.add( mesh1 );

				// mesh2
				mesh2 = new THREE.Mesh( GEOMETRY, material.clone() );
				mesh2.position.set( 30, 0, 0 );

				mesh2.material.normalMap = normalMapDirectX;
				//mesh2.material.normalMap.flipY = false; // default true
				mesh2.material.normalScale.y *= - 1; // exporter ignores negative normalScale.y

				mesh2.name = 'Mesh2';
				scene.add( mesh2 );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

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

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

			}

			function render() {

				renderer.render( scene, camera );

			}

			//

			function exportGLTF( input ) {

				const gltfExporter = new GLTFExporter();

				const options = {
					binary: true
				};
			
				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' );

					}

				}, null, options );

			}

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

				exportGLTF( [ mesh1, mesh2 ] );

			} );

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

			}

		</script>

	</body>
</html>