Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added object-space normal map example #14593

Merged
merged 3 commits into from
Aug 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,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",
Expand Down
Binary file added examples/models/gltf/Nefertiti/Nefertiti.glb
Binary file not shown.
9 changes: 9 additions & 0 deletions examples/models/gltf/Nefertiti/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# 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/
150 changes: 150 additions & 0 deletions examples/webgl_materials_normalmap_object_space.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!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>