Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 ce318534 编写于 作者: M Mr.doob
浏览文件
操作

Merge pull request #8256 from bhouston/recent_examples_cleanup 

Recent examples cleanup
上级 13b52bd6 4f1b093f
隐藏空白更改
内联 并排
Showing with 58 addition and 49 deletion
examples/webgl_materials_envmaps_hdr.html
浏览文件 @ ce318534
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>threejs webgl - materials</title> <title>threejs webgl - materials - hdr environment mapping</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
body { body {
color: #fff; color: #000;
font-family:Monospace; font-family:Monospace;
font-size:13px; font-size:13px;
text-align:center; text-align:center;
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
} }
a { color: #00f }
#info { #info {
position: absolute; position: absolute;
...@@ -65,6 +66,7 @@ ...@@ -65,6 +66,7 @@
roughness: 1.0, roughness: 1.0,
bumpScale: 0.3, bumpScale: 0.3,
background: false, background: false,
exposure: 1.0,
}; };
var camera, scene, renderer, controls, objects = []; var camera, scene, renderer, controls, objects = [];
var hdrCubeMap; var hdrCubeMap;
...@@ -86,27 +88,12 @@ ...@@ -86,27 +88,12 @@
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( new THREE.Color( 0xffffff ) );
var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" ); renderer.toneMapping = THREE.LinearToneMapping;
roughnessTexture.wrapS = THREE.RepeatWrapping;
roughnessTexture.wrapT = THREE.RepeatWrapping;
roughnessTexture.repeat.set( 9, 2 );
var hdrType = THREE.UnsignedByteType;
/*
if ( renderer.extensions.get( 'OES_texture_half_float' ) && renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
hdrType = THREE.HalfFloatType;
} else if ( renderer.extensions.get( 'OES_texture_float' ) && renderer.extensions.get( 'OES_texture_float_linear' ) ) {
hdrType = THREE.FloatType;
}
*/
standardMaterial = new THREE.MeshStandardMaterial( { standardMaterial = new THREE.MeshStandardMaterial( {
map: null, map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05, bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff, color: 0xffffff,
metalness: 0.9, metalness: 0.9,
roughness: 1.0, roughness: 1.0,
...@@ -137,6 +124,17 @@ ...@@ -137,6 +124,17 @@
planeMesh1.receiveShadow = true; planeMesh1.receiveShadow = true;
scene.add( planeMesh1 ); scene.add( planeMesh1 );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 2 );
standardMaterial.roughnessMap = map;
standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
} );
var genCubeUrls = function( prefix, postfix ) { var genCubeUrls = function( prefix, postfix ) {
return [ return [
prefix + 'px' + postfix, prefix + 'nx' + postfix, prefix + 'px' + postfix, prefix + 'nx' + postfix,
...@@ -146,7 +144,7 @@ ...@@ -146,7 +144,7 @@
}; };
var hdrUrls = genCubeUrls( "../examples/textures/cube/pisaHDR/", ".hdr" ); var hdrUrls = genCubeUrls( "../examples/textures/cube/pisaHDR/", ".hdr" );
new THREE.HDRCubeTextureLoader().load( hdrType, hdrUrls, function ( hdrCubeMap ) { new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap ); var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer ); pmremGenerator.update( renderer );
...@@ -158,9 +156,6 @@ ...@@ -158,9 +156,6 @@
standardMaterial.envMap = hdrCubeRenderTarget; standardMaterial.envMap = hdrCubeRenderTarget;
standardMaterial.needsUpdate = true; standardMaterial.needsUpdate = true;
floorMaterial.envMap = hdrCubeRenderTarget;
floorMaterial.needsUpdate = true;
} ); } );
var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" ); var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
...@@ -238,6 +233,7 @@ ...@@ -238,6 +233,7 @@
gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] ); gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
gui.add( params, 'roughness', 0, 1 ); gui.add( params, 'roughness', 0, 1 );
gui.add( params, 'bumpScale', - 1, 1 ); gui.add( params, 'bumpScale', - 1, 1 );
gui.add( params, 'exposure', 0.1, 2 );
gui.open(); gui.open();
} }
...@@ -280,6 +276,8 @@ ...@@ -280,6 +276,8 @@
} }
renderer.toneMappingExposure = params.exposure;
var timer = Date.now() * 0.00025; var timer = Date.now() * 0.00025;
camera.lookAt( scene.position ); camera.lookAt( scene.position );
......
examples/webgl_materials_transparency.html
浏览文件 @ ce318534
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>threejs webgl - materials</title> <title>threejs webgl - materials - transparency</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
} }
a { color: #eee }
#info { #info {
position: absolute; position: absolute;
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Transparency with Non-Premultipled Alpha (left) versus Premultiplied Alpha (right) with RGBA8 Buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div> <div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Transparency with Premultiplied Alpha (right) and without (left)<br /> using RGBA8 Buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<script src="../build/three.min.js"></script> <script src="../build/three.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script> <script src="../examples/js/controls/OrbitControls.js"></script>
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
var container, stats; var container, stats;
var params = { var params = {
opacity: 0.5, opacity: 0.2,
roughness: 1.0, roughness: 1.0,
bumpScale: 0.3 bumpScale: 0.3
}; };
...@@ -76,44 +77,51 @@ ...@@ -76,44 +77,51 @@
renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer = new THREE.WebGLRenderer( { antialias: false } );
var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
roughnessTexture.wrapS = THREE.RepeatWrapping;
roughnessTexture.wrapT = THREE.RepeatWrapping;
roughnessTexture.repeat.set( 9, 2 );
standardMaterial = new THREE.MeshStandardMaterial( { standardMaterial = new THREE.MeshStandardMaterial( {
map: null, map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05, bumpScale: - 0.05,
bumpMap: roughnessTexture, color: 0x0304ff,
color: 0xffffff,
metalness: 0.9, metalness: 0.9,
roughness: 1.0, roughness: 0.5,
shading: THREE.SmoothShading, shading: THREE.SmoothShading,
transparent: true transparent: true
} ); } );
var geometry = new THREE.SphereGeometry( 18, 30, 30 ); var geometry = new THREE.SphereGeometry( 18, 30, 30 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial ); var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = -20.0; torusMesh1.position.x = 20.0;
torusMesh1.castShadow = true; torusMesh1.castShadow = true;
scene.add( torusMesh1 ); scene.add( torusMesh1 );
objects.push( torusMesh1 ); objects.push( torusMesh1 );
standardMaterialPremultiplied = new THREE.MeshStandardMaterial( { standardMaterialPremultiplied = new THREE.MeshStandardMaterial( {
map: null, map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05, bumpScale: - 0.05,
bumpMap: roughnessTexture, color: 0x0304ff,
color: 0xffffff,
metalness: 0.9, metalness: 0.9,
roughness: 1.0, roughness: 0.5,
shading: THREE.SmoothShading, shading: THREE.SmoothShading,
blending: THREE.PremultipliedAlphaBlending, blending: THREE.PremultipliedAlphaBlending,
transparent: true transparent: true
} ); } );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 2, 2 );
standardMaterial.map = map;
standardMaterial.roughnessMap = map;
//standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
standardMaterialPremultiplied.map = map;
standardMaterialPremultiplied.roughnessMap = map;
//standardMaterialPremultiplied.bumpMap = map;
standardMaterialPremultiplied.needsUpdate = true;
} );
var torusMesh2 = new THREE.Mesh( geometry, standardMaterialPremultiplied ); var torusMesh2 = new THREE.Mesh( geometry, standardMaterialPremultiplied );
torusMesh2.position.x = 20.0; torusMesh2.position.x = -20.0;
torusMesh2.castShadow = true; torusMesh2.castShadow = true;
scene.add( torusMesh2 ); scene.add( torusMesh2 );
objects.push( torusMesh2 ); objects.push( torusMesh2 );
...@@ -134,7 +142,6 @@ ...@@ -134,7 +142,6 @@
planeMesh1.receiveShadow = true; planeMesh1.receiveShadow = true;
scene.add( planeMesh1 ); scene.add( planeMesh1 );
// Lights // Lights
scene.add( new THREE.AmbientLight( 0x222222 ) ); scene.add( new THREE.AmbientLight( 0x222222 ) );
...@@ -143,6 +150,7 @@ ...@@ -143,6 +150,7 @@
spotLight.position.set( 50, 100, 50 ); spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7; spotLight.angle = Math.PI / 7;
spotLight.penumbra = 0.8 spotLight.penumbra = 0.8
spotLight.intensity = 5;
spotLight.castShadow = true; spotLight.castShadow = true;
scene.add( spotLight ); scene.add( spotLight );
......
examples/webgl_tonemapping.html
浏览文件 @ ce318534
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>threejs webgl - materials</title> <title>threejs webgl - inline tone mapping</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
body { body {
color: #fff; color: #000;
font-family:Monospace; font-family:Monospace;
font-size:13px; font-size:13px;
text-align:center; text-align:center;
...@@ -17,6 +17,8 @@ ...@@ -17,6 +17,8 @@
overflow: hidden; overflow: hidden;
} }
a { color: #222 }
#info { #info {
position: absolute; position: absolute;
top: 0px; width: 100%; top: 0px; width: 100%;
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Inline Tone Mapping (within a Material's fragment shader) without using a pre-processing step or float/half buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div> <div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Inline Tone Mapping (within a Material's fragment shader) without<br/>using a pre-processing step or float/half buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<script src="../build/three.min.js"></script> <script src="../build/three.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script> <script src="../examples/js/controls/OrbitControls.js"></script>
...@@ -39,7 +41,7 @@ ...@@ -39,7 +41,7 @@
<script src="../examples/js/libs/dat.gui.min.js"></script> <script src="../examples/js/libs/dat.gui.min.js"></script>
<script src="../src/loaders/BinaryTextureLoader.js"></script> <script src="../src/loaders/BinaryTextureLoader.js"></script>
<script src="../examples/js/loaders/RGBELoader.js"></script> <script src="../examples/js/loaders/RGBELoader.js"></script>
<script src="../examples/js/loaders/HDRCubeMapLoader.js"></script> <script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
<script src="../examples/js/Half.js"></script> <script src="../examples/js/Half.js"></script>
<script src="../examples/js/Encodings.js"></script> <script src="../examples/js/Encodings.js"></script>
<script src="../examples/js/pmrem/PMREMGenerator.js"></script> <script src="../examples/js/pmrem/PMREMGenerator.js"></script>
...@@ -64,8 +66,8 @@ ...@@ -64,8 +66,8 @@
roughness: 1.0, roughness: 1.0,
bumpScale: 1.0, bumpScale: 1.0,
exposure: 3.0, exposure: 3.0,
whitePoint: 1.0, whitePoint: 5.0,
toneMapping: "Cineon", toneMapping: "Uncharted2",
renderMode: "Renderer" renderMode: "Renderer"
}; };
...@@ -95,6 +97,7 @@ ...@@ -95,6 +97,7 @@
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( new THREE.Color( 0xffffff ) );
standardMaterial = new THREE.MeshStandardMaterial( { standardMaterial = new THREE.MeshStandardMaterial( {
bumpScale: - 0.05, bumpScale: - 0.05,
...@@ -165,7 +168,7 @@ ...@@ -165,7 +168,7 @@
hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
]; ];
var hdrCubeMap = new THREE.HDRCubeMapLoader().load( THREE.UnsignedByteType, hdrurls, function ( hdrCubeMap ) { var hdrCubeMap = new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrurls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap ); var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer ); pmremGenerator.update( renderer );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或