提交 6dd16bf1 编写于 作者: B Ben Houston (Clara.io) 提交者: Mr.doob

add reflectivity example.

上级 5a6df635
......@@ -129,6 +129,7 @@ var files = {
"webgl_materials_nodes",
"webgl_materials_normalmap",
"webgl_materials_parallaxmap",
"webgl_materials_reflectivity",
"webgl_materials_shaders_fresnel",
"webgl_materials_skin",
"webgl_materials_standard",
......
# Blender v2.74 (sub 0) OBJ File: ''
# www.blender.org
mtllib diamond-for-threejs.mtl
o emerald_obj_1
v -3.292856 5.746839 5.366825
v -4.692856 5.043496 4.000000
v -4.692857 -5.043496 4.000000
v -3.292857 -5.746839 5.366825
v -4.692856 5.043496 -4.000000
v -3.292856 5.746839 -5.366825
v -3.292857 -5.746839 -5.366825
v -4.692857 -5.043496 -4.000000
v -3.292858 -8.649050 3.181548
v -4.692858 -7.590510 2.371271
v -4.692858 -7.590510 -2.371271
v -3.292858 -8.649050 -3.181548
v -3.292856 8.649050 -3.181548
v -4.692856 7.590510 -2.371271
v -4.692856 7.590510 2.371271
v -3.292856 8.649050 3.181548
v 4.739632 7.649404 2.869210
v 4.739632 5.082627 4.839954
v 4.739630 -5.082630 4.839954
v 4.739630 -7.649406 2.869211
v 4.739630 -7.649406 -2.869211
v 4.739630 -5.082630 -4.839954
v 4.739632 5.082627 -4.839954
v 4.739632 7.649404 -2.869210
v -5.038335 4.756373 -0.096954
v -5.038335 3.439395 -0.163548
v -5.038336 -3.439395 -0.163548
v -5.038337 -4.756373 -0.096954
v -5.038337 -4.756373 0.096954
v -5.038336 -3.439395 0.163548
v -5.038335 3.439395 0.163548
v -5.038335 4.756373 0.096954
v -1.570719 6.404040 7.078050
v -1.570719 9.638143 4.195993
v -1.570721 -6.404041 7.078050
v -1.570721 -9.638143 4.195993
v -1.570721 -9.638143 -4.195993
v -1.570721 -6.404041 -7.078050
v -1.570719 6.404040 -7.078050
v -1.570719 9.638143 -4.195993
v 1.184699 7.289807 8.431552
v 1.184699 10.971231 4.998373
v 1.184697 -7.289809 8.431552
v 1.184696 -10.971232 4.998374
v 1.184696 -10.971232 -4.998374
v 1.184697 -7.289809 -8.431552
v 1.184699 7.289807 -8.431552
v 1.184699 10.971231 -4.998373
v 1.676783 7.289807 8.431552
v 1.676784 10.971231 4.998373
v 1.676781 -7.289809 8.431552
v 1.676781 -10.971232 4.998374
v 1.676781 -10.971232 -4.998374
v 1.676781 -7.289809 -8.431552
v 1.676783 7.289807 -8.431552
v 1.676784 10.971231 -4.998373
v 2.759176 6.861979 7.557796
v 2.759176 10.327344 4.480395
v 2.759174 -6.861980 7.557796
v 2.759173 -10.327346 4.480397
v 2.759173 -10.327346 -4.480397
v 2.759174 -6.861980 -7.557796
v 2.759176 6.861979 -7.557796
v 2.759176 10.327344 -4.480395
v 4.050778 5.880537 6.214112
v 4.050778 8.850266 3.683835
v 4.050776 -5.880539 6.214112
v 4.050776 -8.850267 3.683837
v 4.050776 -8.850267 -3.683837
v 4.050776 -5.880539 -6.214112
v 4.050778 5.880537 -6.214112
v 4.050778 8.850266 -3.683835
vn -0.698600 0.000000 0.715500
vn -0.698600 0.000000 -0.715500
vn -0.603100 -0.797700 0.000000
vn -0.603100 0.797700 0.000000
vn 1.000000 -0.000000 -0.000000
vn -1.000000 0.000000 -0.000000
vn -0.737800 0.363600 0.568600
vn -0.675900 0.443300 0.588700
vn -0.666900 -0.401400 0.627800
vn -0.734400 -0.408200 0.542200
vn -0.734400 0.408200 -0.542200
vn -0.666900 0.401400 -0.627800
vn -0.675900 -0.443300 -0.588700
vn -0.737800 -0.363600 -0.568600
vn -0.715200 0.420400 0.558300
vn -0.635000 0.514000 0.576800
vn -0.704900 0.000000 0.709400
vn -0.632200 -0.466000 0.618900
vn -0.705600 -0.471400 0.529000
vn -0.498000 -0.867200 0.000000
vn -0.715200 -0.420400 -0.558300
vn -0.635000 -0.514000 -0.576800
vn -0.704900 0.000000 -0.709400
vn -0.632200 0.466000 -0.618900
vn -0.705600 0.471400 -0.529000
vn -0.498000 0.867200 0.000000
vn -0.502100 0.575400 0.645600
vn -0.477100 0.599400 0.642700
vn -0.440900 0.000000 0.897600
vn -0.474700 -0.585600 0.657100
vn -0.500700 -0.590400 0.633000
vn -0.435500 -0.900200 0.000000
vn -0.502100 -0.575400 -0.645600
vn -0.477100 -0.599400 -0.642700
vn -0.440900 0.000000 -0.897600
vn -0.474700 0.585600 -0.657100
vn -0.500700 0.590400 -0.633000
vn -0.435500 0.900200 0.000000
vn 0.000000 0.682000 0.731300
vn 0.000000 0.000000 1.000000
vn 0.000000 -0.682000 0.731300
vn 0.000000 -1.000000 0.000000
vn 0.000000 -0.682000 -0.731300
vn 0.000000 0.000000 -1.000000
vn 0.000000 0.682000 -0.731300
vn 0.000000 1.000000 0.000000
vn 0.652000 0.517100 0.554500
vn 0.601400 0.530500 0.597400
vn 0.628100 -0.000000 0.778100
vn 0.602900 -0.544100 0.583500
vn 0.654700 -0.501900 0.565200
vn 0.511300 -0.859400 0.000000
vn 0.652000 -0.517100 -0.554500
vn 0.601400 -0.530500 -0.597400
vn 0.628100 -0.000000 -0.778100
vn 0.602900 0.544100 -0.583500
vn 0.654700 0.501900 -0.565200
vn 0.511300 0.859400 0.000000
vn 0.788600 0.408300 0.459800
vn 0.771100 0.412900 0.484600
vn 0.720900 -0.000000 0.693000
vn 0.773500 -0.420800 0.473900
vn 0.789100 -0.398400 0.467600
vn 0.752800 -0.658300 0.000000
vn 0.788600 -0.408300 -0.459800
vn 0.771100 -0.412900 -0.484600
vn 0.720900 -0.000000 -0.693000
vn 0.773500 0.420800 -0.473900
vn 0.789100 0.398400 -0.467600
vn 0.752800 0.658300 0.000000
vn 0.915100 0.261500 0.306900
vn 0.894400 0.272400 0.354800
vn 0.894000 -0.000000 0.448100
vn 0.897100 -0.286500 0.336300
vn 0.916300 -0.243900 0.317700
vn 0.867400 -0.497600 0.000000
vn 0.915100 -0.261500 -0.306900
vn 0.894400 -0.272400 -0.354800
vn 0.894000 -0.000000 -0.448100
vn 0.897100 0.286500 -0.336300
vn 0.916300 0.243900 -0.317700
vn 0.867400 0.497600 0.000000
vn -0.996500 0.045300 -0.070800
vn -0.989900 0.007200 -0.141500
vn -0.996000 0.000000 -0.089700
vn -0.995000 -0.053800 -0.084100
vn -0.996100 -0.004400 -0.087800
vn -0.992700 -0.121000 0.000000
vn -0.996500 -0.045300 0.070800
vn -0.989900 -0.007200 0.141500
vn -0.996000 0.000000 0.089700
vn -0.995000 0.053800 0.084100
vn -0.996100 0.004400 0.087800
vn -0.992700 0.121000 0.000000
usemtl emerald_obj_1Default
s off
f 1//1 2//1 3//1
f 1//1 3//1 4//1
f 5//2 6//2 7//2
f 5//2 7//2 8//2
f 9//3 10//3 11//3
f 9//3 11//3 12//3
f 13//4 14//4 15//4
f 13//4 15//4 16//4
f 17//5 18//5 19//5
f 17//5 19//5 20//5
f 17//5 20//5 21//5
f 17//5 21//5 22//5
f 17//5 22//5 23//5
f 17//5 23//5 24//5
f 25//6 26//6 27//6
f 25//6 27//6 28//6
f 25//6 28//6 29//6
f 25//6 29//6 30//6
f 25//6 30//6 31//6
f 25//6 31//6 32//6
f 15//7 2//7 1//7
f 15//8 1//8 16//8
f 3//9 10//9 9//9
f 3//10 9//10 4//10
f 13//11 6//11 5//11
f 13//12 5//12 14//12
f 7//13 12//13 11//13
f 7//14 11//14 8//14
f 16//15 1//15 33//15
f 16//16 33//16 34//16
f 1//17 4//17 35//17
f 1//17 35//17 33//17
f 4//18 9//18 36//18
f 4//19 36//19 35//19
f 9//20 12//20 37//20
f 9//20 37//20 36//20
f 12//21 7//21 38//21
f 12//22 38//22 37//22
f 7//23 6//23 39//23
f 7//23 39//23 38//23
f 6//24 13//24 40//24
f 6//25 40//25 39//25
f 13//26 16//26 34//26
f 13//26 34//26 40//26
f 34//27 33//27 41//27
f 34//28 41//28 42//28
f 33//29 35//29 43//29
f 33//29 43//29 41//29
f 35//30 36//30 44//30
f 35//31 44//31 43//31
f 36//32 37//32 45//32
f 36//32 45//32 44//32
f 37//33 38//33 46//33
f 37//34 46//34 45//34
f 38//35 39//35 47//35
f 38//35 47//35 46//35
f 39//36 40//36 48//36
f 39//37 48//37 47//37
f 40//38 34//38 42//38
f 40//38 42//38 48//38
f 42//39 41//39 49//39
f 42//39 49//39 50//39
f 41//40 43//40 51//40
f 41//40 51//40 49//40
f 43//41 44//41 52//41
f 43//41 52//41 51//41
f 44//42 45//42 53//42
f 44//42 53//42 52//42
f 45//43 46//43 54//43
f 45//43 54//43 53//43
f 46//44 47//44 55//44
f 46//44 55//44 54//44
f 47//45 48//45 56//45
f 47//45 56//45 55//45
f 48//46 42//46 50//46
f 48//46 50//46 56//46
f 50//47 49//47 57//47
f 50//48 57//48 58//48
f 49//49 51//49 59//49
f 49//49 59//49 57//49
f 51//50 52//50 60//50
f 51//51 60//51 59//51
f 52//52 53//52 61//52
f 52//52 61//52 60//52
f 53//53 54//53 62//53
f 53//54 62//54 61//54
f 54//55 55//55 63//55
f 54//55 63//55 62//55
f 55//56 56//56 64//56
f 55//57 64//57 63//57
f 56//58 50//58 58//58
f 56//58 58//58 64//58
f 58//59 57//59 65//59
f 58//60 65//60 66//60
f 57//61 59//61 67//61
f 57//61 67//61 65//61
f 59//62 60//62 68//62
f 59//63 68//63 67//63
f 60//64 61//64 69//64
f 60//64 69//64 68//64
f 61//65 62//65 70//65
f 61//66 70//66 69//66
f 62//67 63//67 71//67
f 62//67 71//67 70//67
f 63//68 64//68 72//68
f 63//69 72//69 71//69
f 64//70 58//70 66//70
f 64//70 66//70 72//70
f 66//71 65//71 18//71
f 66//72 18//72 17//72
f 65//73 67//73 19//73
f 65//73 19//73 18//73
f 67//74 68//74 20//74
f 67//75 20//75 19//75
f 68//76 69//76 21//76
f 68//76 21//76 20//76
f 69//77 70//77 22//77
f 69//78 22//78 21//78
f 70//79 71//79 23//79
f 70//79 23//79 22//79
f 71//80 72//80 24//80
f 71//81 24//81 23//81
f 72//82 66//82 17//82
f 72//82 17//82 24//82
f 14//83 5//83 26//83
f 14//84 26//84 25//84
f 5//85 8//85 27//85
f 5//85 27//85 26//85
f 8//86 11//86 28//86
f 8//87 28//87 27//87
f 11//88 10//88 29//88
f 11//88 29//88 28//88
f 10//89 3//89 30//89
f 10//90 30//90 29//90
f 3//91 2//91 31//91
f 3//91 31//91 30//91
f 2//92 15//92 32//92
f 2//93 32//93 31//93
f 15//94 14//94 25//94
f 15//94 25//94 32//94
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials - hdr environment mapping</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 {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000;
margin: 0px;
overflow: hidden;
}
a { color: #88f }
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Standard Material Reflectivity (reflectance at F0) example by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/Half.js"></script>
<script src="js/Encodings.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var params = {
projection: 'normal',
autoRotate: true,
reflectivity: 1.0,
background: false,
exposure: 1.0,
gemColor: 'Green'
};
var camera, scene, renderer, controls, objects = [];
var hdrCubeMap;
var composer;
var gemBackMaterial, gemFrontMaterial;
var hdrCubeRenderTarget;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0.0, -10, 20 * 3.5 );
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( new THREE.Color( 0x000000 ) );
gemBackMaterial = new THREE.MeshPhysicalMaterial( {
map: null,
color: 0x0000ff,
metalness: 1.0,
roughness: 0,
opacity: 0.5,
side: THREE.BackSide,
transparent: true,
shading: THREE.SmoothShading,
envMapIntensity: 5,
premultipliedAlpha: true
// TODO: Add custom blend mode that modulates background color by this materials color.
} );
gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
map: null,
color: 0x0000ff,
metalness: 0.0,
roughness: 0,
opacity: 0.15,
side: THREE.FrontSide,
transparent: true,
shading: THREE.SmoothShading,
envMapIntensity: 5,
premultipliedAlpha: true
} );
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var loader = new THREE.OBJLoader( manager );
loader.load( 'models/obj/emerald.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = gemBackMaterial;
var second = child.clone();
second.material = gemFrontMaterial;
var parent = new THREE.Group();
parent.add( second );
parent.add( child );
scene.add( parent );
objects.push( parent );
}
} );
} );
var genCubeUrls = function( prefix, postfix ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
};
var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget;
gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
} );
// Lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var pointLight1 = new THREE.PointLight( 0xffffff );
pointLight1.position.set( 150, 10, 0 );
pointLight1.castShadow = false;
scene.add( pointLight1 );
var pointLight2 = new THREE.PointLight( 0xffffff );
pointLight2.position.set( -150, 0, 0 );
scene.add( pointLight2 );
var pointLight3 = new THREE.PointLight( 0xffffff );
pointLight3.position.set( 0, -10, -150 );
scene.add( pointLight3 );
var pointLight4 = new THREE.PointLight( 0xffffff );
pointLight4.position.set( 0, 0, 150 );
scene.add( pointLight4 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
var gui = new dat.GUI();
gui.add( params, 'reflectivity', 0, 1 );
gui.add( params, 'exposure', 0.1, 2 );
gui.add( params, 'autoRotate' );
gui.add( params, 'gemColor', [ 'Blue', 'Green', 'Red', 'White', 'Black' ] );
gui.open();
}
function onWindowResize() {
var width = window.innerWidth;
var height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
}
//
function animate() {
requestAnimationFrame( animate );
stats.begin();
render();
stats.end();
}
function render() {
if ( gemBackMaterial !== undefined && gemFrontMaterial !== undefined ) {
gemFrontMaterial.reflectivity = gemBackMaterial.reflectivity = params.reflectivity;
var newColor = gemBackMaterial.color;
switch( params.gemColor ) {
case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
case 'Red': newColor = new THREE.Color( 0x880000 ); break;
case 'Green': newColor = new THREE.Color( 0x008800 ); break;
case 'White': newColor = new THREE.Color( 0x888888 ); break;
case 'Black': newColor = new THREE.Color( 0x0f0f0f ); break;
}
gemBackMaterial.color = gemFrontMaterial.color = newColor;
}
renderer.toneMappingExposure = params.exposure;
var timer = Date.now() * 0.00025;
camera.lookAt( scene.position );
if( params.autoRotate ) {
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册