Merge pull request #14593 from WestLangley/dev-nefertiti

Added object-space normal map example

Merge pull request #14593 from WestLangley/dev-nefertiti
Added object-space normal map example
1e2136af · Mr.doob · GitHub · 1fe92061 · e74bcdcc · 1e2136af
4 changed file
--- a/examples/files.js
+++ b/examples/files.js
@@ -158,6 +158,7 @@ var files = {
 		"webgl_materials_lightmap",
 		"webgl_materials_nodes",
 		"webgl_materials_normalmap",
+		"webgl_materials_normalmap_object_space",
 		"webgl_materials_parallaxmap",
 		"webgl_materials_reflectivity",
 		"webgl_materials_shaders_fresnel",

--- a/examples/models/gltf/Nefertiti/Nefertiti.glb
+++ b/examples/models/gltf/Nefertiti/Nefertiti.glb
--- a/examples/models/gltf/Nefertiti/README.md
+++ b/examples/models/gltf/Nefertiti/README.md
+# Nefertiti
+
+## License Information
+
+Model is provided under a creative commons license for non-commercial purposes (CC BY-NC).
+
+3D scan of a copy of the Nefertiti Bust
+
+Digitized by Fraunhofer IGD, Competence Center Cultural Heritage Digitization, http://www.cultlab3d.de/
--- a/examples/webgl_materials_normalmap_object_space.html
+++ b/examples/webgl_materials_normalmap_object_space.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - normal map [object space]</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			a {
+				color: #ffa;
+				font-weight: bold;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl object-space normalmap demo<br />
+			Nefertiti Bust by
+			<a href="http://www.cultlab3d.de/" target="_blank" rel="noopener">CultLab3D</a><br />
+
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var mesh, renderer, scene, camera;
+
+			var obj;
+
+			init();
+
+			function init() {
+
+				// renderer
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				renderer.gammaOutput = true;
+
+				// scene
+				scene = new THREE.Scene();
+
+				// camera
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( - 10, 0, 23 );
+				scene.add( camera );
+
+				// controls
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render );
+				controls.minDistance = 10;
+				controls.maxDistance = 50;
+				controls.enablePan = false;
+
+				// ambient
+				scene.add( new THREE.AmbientLight( 0xffffff, .2 ) );
+
+				// light
+				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				camera.add( light );
+
+				// model
+				new THREE.GLTFLoader().load( 'models/gltf/Nefertiti/Nefertiti.glb', function ( gltf ) {
+
+					gltf.scene.traverse( function ( child ) {
+
+						if ( child.isMesh ) {
+
+							// glTF currently supports only tangent-space normal maps.
+							// this model has been modified to demonstrate the use of an object-space normal map.
+
+							child.material.normalMapType = THREE.ObjectSpaceNormalMap;
+
+							// attribute normals are not required with an object-space normal map. remove them.
+
+							child.geometry.removeAttribute( 'normal' );
+
+							//
+
+							child.material.side = THREE.DoubleSide;
+
+							child.scale.multiplyScalar( 0.5 );
+
+							// recenter
+
+							new THREE.Box3().setFromObject( child ).getCenter( child.position ).multiplyScalar( - 1 );
+
+							scene.add( child );
+
+						}
+
+					} );
+
+					render();
+
+				} );
+
+
+			    window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				render();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>