199 lines
4.5 KiB
HTML
199 lines
4.5 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<title>Sheen demo (material property)</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">
|
|
<style>
|
|
body {
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info">Sheen demo by <a href="https://github.com/DanielSturk">DanielSturk</a></div>
|
|
<div id="container"></div>
|
|
|
|
<script type="module">
|
|
|
|
import * as THREE from '../build/three.module.js';
|
|
|
|
import * as Nodes from './jsm/nodes/Nodes.js';
|
|
|
|
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 { FBXLoader } from './jsm/loaders/FBXLoader.js';
|
|
|
|
// Graphics variables
|
|
let camera, controls, scene, renderer, stats;
|
|
let directionalLight;
|
|
let mesh, sphere, material, nodeMaterial;
|
|
|
|
const params = {
|
|
nodeMaterial: true,
|
|
color: new THREE.Color( 255, 0, 127 ),
|
|
sheenBRDF: true,
|
|
sheen: new THREE.Color( 10, 10, 10 ), // corresponds to .04 reflectance
|
|
roughness: 0.9
|
|
};
|
|
|
|
// model
|
|
new FBXLoader().load( 'models/fbx/cloth.fbx', function ( loadedModel ) {
|
|
|
|
mesh = loadedModel.children[ 0 ];
|
|
|
|
init();
|
|
|
|
} );
|
|
|
|
function init( ) {
|
|
|
|
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
|
|
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color( 0xbfd1e5 );
|
|
|
|
mesh.scale.multiplyScalar( 0.5 );
|
|
scene.add( mesh );
|
|
|
|
//
|
|
|
|
material = new THREE.MeshPhysicalMaterial();
|
|
material.side = THREE.DoubleSide;
|
|
material.metalness = 0;
|
|
|
|
//
|
|
|
|
nodeMaterial = new Nodes.StandardNodeMaterial();
|
|
nodeMaterial.side = THREE.DoubleSide;
|
|
nodeMaterial.metalness = new Nodes.FloatNode( 0 );
|
|
nodeMaterial.roughness = new Nodes.FloatNode();
|
|
nodeMaterial.color = new Nodes.ColorNode( params.color.clone() );
|
|
|
|
//
|
|
|
|
sphere = new THREE.Mesh(
|
|
new THREE.SphereGeometry( 1, 100, 100 ),
|
|
material
|
|
);
|
|
scene.add( sphere );
|
|
|
|
camera.position.set( - 12, 7, 4 );
|
|
|
|
const container = document.getElementById( 'container' );
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.shadowMap.enabled = true;
|
|
container.appendChild( renderer.domElement );
|
|
|
|
controls = new OrbitControls( camera, renderer.domElement );
|
|
controls.target.set( 0, 2, 0 );
|
|
controls.update();
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
directionalLight.position.set( 0, 10, 0 );
|
|
directionalLight.castShadow = true;
|
|
directionalLight.add(
|
|
new THREE.Mesh(
|
|
new THREE.SphereGeometry( 0.5 ),
|
|
new THREE.MeshBasicMaterial( { color: 0xffffff } )
|
|
)
|
|
);
|
|
|
|
scene.add( directionalLight );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.dom );
|
|
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
|
|
const gui = new GUI();
|
|
|
|
function onUpdate() {
|
|
|
|
mesh.material = sphere.material = params.nodeMaterial
|
|
? nodeMaterial
|
|
: material;
|
|
|
|
material.sheen = params.sheenBRDF
|
|
? new THREE.Color()
|
|
: null;
|
|
|
|
material.needsUpdate = true;
|
|
|
|
nodeMaterial.sheen = params.sheenBRDF
|
|
? new Nodes.ColorNode( material.sheen )
|
|
: undefined;
|
|
|
|
nodeMaterial.needsCompile = true;
|
|
|
|
}
|
|
|
|
gui.add( params, 'nodeMaterial' ).onChange( onUpdate );
|
|
gui.addColor( params, 'color' );
|
|
gui.add( params, 'sheenBRDF' ).onChange( onUpdate );
|
|
gui.addColor( params, 'sheen' );
|
|
gui.add( params, 'roughness', 0, 1 );
|
|
gui.open();
|
|
|
|
onUpdate();
|
|
|
|
animate();
|
|
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
//
|
|
|
|
material.color.copy( params.color ).multiplyScalar( 1 / 255 );
|
|
material.roughness = params.roughness;
|
|
|
|
//
|
|
|
|
nodeMaterial.color.value.copy( material.color );
|
|
nodeMaterial.roughness.value = params.roughness;
|
|
|
|
//
|
|
|
|
if ( params.sheenBRDF ) {
|
|
|
|
material.sheen.copy( params.sheen ).multiplyScalar( 1 / 255 );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|