|
|
@@ -20,8 +20,7 @@
|
|
|
|
|
|
<body>
|
|
|
<div id="info">
|
|
|
- <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - materials - clearcoat normal
|
|
|
- demo.<br />
|
|
|
+ <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - materials - clearcoat normal map<br />
|
|
|
</div>
|
|
|
|
|
|
<script type="module">
|
|
|
@@ -30,8 +29,6 @@
|
|
|
|
|
|
import Stats from './jsm/libs/stats.module.js';
|
|
|
|
|
|
- import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
|
-
|
|
|
import { OrbitControls } from './jsm/controls/OrbitControls.js';
|
|
|
import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
|
|
|
import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
|
|
|
@@ -41,85 +38,19 @@
|
|
|
|
|
|
var camera, scene, renderer;
|
|
|
|
|
|
- var guiParams = {
|
|
|
- metalness: 0.0,
|
|
|
- roughness: 1.0,
|
|
|
- clearCoat: 1.0,
|
|
|
- clearCoatRoughness: 0.0,
|
|
|
- reflectivity: 0.0,
|
|
|
- };
|
|
|
-
|
|
|
- var guiNormalMapNames = [
|
|
|
- "face",
|
|
|
- "tentacle"
|
|
|
- ];
|
|
|
-
|
|
|
- var guiMatParams = {
|
|
|
- normalMap: "face",
|
|
|
- normalScale: 1.0,
|
|
|
- clearCoatNormalMap: "tentacle",
|
|
|
- clearCoatNormalScale: 1.0,
|
|
|
- };
|
|
|
-
|
|
|
var particleLight;
|
|
|
- var meshes = [];
|
|
|
- var mats = [];
|
|
|
- var normalMaps = {};
|
|
|
-
|
|
|
- const sphereSize = 80;
|
|
|
- const sphereSpacing = 1.25 * sphereSize * 2;
|
|
|
-
|
|
|
- const variationsX = [
|
|
|
- ( mat, scale, map ) => { },
|
|
|
- ( mat, scale, map ) => {
|
|
|
-
|
|
|
- mat.clearCoatNormalScale = new THREE.Vector2( scale, scale );
|
|
|
- if ( mat.clearCoatNormalMap !== map ) {
|
|
|
-
|
|
|
- mat.clearCoatNormalMap = map;
|
|
|
- mat.needsUpdate = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const variationsY = [
|
|
|
- ( mat, scale, map ) => { },
|
|
|
- ( mat, scale, map ) => {
|
|
|
-
|
|
|
- mat.normalScale = new THREE.Vector2( scale, scale );
|
|
|
- if ( mat.normalMap !== map ) {
|
|
|
-
|
|
|
- mat.normalMap = map;
|
|
|
- mat.needsUpdate = true;
|
|
|
+ var group;
|
|
|
|
|
|
- }
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const maxI = variationsX.length;
|
|
|
- const maxJ = variationsY.length;
|
|
|
-
|
|
|
- new THREE.FontLoader()
|
|
|
- .load( 'fonts/gentilis_regular.typeface.json',
|
|
|
- function ( font ) {
|
|
|
-
|
|
|
- init( font );
|
|
|
- animate();
|
|
|
-
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
-
|
|
|
- function init( font ) {
|
|
|
+ function init() {
|
|
|
|
|
|
container = document.createElement( 'div' );
|
|
|
document.body.appendChild( container );
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
- camera.position.z = 1500;
|
|
|
+ camera.position.z = 1000;
|
|
|
|
|
|
var genCubeUrls = function ( prefix, postfix ) {
|
|
|
|
|
|
@@ -133,6 +64,9 @@
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
+ group = new THREE.Group();
|
|
|
+ scene.add( group );
|
|
|
+
|
|
|
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
|
|
|
|
|
|
new HDRCubeTextureLoader()
|
|
|
@@ -152,41 +86,78 @@
|
|
|
|
|
|
var textureLoader = new THREE.TextureLoader();
|
|
|
|
|
|
- normalMaps.tentacle = textureLoader
|
|
|
- .load( "textures/nvidia_tentacle/tentacle_tangent_space.png" );
|
|
|
-
|
|
|
- normalMaps.face = textureLoader
|
|
|
- .load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
|
|
|
-
|
|
|
-
|
|
|
- var matParams = {
|
|
|
- envMap: hdrCubeRenderTarget.texture,
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- for ( var ii = 0; ii < maxI; ii ++ ) {
|
|
|
+ var diffuse = textureLoader.load( "textures/carbon/Carbon.png" );
|
|
|
+ diffuse.wrapS = THREE.RepeatWrapping;
|
|
|
+ diffuse.wrapT = THREE.RepeatWrapping;
|
|
|
+ diffuse.repeat.x = 10;
|
|
|
+ diffuse.repeat.y = 10;
|
|
|
|
|
|
- if ( ! mats[ ii ] ) {
|
|
|
+ var normalMap = textureLoader.load( "textures/carbon/Carbon_Normal.png" );
|
|
|
+ normalMap.wrapS = THREE.RepeatWrapping;
|
|
|
+ normalMap.wrapT = THREE.RepeatWrapping;
|
|
|
|
|
|
- mats[ ii ] = [];
|
|
|
+ var clearCoatNormaMap = textureLoader.load( "textures/waternormals.jpg" );
|
|
|
+ clearCoatNormaMap.wrapS = THREE.RepeatWrapping;
|
|
|
+ clearCoatNormaMap.wrapT = THREE.RepeatWrapping;
|
|
|
|
|
|
- }
|
|
|
+ //
|
|
|
|
|
|
- for ( var jj = 0; jj < maxJ; jj ++ ) {
|
|
|
-
|
|
|
- var mat = mats[ ii ][ jj ] = new THREE.MeshPhysicalMaterial( matParams );
|
|
|
+ var material = new THREE.MeshPhysicalMaterial( {
|
|
|
+ clearCoat: 1.0,
|
|
|
+ envMap: hdrCubeRenderTarget.texture,
|
|
|
+ map: diffuse
|
|
|
+ } );
|
|
|
|
|
|
- variationsX[ ii ]( mat, 1, normalMaps.tentacle );
|
|
|
- variationsY[ jj ]( mat, 1, normalMaps.face );
|
|
|
- var mesh = new THREE.Mesh( geometry, mat );
|
|
|
- meshes.push( mesh );
|
|
|
- mesh.position.x = ( ii - ( maxI - 1 ) / 2 ) * sphereSpacing;
|
|
|
- mesh.position.y = ( jj - ( maxJ - 1 ) / 2 ) * sphereSpacing;
|
|
|
- scene.add( mesh );
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
+ mesh.position.x = - 100;
|
|
|
+ mesh.position.y = 100;
|
|
|
+ group.add( mesh );
|
|
|
|
|
|
- }
|
|
|
+ // normalmap
|
|
|
|
|
|
- }
|
|
|
+ var material = new THREE.MeshPhysicalMaterial( {
|
|
|
+ clearCoat: 1.0,
|
|
|
+ envMap: hdrCubeRenderTarget.texture,
|
|
|
+ map: diffuse,
|
|
|
+ normalMap: normalMap,
|
|
|
+ normalScale: new THREE.Vector2( 0.5, 0.5 )
|
|
|
+ } );
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
+ mesh.position.x = 100;
|
|
|
+ mesh.position.y = 100;
|
|
|
+ group.add( mesh );
|
|
|
+
|
|
|
+ // clearcoat
|
|
|
+
|
|
|
+ var material = new THREE.MeshPhysicalMaterial( {
|
|
|
+ clearCoat: 1.0,
|
|
|
+ envMap: hdrCubeRenderTarget.texture,
|
|
|
+ map: diffuse,
|
|
|
+ clearCoatNormalMap: clearCoatNormaMap,
|
|
|
+ clearCoatNormalScale: new THREE.Vector2( 0.5, 0.5 )
|
|
|
+ } );
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
+ mesh.position.x = - 100;
|
|
|
+ mesh.position.y = - 100;
|
|
|
+ group.add( mesh );
|
|
|
+
|
|
|
+ // clearcoat + normalmap
|
|
|
+
|
|
|
+ var material = new THREE.MeshPhysicalMaterial( {
|
|
|
+ clearCoat: 1.0,
|
|
|
+ envMap: hdrCubeRenderTarget.texture,
|
|
|
+ map: diffuse,
|
|
|
+ normalMap: normalMap,
|
|
|
+ normalScale: new THREE.Vector2( 0.5, 0.5 ),
|
|
|
+ clearCoatNormalMap: clearCoatNormaMap,
|
|
|
+ clearCoatNormalScale: new THREE.Vector2( 0.5, 0.5 )
|
|
|
+ } );
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
+ mesh.position.x = 100;
|
|
|
+ mesh.position.y = - 100;
|
|
|
+ group.add( mesh );
|
|
|
+
|
|
|
+ //
|
|
|
|
|
|
hdrCubeMap.magFilter = THREE.LinearFilter;
|
|
|
hdrCubeMap.needsUpdate = true;
|
|
|
@@ -199,70 +170,19 @@
|
|
|
|
|
|
);
|
|
|
|
|
|
- function addLabel( name, location, fontSize ) {
|
|
|
-
|
|
|
- fontSize = fontSize | 20;
|
|
|
- var textGeo = new THREE.TextBufferGeometry( name,
|
|
|
- {
|
|
|
-
|
|
|
- font: font,
|
|
|
- size: fontSize,
|
|
|
- height: 1,
|
|
|
- curveSegments: 1
|
|
|
-
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
|
|
|
- var textMesh = new THREE.Mesh( textGeo, textMaterial );
|
|
|
-
|
|
|
- // Center the bounding box on the specified position w/ translation of -half diagonal
|
|
|
- textGeo.computeBoundingBox();
|
|
|
- var bb = textGeo.boundingBox.clone();
|
|
|
- var displace = bb.max.sub( bb.min ).divide( new THREE.Vector3( 2, 2, 2 ) );
|
|
|
-
|
|
|
- textMesh.position.copy( location.sub( displace ) );
|
|
|
- scene.add( textMesh );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- addLabel( "Normal Map", new THREE.Vector3( -350, 0, 0 ), 30 );
|
|
|
- addLabel( "None", new THREE.Vector3( -250, -100, 0 ) );
|
|
|
- addLabel( "Map", new THREE.Vector3( -300, 100, 0 ) );
|
|
|
-
|
|
|
- addLabel( "Clearcoat Normal Map", new THREE.Vector3( 0, 260, 0 ), 30 );
|
|
|
- addLabel( "None", new THREE.Vector3( -100, 200, 0 ) );
|
|
|
- addLabel( "Map", new THREE.Vector3( 100, 200, 0 ) );
|
|
|
-
|
|
|
// LIGHTS
|
|
|
|
|
|
particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
|
|
|
scene.add( particleLight );
|
|
|
|
|
|
- {
|
|
|
-
|
|
|
- var ambientLight = new THREE.AmbientLight( 0x444444 );
|
|
|
- scene.add( ambientLight );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- {
|
|
|
-
|
|
|
- var pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
|
|
|
- particleLight.add( pointLight );
|
|
|
+ var ambientLight = new THREE.AmbientLight( 0x444444 );
|
|
|
+ scene.add( ambientLight );
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- {
|
|
|
-
|
|
|
- var directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
|
- directionalLight.position.set( 1, - 0.5, - 1 );
|
|
|
- scene.add( directionalLight );
|
|
|
-
|
|
|
- }
|
|
|
+ var pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
|
|
|
+ particleLight.add( pointLight );
|
|
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
@@ -282,40 +202,6 @@
|
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
- var gui = new GUI();
|
|
|
-
|
|
|
- {
|
|
|
-
|
|
|
- var materialGui = gui.addFolder( 'Physical Material' );
|
|
|
- materialGui.add( guiParams, 'metalness', 0, 1, 0.01 );
|
|
|
- materialGui.add( guiParams, 'roughness', 0, 1, 0.01 );
|
|
|
- materialGui.add( guiParams, 'reflectivity', 0, 1, 0.01 );
|
|
|
- materialGui.open();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- {
|
|
|
-
|
|
|
- var clearCoatGui = gui.addFolder( 'ClearCoat' );
|
|
|
- clearCoatGui.add( guiParams, 'clearCoat', 0, 1, 0.01 );
|
|
|
- clearCoatGui.add( guiParams, 'clearCoatRoughness', 0, 1, 0.01 );
|
|
|
- clearCoatGui.open();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- {
|
|
|
-
|
|
|
- var normalGui = gui.addFolder( 'Normal Maps' );
|
|
|
- normalGui.add( guiMatParams, 'normalMap', guiNormalMapNames );
|
|
|
- normalGui.add( guiMatParams, 'normalScale', 0, 1, 0.01 );
|
|
|
- normalGui.add( guiMatParams, 'clearCoatNormalMap', guiNormalMapNames );
|
|
|
- normalGui.add( guiMatParams, 'clearCoatNormalScale', 0, 1, 0.01 );
|
|
|
- normalGui.open();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- gui.open();
|
|
|
-
|
|
|
}
|
|
|
|
|
|
//
|
|
|
@@ -346,47 +232,19 @@
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- var matColor = new THREE.Color().setHSL( 0.0, 0.5, 0.25 );
|
|
|
-
|
|
|
- for ( var ii = 0; ii < maxI; ii ++ ) {
|
|
|
-
|
|
|
- if ( mats[ ii ] ) { // avoid exceptions on first render before materials are set. TODO: lauch animation only after setup
|
|
|
-
|
|
|
- for ( var jj = 0; jj < maxJ; jj ++ ) {
|
|
|
-
|
|
|
- var mat = mats[ ii ][ jj ];
|
|
|
- mat.color = matColor;
|
|
|
- for ( var matParam in guiParams ) {
|
|
|
-
|
|
|
- mat[ matParam ] = guiParams[ matParam ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var normalMap = normalMaps[ guiMatParams.normalMap ];
|
|
|
- var clearCoatNormalMap = normalMaps[ guiMatParams.clearCoatNormalMap ];
|
|
|
-
|
|
|
- variationsX[ ii ]( mat, guiMatParams.clearCoatNormalScale, clearCoatNormalMap );
|
|
|
- variationsY[ jj ]( mat, guiMatParams.normalScale, normalMap );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
var timer = Date.now() * 0.00025;
|
|
|
+
|
|
|
particleLight.position.x = Math.sin( timer * 7 ) * 300;
|
|
|
particleLight.position.y = Math.cos( timer * 5 ) * 400;
|
|
|
particleLight.position.z = Math.cos( timer * 3 ) * 300;
|
|
|
|
|
|
+ for ( var i = 0; i < group.children.length; i ++ ) {
|
|
|
|
|
|
- for ( var mesh of meshes ) {
|
|
|
-
|
|
|
- mesh.rotation.y += 0.01;
|
|
|
+ var child = group.children[ i ];
|
|
|
+ child.rotation.y += 0.005;
|
|
|
|
|
|
}
|
|
|
|
|
|
-
|
|
|
renderer.render( scene, camera );
|
|
|
|
|
|
}
|
|
|
@@ -394,4 +252,4 @@
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
Mr.doob
