Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 7b9cbb47 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #14629 from donmccurdy/examples-keyframes-glb 

Examples: Update unreal bloom example.
上级 fb206154 a0c016ec
隐藏空白更改
内联 并排
Showing with 100 addition and 186 deletion
examples/webgl_postprocessing_unreal_bloom.html
浏览文件 @ 7b9cbb47
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials - hdr environment mapping</title>
<title>three.js webgl - postprocessing - unreal bloom</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 {
background-color: #000000;
margin: 0px;
overflow: hidden;
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
}
a {
color:#00ff78;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
top: 0px;
width: 100%;
text-align: center;
display:block;
padding: 5px;
}
.dg.ac {
z-index: 1 !important; /* FIX DAT.GUI */
#info p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0 2em;
}
a {
color: #2983ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
<p>
This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them
with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips this bloom
is better in quality and performance.
</p>
Model: <a href="https://sketchfab.com/models/d3f50a66fee74c6588dd9bc92f7fe7b3" target="_blank" rel="noopener">Primary Ion Drive</a> by
<a href="https://sketchfab.com/indierocktopus" target="_blank" rel="noopener">indierocktopus</a>, CC Attribution.<br/>
Details in <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Art Spotlight</a> blog post.
</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/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/GLTFLoader.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/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/LuminosityHighPassShader.js"></script>
<script src="js/postprocessing/UnrealBloomPass.js"></script>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them <br>
with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips this bloom <br>
is better in quality and performance.<br>
</div>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var scene, camera, controls, pointLight, stats;
var composer, renderer, mixer;
var container, stats;
var params = {
projection: 'normal',
background: false,
exposure: 0.9,
exposure: 1,
bloomStrength: 1.5,
bloomThreshold: 0.85,
bloomRadius: 0.4
bloomThreshold: 0,
bloomRadius: 0
};
var camera, scene, renderer, controls, objects = [];
var effectFXAA, bloomPass, renderScene;
var hdrCubeMap;
var composer;
var standardMaterial;
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, 35, 35 * 3.5 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x111111 );
renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.LinearToneMapping;
standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
color: 0xffffff,
metalness: 1.0
} );
var clock = new THREE.Clock();
var container = document.getElementById( 'container' );
var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = 0.0;
torusMesh1.castShadow = true;
torusMesh1.receiveShadow = true;
scene.add( torusMesh1 );
objects.push( torusMesh1 );
stats = new Stats();
container.appendChild( stats.dom );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( './textures/roughness_map.jpg', function ( map ) {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ReinhardToneMapping;
container.appendChild( renderer.domElement );
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;
scene = new THREE.Scene();
} );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 5, 2.5, -3.5 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
var genCubeUrls = function ( prefix, postfix ) {
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 0.1;
controls.maxDistance = 20;
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
scene.add( new THREE.AmbientLight( 0x404040 ) );
};
pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.copy( camera.position );
scene.add( pointLight );
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var renderScene = new THREE.RenderPass( scene, camera );
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
bloomPass.renderToScreen = true;
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( bloomPass );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
new THREE.GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
} );
var model = gltf.scene;
// Lights
scene.add( model );
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
// Mesh contains self-intersecting semi-transparent faces, which display
// z-fighting unless depthWrite is disabled.
var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
core.material.depthWrite = false;
var spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7;
spotLight.penumbra = 0.8;
spotLight.castShadow = true;
scene.add( spotLight );
mixer = new THREE.AnimationMixer( model );
var clip = gltf.animations[ 0 ];
mixer.clipAction( clip.optimize() ).play();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
animate();
renderScene = new THREE.RenderPass( scene, camera );
} );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
var gui = new dat.GUI();
bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
bloomPass.renderToScreen = true;
gui.add( params, 'exposure', 0.1, 2 );
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( effectFXAA );
composer.addPass( bloomPass );
gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
renderer.gammaInput = true;
renderer.gammaOutput = true;
bloomPass.threshold = Number( value );
stats = new Stats();
container.appendChild( stats.dom );
} );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 200;
gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
window.addEventListener( 'resize', onWindowResize, false );
bloomPass.strength = Number( value );
var gui = new dat.GUI();
} );
gui.add( params, 'exposure', 0.1, 2 );
gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
bloomPass.radius = Number( value );
bloomPass.threshold = Number( value );
} );
} );
gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
bloomPass.strength = Number( value );
} );
gui.add( params, 'bloomRadius', 0.0, 1.0 ).onChange( function ( value ) {
bloomPass.radius = Number( value );
} );
gui.open();
}
function onWindowResize() {
window.onresize = function () {
var width = window.innerWidth;
var height = window.innerHeight;
......@@ -227,61 +170,32 @@
renderer.setSize( width, height );
composer.setSize( width, height );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
};
//
function animate() {
requestAnimationFrame( animate );
stats.begin();
render();
stats.end();
}
const delta = clock.getDelta();
function render() {
mixer.update( delta );
controls.update( delta );
if ( standardMaterial !== undefined ) {
pointLight.position.copy( camera.position );
standardMaterial.roughness = 1.0;
standardMaterial.bumpScale = 0.25;
var newEnvMap = standardMaterial.envMap;
if ( hdrCubeRenderTarget ) newEnvMap = hdrCubeRenderTarget.texture;
if ( newEnvMap !== standardMaterial.envMap ) {
standardMaterial.envMap = newEnvMap;
standardMaterial.envMapIntensity = 1;
standardMaterial.needsUpdate = true;
}
}
stats.update();
renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
var timer = Date.now() * 0.00025;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
composer.render();
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或