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>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<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;
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
......@@ -16,6 +16,7 @@
margin: 0px;
overflow: hidden;
}
a { color: #00f }
#info {
position: absolute;
......@@ -65,6 +66,7 @@
roughness: 1.0,
bumpScale: 0.3,
background: false,
exposure: 1.0,
};
var camera, scene, renderer, controls, objects = [];
var hdrCubeMap;
......@@ -86,27 +88,12 @@
scene = new THREE.Scene();
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 );
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;
}
*/
renderer.setClearColor( new THREE.Color( 0xffffff ) );
renderer.toneMapping = THREE.LinearToneMapping;
standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
metalness: 0.9,
roughness: 1.0,
......@@ -137,6 +124,17 @@
planeMesh1.receiveShadow = true;
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 ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
......@@ -146,7 +144,7 @@
};
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 );
pmremGenerator.update( renderer );
......@@ -158,9 +156,6 @@
standardMaterial.envMap = hdrCubeRenderTarget;
standardMaterial.needsUpdate = true;
floorMaterial.envMap = hdrCubeRenderTarget;
floorMaterial.needsUpdate = true;
} );
var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
......@@ -238,6 +233,7 @@
gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
gui.add( params, 'roughness', 0, 1 );
gui.add( params, 'bumpScale', - 1, 1 );
gui.add( params, 'exposure', 0.1, 2 );
gui.open();
}
......@@ -280,6 +276,8 @@
}
renderer.toneMappingExposure = params.exposure;
var timer = Date.now() * 0.00025;
camera.lookAt( scene.position );
......
examples/webgl_materials_transparency.html
浏览文件 @ ce318534
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<title>threejs webgl - materials - transparency</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -16,6 +16,7 @@
margin: 0px;
overflow: hidden;
}
a { color: #eee }
#info {
position: absolute;
......@@ -27,7 +28,7 @@
<body>
<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="../examples/js/controls/OrbitControls.js"></script>
......@@ -53,7 +54,7 @@
var container, stats;
var params = {
opacity: 0.5,
opacity: 0.2,
roughness: 1.0,
bumpScale: 0.3
};
......@@ -76,44 +77,51 @@
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( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
color: 0x0304ff,
metalness: 0.9,
roughness: 1.0,
roughness: 0.5,
shading: THREE.SmoothShading,
transparent: true
} );
var geometry = new THREE.SphereGeometry( 18, 30, 30 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = -20.0;
torusMesh1.position.x = 20.0;
torusMesh1.castShadow = true;
scene.add( torusMesh1 );
objects.push( torusMesh1 );
standardMaterialPremultiplied = new THREE.MeshStandardMaterial( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
color: 0x0304ff,
metalness: 0.9,
roughness: 1.0,
roughness: 0.5,
shading: THREE.SmoothShading,
blending: THREE.PremultipliedAlphaBlending,
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 );
torusMesh2.position.x = 20.0;
torusMesh2.position.x = -20.0;
torusMesh2.castShadow = true;
scene.add( torusMesh2 );
objects.push( torusMesh2 );
......@@ -134,7 +142,6 @@
planeMesh1.receiveShadow = true;
scene.add( planeMesh1 );
// Lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
......@@ -143,6 +150,7 @@
spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7;
spotLight.penumbra = 0.8
spotLight.intensity = 5;
spotLight.castShadow = true;
scene.add( spotLight );
......
examples/webgl_tonemapping.html
浏览文件 @ ce318534
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<title>threejs webgl - inline tone 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;
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
......@@ -17,6 +17,8 @@
overflow: hidden;
}
a { color: #222 }
#info {
position: absolute;
top: 0px; width: 100%;
......@@ -27,7 +29,7 @@
<body>
<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="../examples/js/controls/OrbitControls.js"></script>
......@@ -39,7 +41,7 @@
<script src="../examples/js/libs/dat.gui.min.js"></script>
<script src="../src/loaders/BinaryTextureLoader.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/Encodings.js"></script>
<script src="../examples/js/pmrem/PMREMGenerator.js"></script>
......@@ -64,8 +66,8 @@
roughness: 1.0,
bumpScale: 1.0,
exposure: 3.0,
whitePoint: 1.0,
toneMapping: "Cineon",
whitePoint: 5.0,
toneMapping: "Uncharted2",
renderMode: "Renderer"
};
......@@ -95,6 +97,7 @@
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( new THREE.Color( 0xffffff ) );
standardMaterial = new THREE.MeshStandardMaterial( {
bumpScale: - 0.05,
......@@ -165,7 +168,7 @@
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 );
pmremGenerator.update( renderer );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或