Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 827e18d5 编写于 作者: M Mugen87
浏览文件
操作

Examples: More module examples.

上级 ba64657a
展开全部 隐藏空白更改
内联 并排
Showing with 2332 addition and 1983 deletion
examples/files.js
浏览文件 @ 827e18d5
......@@ -318,7 +318,6 @@ var files = {
"webgldeferred_animation"
],
"webgl2": [
"webgl2_loader_gltf",
"webgl2_materials_texture2darray",
"webgl2_materials_texture3d",
"webgl2_multisampled_renderbuffers",
......
examples/webgl2_loader_gltf.html 已删除 100644 → 0
浏览文件 @ ba64657a
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - glTF loader (module version)</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">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader (module version)<br />
Battle Damaged Sci-fi Helmet by
<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
</div>
<script type="module">
import {
CubeTextureLoader,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
var container, stats, controls;
var camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.9, 2.7 );
controls = new OrbitControls( camera );
controls.target.set( 0, - 0.2, - 0.2 );
controls.update();
scene = new Scene();
var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
var loader = new CubeTextureLoader().setPath( 'textures/cube/Bridge2/' );
loader.load( urls, function ( texture ) {
var pmremGenerator = new PMREMGenerator( texture );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
// model
var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap;
}
} );
scene.add( gltf.scene );
} );
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
scene.background = texture;
} );
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
// stats
stats = new Stats();
container.appendChild( stats.dom );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
examples/webgl2_materials_texture2darray.html
浏览文件 @ 827e18d5
......@@ -54,14 +54,25 @@
<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
</div>
<script src="../build/three.js"></script>
<!--<script src="js/controls/OrbitControls.js"></script>-->
<script src="js/libs/jszip.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/WebGL.js"></script>
<script>
<script type="module">
import {
DataTexture2DArray,
FileLoader,
Mesh,
PerspectiveCamera,
PlaneBufferGeometry,
RedFormat,
Scene,
ShaderMaterial,
Vector2,
UnsignedByteType,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
if ( WEBGL.isWebGL2Available() === false ) {
......@@ -84,40 +95,40 @@
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.z = 70;
scene = new THREE.Scene();
scene = new Scene();
// width 256, height 256, depth 109, 8-bit, zip archived raw data
new THREE.FileLoader()
new FileLoader()
.setResponseType( 'arraybuffer' )
.load( 'textures/3d/head256x256x109.zip', function ( data ) {
var zip = new JSZip( data );
var array = zip.files[ 'head256x256x109' ].asUint8Array();
var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
var texture = new DataTexture2DArray( array, 256, 256, 109 );
texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
texture.format = RedFormat;
texture.type = UnsignedByteType;
texture.needsUpdate = true;
var material = new THREE.ShaderMaterial( {
var material = new ShaderMaterial( {
uniforms: {
diffuse: { value: texture },
depth: { value: 0 },
size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
size: { value: new Vector2( planeWidth, planeHeight ) }
},
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );
var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
var geometry = new PlaneBufferGeometry( planeWidth, planeHeight );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
......@@ -128,7 +139,7 @@
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer = new WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/webgl2_materials_texture3d.html
浏览文件 @ 827e18d5
......@@ -13,19 +13,29 @@
</div>
<div id="inset"></div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/misc/Volume.js"></script>
<script src="js/loaders/NRRDLoader.js"></script>
<script src="js/shaders/VolumeShader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/gunzip.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
<script type="module">
import {
BackSide,
BoxBufferGeometry,
DataTexture3D,
FloatType,
LinearFilter,
Mesh,
OrthographicCamera,
RedFormat,
Scene,
ShaderMaterial,
TextureLoader,
UniformsUtils,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
import { VolumeRenderShader1 } from './jsm/shaders/VolumeShader.js';
if ( WEBGL.isWebGL2Available() === false ) {
......@@ -33,8 +43,7 @@
}
var container,
renderer,
var renderer,
scene,
camera,
controls,
......@@ -46,12 +55,12 @@
function init() {
scene = new THREE.Scene();
scene = new Scene();
// Create renderer
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer = new WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -59,26 +68,26 @@
// Create camera (The volume renderer does not work very well with perspective yet)
var h = 512; // frustum height
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera = new OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera.position.set( 0, 0, 128 );
camera.up.set( 0, 0, 1 ); // In our data, z is up
// Create controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 64, 64, 128 );
controls.minZoom = 0.5;
controls.maxZoom = 4;
controls.update();
// scene.add( new THREE.AxesHelper( 128 ) );
// scene.add( new AxesHelper( 128 ) );
// Lighting is baked into the shader a.t.m.
// var dirLight = new THREE.DirectionalLight( 0xffffff );
// var dirLight = new DirectionalLight( 0xffffff );
// The gui for interaction
volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
var gui = new dat.GUI();
var gui = new GUI();
gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
......@@ -86,29 +95,29 @@
gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
// Load the data ...
new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
new NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
// Texture to hold the volume. We have scalars, so we put our data in the red channel.
// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
// TODO: look the dtype up in the volume metadata
var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = THREE.RedFormat;
texture.type = THREE.FloatType;
texture.minFilter = texture.magFilter = THREE.LinearFilter;
var texture = new DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = RedFormat;
texture.type = FloatType;
texture.minFilter = texture.magFilter = LinearFilter;
texture.unpackAlignment = 1;
texture.needsUpdate = true;
// Colormap textures
cmtextures = {
viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
viridis: new TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new TextureLoader().load( 'textures/cm_gray.png', render )
};
// Material
var shader = THREE.VolumeRenderShader1;
var shader = VolumeRenderShader1;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
var uniforms = UniformsUtils.clone( shader.uniforms );
uniforms[ "u_data" ].value = texture;
uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
......@@ -117,18 +126,18 @@
uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
material = new THREE.ShaderMaterial( {
material = new ShaderMaterial( {
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
side: THREE.BackSide // The volume shader uses the backface as its "reference point"
side: BackSide // The volume shader uses the backface as its "reference point"
} );
// Mesh
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
var geometry = new BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
render();
......
examples/webgl2_multisampled_renderbuffers.html
浏览文件 @ 827e18d5
......@@ -33,16 +33,31 @@
<div id="container">
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script>
<script type="module">
import {
Clock,
Color,
DirectionalLight,
HemisphereLight,
PerspectiveCamera,
Fog,
Group,
IcosahedronBufferGeometry,
Mesh,
MeshStandardMaterial,
RGBFormat,
Scene,
Vector2,
WebGLRenderer,
WebGLMultisampleRenderTarget
} from "../build/three.module.js";
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
import { CopyShader } from './jsm/shaders/CopyShader.js';
if ( WEBGL.isWebGL2Available() === false ) {
......@@ -50,7 +65,7 @@
}
var camera, scene, renderer, clock, group;
var camera, scene, renderer, clock, group, container;
var composer1, composer2;
......@@ -59,37 +74,37 @@
function init() {
var container = document.getElementById( 'container' );
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
camera = new PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
scene = new Scene();
scene.background = new Color( 0xffffff );
scene.fog = new Fog( 0xcccccc, 100, 1500 );
clock = new THREE.Clock();
clock = new Clock();
//
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 1000, 0 );
scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
var dirLight = new DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( - 3000, 1000, - 1000 );
scene.add( dirLight );
//
group = new THREE.Group();
group = new Group();
var geometry = new THREE.IcosahedronBufferGeometry( 10, 2 );
var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
var geometry = new IcosahedronBufferGeometry( 10, 2 );
var material = new MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
for ( var i = 0; i < 100; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 500 - 250;
mesh.position.y = Math.random() * 500 - 250;
mesh.position.z = Math.random() * 500 - 250;
......@@ -105,7 +120,7 @@
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { antialias: false } );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer = new WebGLRenderer( { canvas: canvas, context: context } );
renderer.autoClear = false;
renderer.setSize( container.offsetWidth, container.offsetHeight );
container.appendChild( renderer.domElement );
......@@ -113,25 +128,25 @@
//
var parameters = {
format: THREE.RGBFormat,
format: RGBFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
var size = renderer.getDrawingBufferSize( new Vector2() );
var renderTarget = new WebGLMultisampleRenderTarget( size.width, size.height, parameters );
var renderPass = new THREE.RenderPass( scene, camera );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
var renderPass = new RenderPass( scene, camera );
var copyPass = new ShaderPass( CopyShader );
//
composer1 = new THREE.EffectComposer( renderer, renderTarget );
composer1 = new EffectComposer( renderer, renderTarget );
composer1.addPass( renderPass );
composer1.addPass( copyPass );
//
composer2 = new THREE.EffectComposer( renderer );
composer2 = new EffectComposer( renderer );
composer2.addPass( renderPass );
composer2.addPass( copyPass );
......@@ -146,9 +161,9 @@
camera.aspect = ( container.offsetWidth * 0.5 ) / container.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize( container.offsetWidth, container.offsetHeight );
composer1.setSize( container.offsetWidth, container.offsetHeight );
composer2.setSize( container.offsetWidth, container.offsetHeight );
renderer.setSize( container.offsetWidth, container.offsetHeight );
composer1.setSize( container.offsetWidth, container.offsetHeight );
composer2.setSize( container.offsetWidth, container.offsetHeight );
}
......
examples/webgl2_sandbox.html
浏览文件 @ 827e18d5
......@@ -10,20 +10,29 @@
<body>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl2 sandbox</div>
<script type="module">
<script src="js/WebGL.js"></script>
import { PerspectiveCamera } from '../src/cameras/PerspectiveCamera.js';
import { SphereBufferGeometry } from '../src/geometries/SphereGeometry.js';
import { MeshNormalMaterial } from '../src/materials/MeshNormalMaterial.js';
import { PointLight } from '../src/lights/PointLight.js';
import { Color } from '../src/math/Color.js';
import { Mesh } from '../src/objects/Mesh.js';
import { Fog } from '../src/scenes/Fog.js';
import { Scene } from '../src/scenes/Scene.js';
import { WebGLRenderer } from '../src/renderers/WebGLRenderer.js';
<script type="module">
import {
Color,
PerspectiveCamera,
Fog,
Mesh,
MeshNormalMaterial,
PointLight,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
//
var camera, scene, renderer;
......
examples/webgl_shader2.html
浏览文件 @ 827e18d5
......@@ -11,11 +11,6 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank" rel="noopener">Monjori by Mic</a></div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script id="fragment_shader4" type="x-shader/x-fragment">
uniform float time;
......@@ -136,13 +131,20 @@
</script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
BoxBufferGeometry,
Clock,
Mesh,
PerspectiveCamera,
RepeatWrapping,
Scene,
ShaderMaterial,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var container, stats;
......@@ -157,14 +159,14 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 4;
scene = new THREE.Scene();
scene = new Scene();
clock = new THREE.Clock();
clock = new Clock();
var geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
var geometry = new BoxBufferGeometry( 0.75, 0.75, 0.75 );
uniforms1 = {
"time": { value: 1.0 }
......@@ -172,10 +174,10 @@
uniforms2 = {
"time": { value: 1.0 },
"texture": { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
"texture": { value: new TextureLoader().load( 'textures/disturb.jpg' ) }
};
uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = THREE.RepeatWrapping;
uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = RepeatWrapping;
var params = [
[ 'fragment_shader1', uniforms1 ],
......@@ -186,7 +188,7 @@
for ( var i = 0; i < params.length; i ++ ) {
var material = new THREE.ShaderMaterial( {
var material = new ShaderMaterial( {
uniforms: params[ i ][ 1 ],
vertexShader: document.getElementById( 'vertexShader' ).textContent,
......@@ -194,14 +196,14 @@
} );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = i - ( params.length - 1 ) / 2;
mesh.position.y = i % 2 - 0.5;
scene.add( mesh );
}
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
......
examples/webgl_shaders_ocean.html
浏览文件 @ 827e18d5
......@@ -13,23 +13,32 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/objects/Water.js"></script>
<script src="js/objects/Sky.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
Color,
CubeCamera,
DirectionalLight,
DoubleSide,
Float32BufferAttribute,
IcosahedronBufferGeometry,
LinearMipMapLinearFilter,
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
RepeatWrapping,
Scene,
TextureLoader,
VertexColors,
WebGLRenderer
} from "../build/three.module.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 { Water } from './jsm/objects/Water.js';
import { Sky } from './jsm/objects/Sky.js';
var container, stats;
var camera, scene, renderer, light;
......@@ -44,37 +53,37 @@
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
scene = new THREE.Scene();
scene = new Scene();
//
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera = new PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 30, 30, 100 );
//
light = new THREE.DirectionalLight( 0xffffff, 0.8 );
light = new DirectionalLight( 0xffffff, 0.8 );
scene.add( light );
// Water
var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
var waterGeometry = new PlaneBufferGeometry( 10000, 10000 );
water = new THREE.Water(
water = new Water(
waterGeometry,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
waterNormals: new TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = texture.wrapT = RepeatWrapping;
} ),
alpha: 1.0,
......@@ -92,7 +101,7 @@
// Skybox
var sky = new THREE.Sky();
var sky = new Sky();
var uniforms = sky.material.uniforms;
......@@ -108,9 +117,9 @@
azimuth: 0.205
};
var cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );
var cubeCamera = new CubeCamera( 0.1, 1, 512 );
cubeCamera.renderTarget.texture.generateMipmaps = true;
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
cubeCamera.renderTarget.texture.minFilter = LinearMipMapLinearFilter;
scene.background = cubeCamera.renderTarget;
......@@ -134,11 +143,11 @@
//
var geometry = new THREE.IcosahedronBufferGeometry( 20, 1 );
var geometry = new IcosahedronBufferGeometry( 20, 1 );
var count = geometry.attributes.position.count;
var colors = [];
var color = new THREE.Color();
var color = new Color();
for ( var i = 0; i < count; i += 3 ) {
......@@ -150,22 +159,22 @@
}
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
var material = new THREE.MeshStandardMaterial( {
vertexColors: THREE.VertexColors,
var material = new MeshStandardMaterial( {
vertexColors: VertexColors,
roughness: 0.0,
flatShading: true,
envMap: cubeCamera.renderTarget.texture,
side: THREE.DoubleSide
side: DoubleSide
} );
sphere = new THREE.Mesh( geometry, material );
sphere = new Mesh( geometry, material );
scene.add( sphere );
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 10, 0 );
controls.minDistance = 40.0;
......@@ -179,7 +188,7 @@
// GUI
var gui = new dat.GUI();
var gui = new GUI();
var folder = gui.addFolder( 'Sky' );
folder.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
......
examples/webgl_shaders_ocean2.html
浏览文件 @ 827e18d5
......@@ -7,41 +7,28 @@
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean simulation<br/>
current simulation framebuffers type is <span id="type-status"></span><br/>
change type to <span id="change-type"></span>
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean simulation
</div>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/shaders/OceanShaders.js"></script>
<script src="js/misc/Ocean.js"></script>
<script type="module">
import {
PerspectiveCamera,
Scene,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
<script>
var stats = new Stats();
document.body.appendChild( stats.dom );
import Stats from './jsm/libs/stats.module.js';
var lastTime = ( new Date() ).getTime();
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { Ocean } from './jsm/misc/Ocean.js';
var types = { 'float': 'half-float', 'half-float': 'float' };
var hash = document.location.hash.substr( 1 );
if ( ! ( hash in types ) ) hash = 'half-float';
document.getElementById( 'type-status' ).innerHTML = hash;
document.getElementById( 'change-type' ).innerHTML = '<a href="#" onclick="return change(\'' + types[ hash ] + '\')">' + types[ hash ] + '</a>';
var stats = new Stats();
document.body.appendChild( stats.dom );
var lastTime = ( new Date() ).getTime();
function change( n ) {
location.hash = n;
location.reload();
return false;
}
var DEMO = {
ms_Renderer: null,
ms_Camera: null,
......@@ -51,21 +38,21 @@
Initialize: function () {
this.ms_Renderer = new THREE.WebGLRenderer();
this.ms_Renderer = new WebGLRenderer();
this.ms_Renderer.setPixelRatio( window.devicePixelRatio );
this.ms_Renderer.context.getExtension( 'OES_texture_float' );
this.ms_Renderer.context.getExtension( 'OES_texture_float_linear' );
document.body.appendChild( this.ms_Renderer.domElement );
this.ms_Scene = new THREE.Scene();
this.ms_Scene = new Scene();
this.ms_Camera = new THREE.PerspectiveCamera( 55.0, window.innerWidth / window.innerHeight, 0.5, 300000 );
this.ms_Camera = new PerspectiveCamera( 55.0, window.innerWidth / window.innerHeight, 0.5, 300000 );
this.ms_Camera.position.set( 450, 350, 450 );
this.ms_Camera.lookAt( 0, 0, 0 );
// Initialize Orbit control
this.ms_Controls = new THREE.OrbitControls( this.ms_Camera, this.ms_Renderer.domElement );
this.ms_Controls = new OrbitControls( this.ms_Camera, this.ms_Renderer.domElement );
this.ms_Controls.userPan = false;
this.ms_Controls.userPanSpeed = 0.0;
this.ms_Controls.minDistance = 0;
......@@ -78,17 +65,17 @@
var gres = res / 2;
var origx = - gsize / 2;
var origz = - gsize / 2;
this.ms_Ocean = new THREE.Ocean( this.ms_Renderer, this.ms_Camera, this.ms_Scene,
this.ms_Ocean = new Ocean( this.ms_Renderer, this.ms_Camera, this.ms_Scene,
{
USE_HALF_FLOAT: hash === 'half-float',
USE_HALF_FLOAT: false,
INITIAL_SIZE: 256.0,
INITIAL_WIND: [ 10.0, 10.0 ],
INITIAL_CHOPPINESS: 1.5,
CLEAR_COLOR: [ 1.0, 1.0, 1.0, 0.0 ],
GEOMETRY_ORIGIN: [ origx, origz ],
SUN_DIRECTION: [ - 1.0, 1.0, 1.0 ],
OCEAN_COLOR: new THREE.Vector3( 0.004, 0.016, 0.047 ),
SKY_COLOR: new THREE.Vector3( 3.2, 9.6, 12.8 ),
OCEAN_COLOR: new Vector3( 0.004, 0.016, 0.047 ),
SKY_COLOR: new Vector3( 3.2, 9.6, 12.8 ),
EXPOSURE: 0.35,
GEOMETRY_RESOLUTION: gres,
GEOMETRY_SIZE: gsize,
......@@ -100,7 +87,7 @@
this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ] = { value: this.ms_Camera.position };
this.ms_Scene.add( this.ms_Ocean.oceanMesh );
var gui = new dat.GUI();
var gui = new GUI();
gui.add( this.ms_Ocean, "size", 100, 5000 ).onChange( function ( v ) {
this.object.size = v;
......@@ -188,7 +175,6 @@
this.ms_Ocean.materialOcean.uniforms[ "u_viewMatrix" ].value = this.ms_Camera.matrixWorldInverse;
this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ].value = this.ms_Camera.position;
this.ms_Ocean.materialOcean.depthTest = true;
//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
this.Display();
},
......
examples/webgl_shaders_sky.html
浏览文件 @ 827e18d5
......@@ -14,21 +14,20 @@
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/objects/Sky.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
GridHelper,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { Sky } from './jsm/objects/Sky.js';
var camera, controls, scene, renderer;
......@@ -40,14 +39,14 @@
function initSky() {
// Add Sky
sky = new THREE.Sky();
sky = new Sky();
sky.scale.setScalar( 450000 );
scene.add( sky );
// Add Sun Helper
sunSphere = new THREE.Mesh(
new THREE.SphereBufferGeometry( 20000, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
sunSphere = new Mesh(
new SphereBufferGeometry( 20000, 16, 8 ),
new MeshBasicMaterial( { color: 0xffffff } )
);
sunSphere.position.y = - 700000;
sunSphere.visible = false;
......@@ -92,7 +91,7 @@
}
var gui = new dat.GUI();
var gui = new GUI();
gui.add( effectController, "turbidity", 1.0, 20.0, 0.1 ).onChange( guiChanged );
gui.add( effectController, "rayleigh", 0.0, 4, 0.001 ).onChange( guiChanged );
......@@ -109,22 +108,22 @@
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
camera.position.set( 0, 100, 2000 );
//camera.setLens(20);
scene = new THREE.Scene();
scene = new Scene();
var helper = new THREE.GridHelper( 10000, 2, 0xffffff, 0xffffff );
var helper = new GridHelper( 10000, 2, 0xffffff, 0xffffff );
scene.add( helper );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
//controls.maxPolarAngle = Math.PI / 2;
controls.enableZoom = false;
......
examples/webgl_shaders_tonemapping.html
浏览文件 @ 827e18d5
......@@ -36,32 +36,45 @@
</div>
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/LuminosityShader.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/ToneMapShader.js"></script>
<script src="js/shaders/GammaCorrectionShader.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/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/AdaptiveToneMappingPass.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AdditiveBlending,
AmbientLight,
BackSide,
CubeTextureLoader,
DirectionalLight,
FloatType,
LinearFilter,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
NormalBlending,
NoBlending,
OrthographicCamera,
PerspectiveCamera,
PlaneBufferGeometry,
RGBAFormat,
RGBFormat,
Scene,
ShaderChunk,
ShaderMaterial,
SphereBufferGeometry,
TextureLoader,
UniformsLib,
UniformsUtils,
WebGLRenderer,
WebGLRenderTarget
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
import { AdaptiveToneMappingPass } from './jsm/postprocessing/AdaptiveToneMappingPass.js';
import { BloomPass } from './jsm/postprocessing/BloomPass.js';
import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
var container;
......@@ -104,51 +117,51 @@
// CAMERAS
camera = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 0.1, 100000 );
camera = new PerspectiveCamera( 70, windowThirdX / window.innerHeight, 0.1, 100000 );
camera.position.x = 700;
camera.position.y = 400;
camera.position.z = 800;
cameraCube = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 1, 100000 );
cameraCube = new PerspectiveCamera( 70, windowThirdX / window.innerHeight, 1, 100000 );
cameraBG = new THREE.OrthographicCamera( - windowHalfX, windowHalfX, windowHalfY, - windowHalfY, - 10000, 10000 );
cameraBG = new OrthographicCamera( - windowHalfX, windowHalfX, windowHalfY, - windowHalfY, - 10000, 10000 );
cameraBG.position.z = 100;
orbitControls = new THREE.OrbitControls( camera, container );
orbitControls = new OrbitControls( camera, container );
orbitControls.autoRotate = true;
orbitControls.autoRotateSpeed = 1;
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
debugScene = new THREE.Scene();
scene = new Scene();
sceneCube = new Scene();
debugScene = new Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x050505 );
var ambient = new AmbientLight( 0x050505 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, params.sunLight );
directionalLight = new DirectionalLight( 0xffffff, params.sunLight );
directionalLight.position.set( 2, 0, 10 ).normalize();
scene.add( directionalLight );
var atmoShader = {
side: THREE.BackSide,
// blending: THREE.AdditiveBlending,
side: BackSide,
// blending: AdditiveBlending,
transparent: true,
lights: true,
uniforms: THREE.UniformsUtils.merge( [
uniforms: UniformsUtils.merge( [
THREE.UniformsLib[ "common" ],
THREE.UniformsLib[ "lights" ]
UniformsLib[ "common" ],
UniformsLib[ "lights" ]
] ),
vertexShader: [
"varying vec3 vViewPosition;",
"varying vec3 vNormal;",
"void main() {",
THREE.ShaderChunk[ "beginnormal_vertex" ],
THREE.ShaderChunk[ "defaultnormal_vertex" ],
ShaderChunk[ "beginnormal_vertex" ],
ShaderChunk[ "defaultnormal_vertex" ],
" vNormal = normalize( transformedNormal );",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
......@@ -160,10 +173,10 @@
fragmentShader: [
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "bsdfs" ],
THREE.ShaderChunk[ "lights_pars_begin" ],
THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
ShaderChunk[ "common" ],
ShaderChunk[ "bsdfs" ],
ShaderChunk[ "lights_pars_begin" ],
ShaderChunk[ "lights_phong_pars_fragment" ],
"void main() {",
"vec3 normal = normalize( -vNormal );",
......@@ -195,14 +208,14 @@
].join( "\n" )
};
var earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
var earthAtmoMat = new ShaderMaterial( atmoShader );
var earthMat = new THREE.MeshPhongMaterial( {
var earthMat = new MeshPhongMaterial( {
color: 0xffffff,
shininess: 200
} );
var textureLoader = new THREE.TextureLoader();
var textureLoader = new TextureLoader();
textureLoader.load( 'textures/planets/earth_atmos_4096.jpg', function ( tex ) {
......@@ -224,9 +237,9 @@
var earthLights = textureLoader.load( 'textures/planets/earth_lights_2048.png' );
var earthLightsMat = new THREE.MeshBasicMaterial( {
var earthLightsMat = new MeshBasicMaterial( {
color: 0xffffff,
blending: THREE.AdditiveBlending,
blending: AdditiveBlending,
transparent: true,
depthTest: false,
map: earthLights,
......@@ -235,26 +248,26 @@
var clouds = textureLoader.load( 'textures/planets/earth_clouds_2048.png' );
var earthCloudsMat = new THREE.MeshLambertMaterial( {
var earthCloudsMat = new MeshLambertMaterial( {
color: 0xffffff,
blending: THREE.NormalBlending,
blending: NormalBlending,
transparent: true,
depthTest: false,
map: clouds
} );
var earthGeo = new THREE.SphereBufferGeometry( 600, 24, 24 );
var sphereMesh = new THREE.Mesh( earthGeo, earthMat );
var earthGeo = new SphereBufferGeometry( 600, 24, 24 );
var sphereMesh = new Mesh( earthGeo, earthMat );
scene.add( sphereMesh );
var sphereLightsMesh = new THREE.Mesh( earthGeo, earthLightsMat );
var sphereLightsMesh = new Mesh( earthGeo, earthLightsMat );
scene.add( sphereLightsMesh );
var sphereCloudsMesh = new THREE.Mesh( earthGeo, earthCloudsMat );
var sphereCloudsMesh = new Mesh( earthGeo, earthCloudsMat );
scene.add( sphereCloudsMesh );
var sphereAtmoMesh = new THREE.Mesh( earthGeo, earthAtmoMat );
var sphereAtmoMesh = new Mesh( earthGeo, earthAtmoMat );
sphereAtmoMesh.scale.set( 1.05, 1.05, 1.05 );
scene.add( sphereAtmoMesh );
......@@ -285,7 +298,7 @@
].join( "\n" );
// Skybox
adaptiveLuminanceMat = new THREE.ShaderMaterial( {
adaptiveLuminanceMat = new ShaderMaterial( {
uniforms: {
"map": { value: null }
},
......@@ -293,10 +306,10 @@
fragmentShader: pBGShader,
depthTest: false,
// color: 0xffffff
blending: THREE.NoBlending
blending: NoBlending
} );
currentLuminanceMat = new THREE.ShaderMaterial( {
currentLuminanceMat = new ShaderMaterial( {
uniforms: {
"map": { value: null }
},
......@@ -304,16 +317,16 @@
fragmentShader: pBGShader,
depthTest: false
// color: 0xffffff
// blending: THREE.NoBlending
// blending: NoBlending
} );
var quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
var quadBG = new Mesh( new PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
quadBG.position.z = - 500;
quadBG.position.x = - window.innerWidth * 0.5 + window.innerWidth * 0.05;
quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
debugScene.add( quadBG );
quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), adaptiveLuminanceMat );
quadBG = new Mesh( new PlaneBufferGeometry( 0.1, 0.1 ), adaptiveLuminanceMat );
quadBG.position.z = - 500;
quadBG.position.x = - window.innerWidth * 0.5 + window.innerWidth * 0.15;
quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
......@@ -324,12 +337,12 @@
r + "dark-s_py.jpg", r + "dark-s_ny.jpg",
r + "dark-s_pz.jpg", r + "dark-s_nz.jpg" ];
var textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube.format = THREE.RGBFormat;
var textureCube = new CubeTextureLoader().load( urls );
textureCube.format = RGBFormat;
sceneCube.background = textureCube;
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
......@@ -342,37 +355,36 @@
// var width = window.innerWidth || 1;
var height = window.innerHeight || 1;
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
var regularRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
ldrEffectComposer = new THREE.EffectComposer( renderer, regularRenderTarget );
var parameters = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat, stencilBuffer: false };
var regularRenderTarget = new WebGLRenderTarget( windowThirdX, height, parameters );
ldrEffectComposer = new EffectComposer( renderer, regularRenderTarget );
if ( renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
parameters.type = THREE.FloatType;
parameters.type = FloatType;
}
var hdrRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
dynamicHdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
var hdrRenderTarget = new WebGLRenderTarget( windowThirdX, height, parameters );
dynamicHdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
dynamicHdrEffectComposer.setSize( window.innerWidth, window.innerHeight );
hdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
hdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
var debugPass = new THREE.RenderPass( debugScene, cameraBG );
var debugPass = new RenderPass( debugScene, cameraBG );
debugPass.clear = false;
var scenePass = new THREE.RenderPass( scene, camera, undefined, undefined, undefined );
var skyboxPass = new THREE.RenderPass( sceneCube, cameraCube );
var scenePass = new RenderPass( scene, camera, undefined, undefined, undefined );
var skyboxPass = new RenderPass( sceneCube, cameraCube );
scenePass.clear = false;
adaptToneMappingPass = new THREE.AdaptiveToneMappingPass( true, 256 );
adaptToneMappingPass = new AdaptiveToneMappingPass( true, 256 );
adaptToneMappingPass.needsSwap = true;
ldrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
hdrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
bloomPass = new THREE.BloomPass();
var gammaCorrectionPass = new THREE.ShaderPass( THREE.GammaCorrectionShader );
ldrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
hdrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
bloomPass = new BloomPass();
var gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );
dynamicHdrEffectComposer.addPass( skyboxPass );
dynamicHdrEffectComposer.addPass( scenePass );
dynamicHdrEffectComposer.addPass( adaptToneMappingPass );
// dynamicHdrEffectComposer.addPass( debugPass );
dynamicHdrEffectComposer.addPass( bloomPass );
dynamicHdrEffectComposer.addPass( gammaCorrectionPass );
......@@ -388,12 +400,8 @@
ldrEffectComposer.addPass( bloomPass );
ldrEffectComposer.addPass( gammaCorrectionPass );
// var gammaPass = new THREE.ShaderPass( GammaShader );
// ldrEffectComposer.addPass( gammaPass );
var gui = new dat.GUI();
var gui = new GUI();
// dynamicHdrGui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
var sceneGui = gui.addFolder( 'Scenes' );
var toneMappingGui = gui.addFolder( 'ToneMapping' );
var staticToneMappingGui = gui.addFolder( 'StaticOnly' );
......
examples/webgl_shaders_vector.html
浏览文件 @ 827e18d5
......@@ -19,10 +19,6 @@
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Resolution-Independent Vector Fonts. <a href="https://github.com/mrdoob/three.js/issues/4746">info</a>.
</div>
<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script type="x-shader/x-fragment" id="fs">
......@@ -62,8 +58,30 @@
</script>
<script>
<script type="module">
import {
BufferGeometry,
Color,
DoubleSide,
Float32BufferAttribute,
FontLoader,
Group,
LineCurve,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
QuadraticBezierCurve,
Scene,
Shape,
ShapeBufferGeometry,
ShaderMaterial,
Vector2,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var stats;
......@@ -71,7 +89,7 @@
var group;
var loader = new THREE.FontLoader();
var loader = new FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
init( font );
......@@ -81,35 +99,35 @@
function init( font ) {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 50, 100, 500 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
var theText = '&'; // i % & j b 8
group = new THREE.Group();
group = new Group();
scene.add( group );
var textMaterial = new THREE.MeshBasicMaterial( {
color: new THREE.Color( 0, 0, 1 ),
side: THREE.DoubleSide,
var textMaterial = new MeshBasicMaterial( {
color: new Color( 0, 0, 1 ),
side: DoubleSide,
wireframe: true
} );
var textShapes = font.generateShapes( theText, 180 );
var geometry = new THREE.ShapeBufferGeometry( textShapes );
var geometry = new ShapeBufferGeometry( textShapes );
var text = new THREE.Mesh( geometry, textMaterial );
var text = new Mesh( geometry, textMaterial );
text.position.x = - 200;
group.add( text );
//
var vA = new THREE.Vector2();
var vB = new THREE.Vector2();
var vA = new Vector2();
var vB = new Vector2();
function processShape( path ) {
......@@ -127,12 +145,12 @@
for ( var i = 0; i < path.length; i ++ ) {
var curve = path[ i ];
if ( curve instanceof THREE.LineCurve ) {
if ( curve instanceof LineCurve ) {
pts.push( curve.v2 );
pts2.push( curve.v2 );
} else if ( curve instanceof THREE.QuadraticBezierCurve ) {
} else if ( curve instanceof QuadraticBezierCurve ) {
vA = vA.subVectors( curve.v1, curve.v0 );
vB = vB.subVectors( curve.v2, curve.v1 );
......@@ -193,8 +211,8 @@
beziers = beziers.concat( process.beziers );
invert = invert.concat( process.invert );
convexhullShape = new THREE.Shape( pts );
solidShape = new THREE.Shape( pts2 );
convexhullShape = new Shape( pts );
solidShape = new Shape( pts2 );
convexhullShapeGroup.push( convexhullShape );
solidShapeGroup.push( solidShape );
......@@ -210,14 +228,14 @@
beziers = beziers.concat( process.beziers );
invert = invert.concat( process.invert );
convexhullShape.holes.push( new THREE.Shape( pts ) );
solidShape.holes.push( new THREE.Shape( pts2 ) );
convexhullShape.holes.push( new Shape( pts ) );
solidShape.holes.push( new Shape( pts2 ) );
}
} // end of subshape
var bezierGeometry = new THREE.BufferGeometry();
var bezierGeometry = new BufferGeometry();
var vertices = [];
var uvs = [];
......@@ -234,34 +252,34 @@
}
bezierGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
bezierGeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
bezierGeometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
bezierGeometry.addAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
bezierGeometry.addAttribute( 'invert', new Float32BufferAttribute( invert, 1 ) );
geometry = new THREE.ShapeBufferGeometry( convexhullShapeGroup );
geometry = new ShapeBufferGeometry( convexhullShapeGroup );
text = new THREE.Mesh( geometry, textMaterial );
text = new Mesh( geometry, textMaterial );
text.position.x = 200;
group.add( text );
geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
geometry = new ShapeBufferGeometry( solidShapeGroup );
text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( 1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
text = new Mesh( geometry, new MeshBasicMaterial( { color: new Color( 1, 0, 0 ), side: DoubleSide, wireframe: true } ) );
text.position.x = 200;
group.add( text );
//
var newMaterial = new THREE.ShaderMaterial( {
var newMaterial = new ShaderMaterial( {
uniforms: {
color: { value: new THREE.Color( 0.45 * 0xffffff ) }
color: { value: new Color( 0.45 * 0xffffff ) }
},
vertexShader: document.getElementById( 'vs' ).textContent,
fragmentShader: document.getElementById( 'fs' ).textContent,
side: THREE.DoubleSide
side: DoubleSide
} );
text = new THREE.Mesh( bezierGeometry, newMaterial );
text = new Mesh( bezierGeometry, newMaterial );
text.rotation.y = Math.PI * 2;
group.add( text );
......@@ -269,21 +287,21 @@
//
geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
geometry = new ShapeBufferGeometry( solidShapeGroup );
text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
text = new Mesh( geometry, new MeshBasicMaterial( { color: 0.45 * 0xffffff, side: DoubleSide } ) );
text.rotation.y = Math.PI * 2;
group.add( text );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 50, 100, 0 );
controls.update();
......
examples/webgl_shading_physical.html
浏览文件 @ 827e18d5
......@@ -12,17 +12,38 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl physically based shading testbed
</div>
<script src="../build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
<script>
<script type="module">
import {
AmbientLight,
AnimationMixer,
BoxBufferGeometry,
CameraHelper,
Clock,
CubeCamera,
Fog,
LightShadow,
Mesh,
MeshPhongMaterial,
NearestFilter,
PCFSoftShadowMap,
PerspectiveCamera,
PlaneBufferGeometry,
PointLight,
RepeatWrapping,
RGBFormat,
Scene,
SphereBufferGeometry,
SpotLight,
TextureLoader,
TorusBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
var container, stats;
......@@ -38,7 +59,7 @@
var mixer;
var clock = new THREE.Clock();
var clock = new Clock();
var gui, shadowCameraHelper, shadowConfig = {
......@@ -60,49 +81,49 @@
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 2, 10000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 2, 10000 );
camera.position.set( 500, 400, 1200 );
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0, 1000, 10000 );
scene = new Scene();
scene.fog = new Fog( 0, 1000, 10000 );
// CUBE CAMERA
cubeCamera = new THREE.CubeCamera( 1, 10000, 128 );
cubeCamera = new CubeCamera( 1, 10000, 128 );
// TEXTURES
var textureLoader = new THREE.TextureLoader();
var textureLoader = new TextureLoader();
var textureSquares = textureLoader.load( "textures/patterns/bright_squares256.png" );
textureSquares.repeat.set( 50, 50 );
textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
textureSquares.magFilter = THREE.NearestFilter;
textureSquares.format = THREE.RGBFormat;
textureSquares.wrapS = textureSquares.wrapT = RepeatWrapping;
textureSquares.magFilter = NearestFilter;
textureSquares.format = RGBFormat;
var textureNoiseColor = textureLoader.load( "textures/disturb.jpg" );
textureNoiseColor.repeat.set( 1, 1 );
textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
textureNoiseColor.format = THREE.RGBFormat;
textureNoiseColor.wrapS = textureNoiseColor.wrapT = RepeatWrapping;
textureNoiseColor.format = RGBFormat;
var textureLava = textureLoader.load( "textures/lava/lavatile.jpg" );
textureLava.repeat.set( 6, 2 );
textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
textureLava.format = THREE.RGBFormat;
textureLava.wrapS = textureLava.wrapT = RepeatWrapping;
textureLava.format = RGBFormat;
// GROUND
var groundMaterial = new THREE.MeshPhongMaterial( {
var groundMaterial = new MeshPhongMaterial( {
shininess: 80,
color: 0xffffff,
specular: 0xffffff,
map: textureSquares
} );
var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var planeGeometry = new PlaneBufferGeometry( 100, 100 );
var ground = new THREE.Mesh( planeGeometry, groundMaterial );
var ground = new Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, 0, 0 );
ground.rotation.x = - Math.PI / 2;
ground.scale.set( 1000, 1000, 1000 );
......@@ -111,15 +132,15 @@
// MATERIALS
var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget.texture } );
var materialLambert = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
var materialPhong = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
var materialPhongCube = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget.texture } );
// OBJECTS
var sphereGeometry = new THREE.SphereBufferGeometry( 100, 64, 32 );
var torusGeometry = new THREE.TorusBufferGeometry( 240, 60, 32, 64 );
var cubeGeometry = new THREE.BoxBufferGeometry( 150, 150, 150 );
var sphereGeometry = new SphereBufferGeometry( 100, 64, 32 );
var torusGeometry = new TorusBufferGeometry( 240, 60, 32, 64 );
var cubeGeometry = new BoxBufferGeometry( 150, 150, 150 );
addObject( torusGeometry, materialPhong, 0, 100, 0, 0 );
addObject( cubeGeometry, materialLambert, 350, 75, 300, 0 );
......@@ -129,7 +150,7 @@
function addObjectColor( geometry, color, x, y, z, ry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var material = new MeshPhongMaterial( { color: 0xffffff } );
return addObject( geometry, material, x, y, z, ry );
......@@ -137,7 +158,7 @@
function addObject( geometry, material, x, y, z, ry ) {
var tmpMesh = new THREE.Mesh( geometry, material );
var tmpMesh = new Mesh( geometry, material );
tmpMesh.material.color.offsetHSL( 0.1, - 0.1, 0 );
......@@ -154,9 +175,9 @@
}
var bigCube = new THREE.BoxBufferGeometry( 50, 500, 50 );
var midCube = new THREE.BoxBufferGeometry( 50, 200, 50 );
var smallCube = new THREE.BoxBufferGeometry( 100, 100, 100 );
var bigCube = new BoxBufferGeometry( 50, 500, 50 );
var midCube = new BoxBufferGeometry( 50, 200, 50 );
var smallCube = new BoxBufferGeometry( 100, 100, 100 );
addObjectColor( bigCube, 0xff0000, - 500, 250, 0, 0 );
addObjectColor( smallCube, 0xff0000, - 500, 50, - 150, 0 );
......@@ -170,20 +191,20 @@
addObjectColor( midCube, 0xff00ff, 0, 100, 500, 0 );
addObjectColor( smallCube, 0xff00ff, - 150, 50, 500, 0 );
addObjectColor( new THREE.BoxBufferGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI / 4 );
addObjectColor( new THREE.BoxBufferGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
addObjectColor( new BoxBufferGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI / 4 );
addObjectColor( new BoxBufferGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
addObjectColor( new THREE.SphereBufferGeometry( 100, 32, 26 ), 0xffffff, - 300, 100, 300, 0 );
addObjectColor( new SphereBufferGeometry( 100, 32, 26 ), 0xffffff, - 300, 100, 300, 0 );
// MORPHS
var loader = new THREE.GLTFLoader();
var loader = new GLTFLoader();
loader.load( "models/gltf/SittingBox.glb", function ( gltf ) {
var mesh = gltf.scene.children[ 0 ];
mixer = new THREE.AnimationMixer( mesh );
mixer = new AnimationMixer( mesh );
mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 10 ).play();
......@@ -202,31 +223,31 @@
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x3f2806 );
ambientLight = new AmbientLight( 0x3f2806 );
scene.add( ambientLight );
pointLight = new THREE.PointLight( 0xffaa00, 1, 5000 );
pointLight = new PointLight( 0xffaa00, 1, 5000 );
scene.add( pointLight );
sunLight = new THREE.SpotLight( 0xffffff, 0.3, 0, Math.PI / 2 );
sunLight = new SpotLight( 0xffffff, 0.3, 0, Math.PI / 2 );
sunLight.position.set( 1000, 2000, 1000 );
sunLight.castShadow = true;
sunLight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( shadowConfig.shadowCameraFov, 1, shadowConfig.shadowCameraNear, shadowConfig.shadowCameraFar ) );
sunLight.shadow = new LightShadow( new PerspectiveCamera( shadowConfig.shadowCameraFov, 1, shadowConfig.shadowCameraNear, shadowConfig.shadowCameraFar ) );
sunLight.shadow.bias = shadowConfig.shadowBias;
scene.add( sunLight );
// SHADOW CAMERA HELPER
shadowCameraHelper = new THREE.CameraHelper( sunLight.shadow.camera );
shadowCameraHelper = new CameraHelper( sunLight.shadow.camera );
shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
scene.add( shadowCameraHelper );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -234,7 +255,7 @@
//
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.type = PCFSoftShadowMap;
//
......@@ -243,7 +264,7 @@
//
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
controls.target.set( 0, 120, 0 );
controls.rotateSpeed = 1.0;
......@@ -270,7 +291,7 @@
// GUI
gui = new dat.GUI( { width: 400 } );
gui = new GUI( { width: 400 } );
// SHADOW
......
examples/webgl_shadowmap.html
浏览文件 @ 827e18d5
......@@ -15,24 +15,32 @@
t: toggle HUD
</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
<script src="js/utils/ShadowMapViewer.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
AnimationMixer,
BoxBufferGeometry,
Clock,
Color,
Fog,
FontLoader,
LightShadow,
Mesh,
MeshPhongMaterial,
PCFShadowMap,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
SpotLight,
TextBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
......@@ -50,7 +58,7 @@
var light;
var lightShadowMapViewer;
var clock = new THREE.Clock();
var clock = new Clock();
var showHUD = false;
......@@ -65,16 +73,16 @@
// CAMERA
camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera = new PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera.position.set( 700, 50, 1900 );
// SCENE
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x59472b );
scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
scene = new Scene();
scene.background = new Color( 0x59472b );
scene.fog = new Fog( 0x59472b, 1000, FAR );
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.lookSpeed = 0.0125;
controls.movementSpeed = 500;
......@@ -85,16 +93,16 @@
// LIGHTS
var ambient = new THREE.AmbientLight( 0x444444 );
var ambient = new AmbientLight( 0x444444 );
scene.add( ambient );
light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
light = new SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
light.position.set( 0, 1500, 1000 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 1200, 2500 ) );
light.shadow = new LightShadow( new PerspectiveCamera( 50, 1, 1200, 2500 ) );
light.shadow.bias = 0.0001;
light.shadow.mapSize.width = SHADOW_MAP_WIDTH;
......@@ -107,7 +115,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......@@ -119,7 +127,7 @@
//
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
renderer.shadowMap.type = PCFShadowMap;
// STATS
......@@ -161,7 +169,7 @@
function createHUD() {
lightShadowMapViewer = new THREE.ShadowMapViewer( light );
lightShadowMapViewer = new ShadowMapViewer( light );
lightShadowMapViewer.position.x = 10;
lightShadowMapViewer.position.y = SCREEN_HEIGHT - ( SHADOW_MAP_HEIGHT / 4 ) - 10;
lightShadowMapViewer.size.width = SHADOW_MAP_WIDTH / 4;
......@@ -174,10 +182,10 @@
// GROUND
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
var geometry = new PlaneBufferGeometry( 100, 100 );
var planeMaterial = new MeshPhongMaterial( { color: 0xffb851 } );
var ground = new THREE.Mesh( geometry, planeMaterial );
var ground = new Mesh( geometry, planeMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = - Math.PI / 2;
......@@ -190,10 +198,10 @@
// TEXT
var loader = new THREE.FontLoader();
var loader = new FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
var textGeo = new TextBufferGeometry( "THREE.JS", {
font: font,
......@@ -210,9 +218,9 @@
textGeo.computeBoundingBox();
var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
var textMaterial = new MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
var mesh = new Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
......@@ -225,7 +233,7 @@
// CUBES
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
var mesh = new Mesh( new BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
......@@ -235,7 +243,7 @@
scene.add( mesh );
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
var mesh = new Mesh( new BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
......@@ -247,7 +255,7 @@
// MORPHS
mixer = new THREE.AnimationMixer( scene );
mixer = new AnimationMixer( scene );
function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor ) {
......@@ -280,7 +288,7 @@
}
var loader = new THREE.GLTFLoader();
var loader = new GLTFLoader();
loader.load( "models/gltf/Horse.glb", function ( gltf ) {
......
examples/webgl_shadowmap_pcss.html
浏览文件 @ 827e18d5
......@@ -19,12 +19,6 @@
<body>
<div id="info">Percent Closer Soft-Shadows (PCSS) by <a href="http://eduperiment.com">spidersharma03</a></div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script type="x-shader/x-fragment" id="PCSS">
#define LIGHT_WORLD_SIZE 0.005
......@@ -120,13 +114,27 @@
</script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
CameraHelper,
DirectionalLight,
Fog,
Group,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
ShaderChunk,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var container, stats;
var camera, scene, renderer;
......@@ -143,21 +151,21 @@
// scene
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xcce0ff, 5, 100 );
scene = new Scene();
scene.fog = new Fog( 0xcce0ff, 5, 100 );
// camera
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 5;
camera.position.z = 15;
scene.add( camera );
// lights
scene.add( new THREE.AmbientLight( 0x666666 ) );
scene.add( new AmbientLight( 0x666666 ) );
var light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
var light = new DirectionalLight( 0xdfebff, 1.75 );
light.position.set( 2, 8, 4 );
light.castShadow = true;
......@@ -167,21 +175,21 @@
scene.add( light );
// scene.add( new THREE.DirectionalLightHelper( light ) );
scene.add( new THREE.CameraHelper( light.shadow.camera ) );
// scene.add( new DirectionalLightHelper( light ) );
scene.add( new CameraHelper( light.shadow.camera ) );
// group
group = new THREE.Group();
group = new Group();
scene.add( group );
var geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );
var geometry = new SphereBufferGeometry( 0.3, 20, 20 );
for ( var i = 0; i < 20; i ++ ) {
var material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );
var material = new MeshPhongMaterial( { color: Math.random() * 0xffffff } );
var sphere = new THREE.Mesh( geometry, material );
var sphere = new Mesh( geometry, material );
sphere.position.x = Math.random() - 0.5;
sphere.position.z = Math.random() - 0.5;
sphere.position.normalize();
......@@ -195,16 +203,16 @@
// ground
var groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
var groundMaterial = new MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
var mesh = new Mesh( new PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
// column
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
var mesh = new Mesh( new BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
mesh.position.y = 2;
mesh.castShadow = true;
mesh.receiveShadow = true;
......@@ -212,7 +220,7 @@
// overwrite shadowmap code
var shader = THREE.ShaderChunk.shadowmap_pars_fragment;
var shader = ShaderChunk.shadowmap_pars_fragment;
shader = shader.replace(
'#ifdef USE_SHADOWMAP',
......@@ -226,11 +234,11 @@
'#if defined( SHADOWMAP_TYPE_PCF )'
);
THREE.ShaderChunk.shadowmap_pars_fragment = shader;
ShaderChunk.shadowmap_pars_fragment = shader;
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( scene.fog.color );
......@@ -243,7 +251,7 @@
renderer.shadowMap.enabled = true;
// controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 10;
controls.maxDistance = 75;
......
examples/webgl_shadowmap_performance.html
浏览文件 @ 827e18d5
......@@ -14,23 +14,32 @@
move camera with WASD / RF + mouse
</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
AnimationMixer,
AnimationObjectGroup,
BoxBufferGeometry,
Clock,
Color,
Fog,
FontLoader,
LightShadow,
Mesh,
MeshPhongMaterial,
PCFSoftShadowMap,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
SpotLight,
TextBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
......@@ -49,7 +58,7 @@
var light;
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
......@@ -62,16 +71,16 @@
// CAMERA
camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera = new PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera.position.set( 700, 50, 1900 );
// SCENE
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x59472b );
scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
scene = new Scene();
scene.background = new Color( 0x59472b );
scene.fog = new Fog( 0x59472b, 1000, FAR );
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.lookSpeed = 0.0125;
controls.movementSpeed = 500;
......@@ -82,16 +91,16 @@
// LIGHTS
var ambient = new THREE.AmbientLight( 0x444444 );
var ambient = new AmbientLight( 0x444444 );
scene.add( ambient );
light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
light = new SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
light.position.set( 0, 1500, 1000 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 700, FAR ) );
light.shadow = new LightShadow( new PerspectiveCamera( 50, 1, 700, FAR ) );
light.shadow.bias = 0.0001;
......@@ -104,7 +113,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......@@ -114,7 +123,7 @@
//
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.type = PCFSoftShadowMap;
// STATS
......@@ -145,10 +154,10 @@
// GROUND
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
var geometry = new PlaneBufferGeometry( 100, 100 );
var planeMaterial = new MeshPhongMaterial( { color: 0xffdd99 } );
var ground = new THREE.Mesh( geometry, planeMaterial );
var ground = new Mesh( geometry, planeMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = - Math.PI / 2;
......@@ -161,10 +170,10 @@
// TEXT
var loader = new THREE.FontLoader();
var loader = new FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
var textGeo = new TextBufferGeometry( "THREE.JS", {
font: font,
......@@ -181,9 +190,9 @@
textGeo.computeBoundingBox();
var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
var textMaterial = new MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
var mesh = new Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
......@@ -196,7 +205,7 @@
// CUBES
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
var mesh = new Mesh( new BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
......@@ -206,7 +215,7 @@
scene.add( mesh );
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
var mesh = new Mesh( new BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
......@@ -216,11 +225,11 @@
scene.add( mesh );
mixer = new THREE.AnimationMixer( scene );
mixer = new AnimationMixer( scene );
for ( var i = 0; i !== ANIMATION_GROUPS; ++ i ) {
var group = new THREE.AnimationObjectGroup();
var group = new AnimationObjectGroup();
animGroups.push( group );
}
......@@ -280,7 +289,7 @@
}
var loader = new THREE.GLTFLoader();
var loader = new GLTFLoader();
loader.load( "models/gltf/Horse.glb", function ( gltf ) {
......
examples/webgl_shadowmap_pointlight.html
浏览文件 @ 827e18d5
......@@ -8,20 +8,33 @@
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - PointLight ShadowMap by <a href="https://github.com/mkkellogg">mkkellogg</a>
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - PointLight ShadowMap by <a href="https://github.com/mkkellogg">mkkellogg</a>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BackSide,
BasicShadowMap,
BoxBufferGeometry,
CanvasTexture,
DoubleSide,
Mesh,
MeshBasicMaterial,
MeshDistanceMaterial,
MeshPhongMaterial,
NearestFilter,
PerspectiveCamera,
PointLight,
RepeatWrapping,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var camera, scene, renderer, stats;
var pointLight, pointLight2;
......@@ -31,11 +44,11 @@
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 10, 40 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x111122 ) );
scene = new Scene();
scene.add( new AmbientLight( 0x111122 ) );
// lights
......@@ -43,38 +56,38 @@
var intensity = 1.5;
var pointLight = new THREE.PointLight( color, intensity, 20 );
var pointLight = new PointLight( color, intensity, 20 );
pointLight.castShadow = true;
pointLight.shadow.camera.near = 1;
pointLight.shadow.camera.far = 60;
pointLight.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects
var geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
var material = new THREE.MeshBasicMaterial( { color: color } );
var geometry = new SphereBufferGeometry( 0.3, 12, 6 );
var material = new MeshBasicMaterial( { color: color } );
material.color.multiplyScalar( intensity );
var sphere = new THREE.Mesh( geometry, material );
var sphere = new Mesh( geometry, material );
pointLight.add( sphere );
var texture = new THREE.CanvasTexture( generateTexture() );
texture.magFilter = THREE.NearestFilter;
texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.RepeatWrapping;
var texture = new CanvasTexture( generateTexture() );
texture.magFilter = NearestFilter;
texture.wrapT = RepeatWrapping;
texture.wrapS = RepeatWrapping;
texture.repeat.set( 1, 3.5 );
var geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
var material = new THREE.MeshPhongMaterial( {
side: THREE.DoubleSide,
var geometry = new SphereBufferGeometry( 2, 32, 8 );
var material = new MeshPhongMaterial( {
side: DoubleSide,
alphaMap: texture,
alphaTest: 0.5
} );
var sphere = new THREE.Mesh( geometry, material );
var sphere = new Mesh( geometry, material );
sphere.castShadow = true;
sphere.receiveShadow = true;
pointLight.add( sphere );
// custom distance material
var distanceMaterial = new THREE.MeshDistanceMaterial( {
var distanceMaterial = new MeshDistanceMaterial( {
alphaMap: material.alphaMap,
alphaTest: material.alphaTest
} );
......@@ -92,30 +105,30 @@
//
var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
var geometry = new BoxBufferGeometry( 30, 30, 30 );
var material = new THREE.MeshPhongMaterial( {
var material = new MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 10,
specular: 0x111111,
side: THREE.BackSide
side: BackSide
} );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.y = 10;
mesh.receiveShadow = true;
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMap.type = BasicShadowMap;
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 10, 0 );
controls.update();
......
examples/webgl_shadowmap_viewer.html
浏览文件 @ 827e18d5
......@@ -11,20 +11,27 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - ShadowMapViewer example by <a href="https://github.com/arya-s">arya-s</a>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
<script src="js/utils/ShadowMapViewer.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BasicShadowMap,
BoxBufferGeometry,
CameraHelper,
Clock,
DirectionalLight,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
Scene,
SpotLight,
TorusKnotBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
var camera, scene, renderer, clock, stats;
var dirLight, spotLight;
......@@ -48,16 +55,16 @@
function initScene() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 15, 35 );
scene = new THREE.Scene();
scene = new Scene();
// Lights
scene.add( new THREE.AmbientLight( 0x404040 ) );
scene.add( new AmbientLight( 0x404040 ) );
spotLight = new THREE.SpotLight( 0xffffff );
spotLight = new SpotLight( 0xffffff );
spotLight.name = 'Spot Light';
spotLight.angle = Math.PI / 5;
spotLight.penumbra = 0.3;
......@@ -69,9 +76,9 @@
spotLight.shadow.mapSize.height = 1024;
scene.add( spotLight );
scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
scene.add( new CameraHelper( spotLight.shadow.camera ) );
dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight = new DirectionalLight( 0xffffff, 1 );
dirLight.name = 'Dir. Light';
dirLight.position.set( 0, 10, 0 );
dirLight.castShadow = true;
......@@ -85,38 +92,38 @@
dirLight.shadow.mapSize.height = 1024;
scene.add( dirLight );
scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
scene.add( new CameraHelper( dirLight.shadow.camera ) );
// Geometry
var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
var material = new THREE.MeshPhongMaterial( {
var geometry = new TorusKnotBufferGeometry( 25, 8, 75, 20 );
var material = new MeshPhongMaterial( {
color: 0xff0000,
shininess: 150,
specular: 0x222222
} );
torusKnot = new THREE.Mesh( geometry, material );
torusKnot = new Mesh( geometry, material );
torusKnot.scale.multiplyScalar( 1 / 18 );
torusKnot.position.y = 3;
torusKnot.castShadow = true;
torusKnot.receiveShadow = true;
scene.add( torusKnot );
var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
cube = new THREE.Mesh( geometry, material );
var geometry = new BoxBufferGeometry( 3, 3, 3 );
cube = new Mesh( geometry, material );
cube.position.set( 8, 3, 8 );
cube.castShadow = true;
cube.receiveShadow = true;
scene.add( cube );
var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
var material = new THREE.MeshPhongMaterial( {
var geometry = new BoxBufferGeometry( 10, 0.15, 10 );
var material = new MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 150,
specular: 0x111111
} );
var ground = new THREE.Mesh( geometry, material );
var ground = new Mesh( geometry, material );
ground.scale.multiplyScalar( 3 );
ground.castShadow = false;
ground.receiveShadow = true;
......@@ -126,14 +133,14 @@
function initShadowMapViewers() {
dirLightShadowMapViewer = new THREE.ShadowMapViewer( dirLight );
dirLightShadowMapViewer = new ShadowMapViewer( dirLight );
dirLightShadowMapViewer.position.x = 10;
dirLightShadowMapViewer.position.y = 10;
dirLightShadowMapViewer.size.width = 256;
dirLightShadowMapViewer.size.height = 256;
dirLightShadowMapViewer.update(); //Required when setting position or size directly
spotLightShadowMapViewer = new THREE.ShadowMapViewer( spotLight );
spotLightShadowMapViewer = new ShadowMapViewer( spotLight );
spotLightShadowMapViewer.size.set( 256, 256 );
spotLightShadowMapViewer.position.set( 276, 10 );
// spotLightShadowMapViewer.update(); //NOT required because .set updates automatically
......@@ -142,18 +149,18 @@
function initMisc() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMap.type = BasicShadowMap;
// Mouse control
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 2, 0 );
controls.update();
clock = new THREE.Clock();
clock = new Clock();
stats = new Stats();
document.body.appendChild( stats.dom );
......
examples/webgl_shadowmesh.html
浏览文件 @ 827e18d5
......@@ -5,38 +5,54 @@
<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>
#lightButton {
position: absolute;
right: 20px;
top: 20px;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shadow mesh<br />
<input id="lightButton" type="button" value="Switch to PointLight">
</div>
<div id="container"></div>
<input id="lightButton" type="button" value="Switch to PointLight" onclick="lightButtonHandler()">
<script src="../build/three.js"></script>
<script src="js/objects/ShadowMesh.js"></script>
<script>
<script type="module">
import {
ArrowHelper,
BoxBufferGeometry,
Clock,
Color,
CylinderBufferGeometry,
DirectionalLight,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
PerspectiveCamera,
Plane,
Scene,
SphereBufferGeometry,
TorusBufferGeometry,
Vector3,
Vector4,
WebGLRenderer
} from "../build/three.module.js";
import { ShadowMesh } from './jsm/objects/ShadowMesh.js';
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
var clock = new THREE.Clock();
var renderer = new THREE.WebGLRenderer();
var scene = new Scene();
var camera = new PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
var clock = new Clock();
var renderer = new WebGLRenderer();
var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
var sunLight = new DirectionalLight( 'rgb(255,255,255)', 1 );
var useDirectionalLight = true;
var arrowHelper1, arrowHelper2, arrowHelper3;
var arrowDirection = new THREE.Vector3();
var arrowPosition1 = new THREE.Vector3();
var arrowPosition2 = new THREE.Vector3();
var arrowPosition3 = new THREE.Vector3();
var arrowDirection = new Vector3();
var arrowPosition1 = new Vector3();
var arrowPosition2 = new Vector3();
var arrowPosition3 = new Vector3();
var groundMesh;
var lightSphere, lightHolder;
var pyramid, pyramidShadow;
......@@ -44,10 +60,10 @@
var cube, cubeShadow;
var cylinder, cylinderShadow;
var torus, torusShadow;
var normalVector = new THREE.Vector3( 0, 1, 0 );
var normalVector = new Vector3( 0, 1, 0 );
var planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
var groundPlane = new THREE.Plane( normalVector, planeConstant );
var lightPosition4D = new THREE.Vector4();
var groundPlane = new Plane( normalVector, planeConstant );
var lightPosition4D = new Vector4();
var verticalAngle = 0;
var horizontalAngle = 0;
var frameTime = 0;
......@@ -58,7 +74,7 @@
function init() {
scene.background = new THREE.Color( 0x0096ff );
scene.background = new Color( 0x0096ff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
......@@ -84,87 +100,89 @@
arrowDirection.subVectors( scene.position, sunLight.position ).normalize();
arrowPosition1.copy( sunLight.position );
arrowHelper1 = new THREE.ArrowHelper( arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08 );
arrowHelper1 = new ArrowHelper( arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08 );
scene.add( arrowHelper1 );
arrowPosition2.copy( sunLight.position ).add( new THREE.Vector3( 0, 0.2, 0 ) );
arrowHelper2 = new THREE.ArrowHelper( arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08 );
arrowPosition2.copy( sunLight.position ).add( new Vector3( 0, 0.2, 0 ) );
arrowHelper2 = new ArrowHelper( arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08 );
scene.add( arrowHelper2 );
arrowPosition3.copy( sunLight.position ).add( new THREE.Vector3( 0, - 0.2, 0 ) );
arrowHelper3 = new THREE.ArrowHelper( arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08 );
arrowPosition3.copy( sunLight.position ).add( new Vector3( 0, - 0.2, 0 ) );
arrowHelper3 = new ArrowHelper( arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08 );
scene.add( arrowHelper3 );
// LIGHTBULB
var lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
var lightSphereGeometry = new SphereBufferGeometry( 0.09 );
var lightSphereMaterial = new MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
lightSphere = new Mesh( lightSphereGeometry, lightSphereMaterial );
scene.add( lightSphere );
lightSphere.visible = false;
var lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
var lightHolderGeometry = new CylinderBufferGeometry( 0.05, 0.05, 0.13 );
var lightHolderMaterial = new MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
lightHolder = new Mesh( lightHolderGeometry, lightHolderMaterial );
scene.add( lightHolder );
lightHolder.visible = false;
// GROUND
var groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
var groundGeometry = new BoxBufferGeometry( 30, 0.01, 40 );
var groundMaterial = new MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
groundMesh = new Mesh( groundGeometry, groundMaterial );
groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
scene.add( groundMesh );
// RED CUBE and CUBE's SHADOW
var cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
var cubeGeometry = new BoxBufferGeometry( 1, 1, 1 );
var cubeMaterial = new MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
cube = new Mesh( cubeGeometry, cubeMaterial );
cube.position.z = - 1;
scene.add( cube );
cubeShadow = new THREE.ShadowMesh( cube );
cubeShadow = new ShadowMesh( cube );
scene.add( cubeShadow );
// BLUE CYLINDER and CYLINDER's SHADOW
var cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
var cylinderGeometry = new CylinderBufferGeometry( 0.3, 0.3, 2 );
var cylinderMaterial = new MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
cylinder = new Mesh( cylinderGeometry, cylinderMaterial );
cylinder.position.z = - 2.5;
scene.add( cylinder );
cylinderShadow = new THREE.ShadowMesh( cylinder );
cylinderShadow = new ShadowMesh( cylinder );
scene.add( cylinderShadow );
// MAGENTA TORUS and TORUS' SHADOW
var torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
torus = new THREE.Mesh( torusGeometry, torusMaterial );
var torusGeometry = new TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
var torusMaterial = new MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
torus = new Mesh( torusGeometry, torusMaterial );
torus.position.z = - 6;
scene.add( torus );
torusShadow = new THREE.ShadowMesh( torus );
torusShadow = new ShadowMesh( torus );
scene.add( torusShadow );
// WHITE SPHERE and SPHERE'S SHADOW
var sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
var sphereGeometry = new SphereBufferGeometry( 0.5, 20, 10 );
var sphereMaterial = new MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
sphere = new Mesh( sphereGeometry, sphereMaterial );
sphere.position.set( 4, 0.5, 2 );
scene.add( sphere );
sphereShadow = new THREE.ShadowMesh( sphere );
sphereShadow = new ShadowMesh( sphere );
scene.add( sphereShadow );
// YELLOW PYRAMID and PYRAMID'S SHADOW
var pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
var pyramidGeometry = new CylinderBufferGeometry( 0, 0.5, 2, 4 );
var pyramidMaterial = new MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
pyramid = new Mesh( pyramidGeometry, pyramidMaterial );
pyramid.position.set( - 4, 1, 2 );
scene.add( pyramid );
pyramidShadow = new THREE.ShadowMesh( pyramid );
pyramidShadow = new ShadowMesh( pyramid );
scene.add( pyramidShadow );
document.getElementById( 'lightButton' ).addEventListener( 'click', lightButtonHandler );
}
function animate() {
......
examples/webgl_simple_gi.html
浏览文件 @ 827e18d5
......@@ -12,14 +12,29 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - simple global illumination (<a href="http://www.iquilezles.org/www/articles/simplegi/simplegi.htm">article</a>)
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
<script type="module">
import {
BackSide,
BufferAttribute,
BoxBufferGeometry,
ClampToEdgeWrapping,
Matrix3,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
TorusKnotBufferGeometry,
Vector3,
VertexColors,
WebGLRenderer,
WebGLRenderTarget
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
// HACK:
THREE.Mesh.prototype.clone = function () {
Mesh.prototype.clone = function () {
var newMaterial = ( this.material.isMaterial ) ? this.material.clone() : this.material.slice();
......@@ -33,24 +48,24 @@
var SIZE = 32, SIZE2 = SIZE * SIZE;
var camera = new THREE.PerspectiveCamera( 90, 1, 0.01, 100 );
var camera = new PerspectiveCamera( 90, 1, 0.01, 100 );
scene.updateMatrixWorld( true );
var clone = scene.clone();
clone.autoUpdate = false;
var rt = new THREE.WebGLRenderTarget( SIZE, SIZE, {
wrapS: THREE.ClampToEdgeWrapping,
wrapT: THREE.ClampToEdgeWrapping,
var rt = new WebGLRenderTarget( SIZE, SIZE, {
wrapS: ClampToEdgeWrapping,
wrapT: ClampToEdgeWrapping,
stencilBuffer: false,
depthBuffer: true
} );
var normalMatrix = new THREE.Matrix3();
var normalMatrix = new Matrix3();
var position = new THREE.Vector3();
var normal = new THREE.Vector3();
var position = new Vector3();
var normal = new Vector3();
var bounces = 0;
var currentVertex = 0;
......@@ -72,7 +87,7 @@
if ( attributes.color === undefined ) {
var colors = new Float32Array( positions.length );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ).setDynamic( true ) );
}
......@@ -150,17 +165,17 @@
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 4;
scene = new THREE.Scene();
scene = new Scene();
// sphere
var geometry = new THREE.TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
var geometry = new TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
var material = new MeshBasicMaterial( { vertexColors: VertexColors } );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
// room
......@@ -169,25 +184,25 @@
for ( var i = 0; i < 8; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.BackSide } ) );
materials.push( new MeshBasicMaterial( { color: Math.random() * 0xffffff, side: BackSide } ) );
}
var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
var geometry = new BoxBufferGeometry( 3, 3, 3 );
var mesh = new THREE.Mesh( geometry, materials );
var mesh = new Mesh( geometry, materials );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
new SimpleGI( renderer, scene );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
......
examples/webgl_skinning_simple.html
浏览文件 @ 827e18d5
......@@ -13,12 +13,27 @@
<a href="https://github.com/mrdoob/three.js/blob/master/examples/models/skinned/simple/simple.blend" target="_blank" rel="noopener">Blender File</a>
</div>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script>
<script type="module">
import {
AnimationMixer,
Clock,
Color,
DirectionalLight,
Fog,
GridHelper,
HemisphereLight,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
var stats, mixer, camera, scene, renderer, clock;
......@@ -30,27 +45,27 @@
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 24, 8, 24 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 70, 100 );
scene = new Scene();
scene.background = new Color( 0xa0a0a0 );
scene.fog = new Fog( 0xa0a0a0, 70, 100 );
clock = new THREE.Clock();
clock = new Clock();
// ground
var geometry = new THREE.PlaneBufferGeometry( 500, 500 );
var material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
var geometry = new PlaneBufferGeometry( 500, 500 );
var material = new MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
var ground = new THREE.Mesh( geometry, material );
var ground = new Mesh( geometry, material );
ground.position.set( 0, - 5, 0 );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
var grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
var grid = new GridHelper( 500, 100, 0x000000, 0x000000 );
grid.position.y = - 5;
grid.material.opacity = 0.2;
grid.material.transparent = true;
......@@ -58,11 +73,11 @@
// lights
var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
var light = new HemisphereLight( 0xffffff, 0x444444, 0.6 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff, 0.8 );
light = new DirectionalLight( 0xffffff, 0.8 );
light.position.set( 0, 20, 10 );
light.castShadow = true;
light.shadow.camera.top = 18;
......@@ -73,7 +88,7 @@
//
var loader = new THREE.GLTFLoader();
var loader = new GLTFLoader();
loader.load( './models/gltf/SimpleSkinning.gltf', function ( gltf ) {
scene.add( gltf.scene );
......@@ -84,14 +99,14 @@
} );
mixer = new THREE.AnimationMixer( gltf.scene );
mixer = new AnimationMixer( gltf.scene );
mixer.clipAction( gltf.animations[ 0 ] ).play();
} );
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
......@@ -102,7 +117,7 @@
stats = new Stats();
container.appendChild( stats.dom );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.minDistance = 5;
controls.maxDistance = 50;
......
examples/webgl_sprites.html
浏览文件 @ 827e18d5
......@@ -8,9 +8,22 @@
</head>
<body>
<script src="../build/three.js"></script>
<script>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - sprites
</div>
<script type="module">
import {
Fog,
Group,
OrthographicCamera,
PerspectiveCamera,
Scene,
Sprite,
SpriteMaterial,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
var camera, scene, renderer;
var cameraOrtho, sceneOrtho;
......@@ -29,32 +42,32 @@
var width = window.innerWidth;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
camera = new PerspectiveCamera( 60, width / height, 1, 2100 );
camera.position.z = 1500;
cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho = new OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho.position.z = 10;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
scene = new Scene();
scene.fog = new Fog( 0x000000, 1500, 2100 );
sceneOrtho = new THREE.Scene();
sceneOrtho = new Scene();
// create sprites
var amount = 200;
var radius = 500;
var textureLoader = new THREE.TextureLoader();
var textureLoader = new TextureLoader();
textureLoader.load( "textures/sprite0.png", createHUDSprites );
var mapB = textureLoader.load( "textures/sprite1.png" );
mapC = textureLoader.load( "textures/sprite2.png" );
group = new THREE.Group();
group = new Group();
var materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
var materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
var materialC = new SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
var materialB = new SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
for ( var a = 0; a < amount; a ++ ) {
......@@ -77,7 +90,7 @@
}
var sprite = new THREE.Sprite( material );
var sprite = new Sprite( material );
sprite.position.set( x, y, z );
sprite.position.normalize();
......@@ -91,7 +104,7 @@
// renderer
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false; // To allow render overlay on top of sprited sphere
......@@ -106,32 +119,32 @@
function createHUDSprites( texture ) {
var material = new THREE.SpriteMaterial( { map: texture } );
var material = new SpriteMaterial( { map: texture } );
var width = material.map.image.width;
var height = material.map.image.height;
spriteTL = new THREE.Sprite( material );
spriteTL = new Sprite( material );
spriteTL.center.set( 0.0, 1.0 );
spriteTL.scale.set( width, height, 1 );
sceneOrtho.add( spriteTL );
spriteTR = new THREE.Sprite( material );
spriteTR = new Sprite( material );
spriteTR.center.set( 1.0, 1.0 );
spriteTR.scale.set( width, height, 1 );
sceneOrtho.add( spriteTR );
spriteBL = new THREE.Sprite( material );
spriteBL = new Sprite( material );
spriteBL.center.set( 0.0, 0.0 );
spriteBL.scale.set( width, height, 1 );
sceneOrtho.add( spriteBL );
spriteBR = new THREE.Sprite( material );
spriteBR = new Sprite( material );
spriteBR.center.set( 1.0, 0.0 );
spriteBR.scale.set( width, height, 1 );
sceneOrtho.add( spriteBR );
spriteC = new THREE.Sprite( material );
spriteC = new Sprite( material );
spriteC.center.set( 0.5, 0.5 );
spriteC.scale.set( width, height, 1 );
sceneOrtho.add( spriteC );
......
examples/webgl_terrain_dynamic.html
浏览文件 @ 827e18d5
......@@ -28,18 +28,6 @@
animate terrain: <strong>m</strong>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/utils/BufferGeometryUtils.js"></script>
<script src="js/shaders/NormalMapShader.js"></script>
<script src="js/shaders/TerrainShader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script id="fragmentShaderNoise" type="x-shader/x-fragment">
//
......@@ -183,13 +171,39 @@
</script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
Clock,
Color,
DirectionalLight,
Fog,
LinearFilter,
LoadingManager,
Math as _Math,
Mesh,
MeshBasicMaterial,
OrthographicCamera,
PerspectiveCamera,
PlaneBufferGeometry,
PointLight,
RepeatWrapping,
RGBFormat,
Scene,
ShaderMaterial,
TextureLoader,
UniformsUtils,
Vector2,
WebGLRenderer,
WebGLRenderTarget
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { NormalMapShader } from './jsm/shaders/NormalMapShader.js';
import { TerrainShader } from './jsm/shaders/TerrainShader.js';
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
......@@ -210,7 +224,7 @@
var animDelta = 0, animDeltaDir = - 1;
var lightVal = 0, lightDir = 1;
var clock = new THREE.Clock();
var clock = new Clock();
var updateNoise = true;
......@@ -225,58 +239,58 @@
// SCENE (RENDER TARGET)
sceneRenderTarget = new THREE.Scene();
sceneRenderTarget = new Scene();
cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, - 10000, 10000 );
cameraOrtho = new OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, - 10000, 10000 );
cameraOrtho.position.z = 100;
sceneRenderTarget.add( cameraOrtho );
// CAMERA
camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
camera = new PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
camera.position.set( - 1200, 800, 1200 );
// SCENE (FINAL)
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );
scene.fog = new THREE.Fog( 0x050505, 2000, 4000 );
scene = new Scene();
scene.background = new Color( 0x050505 );
scene.fog = new Fog( 0x050505, 2000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x111111 ) );
scene.add( new AmbientLight( 0x111111 ) );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.15 );
directionalLight = new DirectionalLight( 0xffffff, 1.15 );
directionalLight.position.set( 500, 2000, 0 );
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xff4400, 1.5 );
pointLight = new PointLight( 0xff4400, 1.5 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
// HEIGHT + NORMAL MAPS
var normalShader = THREE.NormalMapShader;
var normalShader = NormalMapShader;
var rx = 256, ry = 256;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
heightMap = new THREE.WebGLRenderTarget( rx, ry, pars );
heightMap = new WebGLRenderTarget( rx, ry, pars );
heightMap.texture.generateMipmaps = false;
normalMap = new THREE.WebGLRenderTarget( rx, ry, pars );
normalMap = new WebGLRenderTarget( rx, ry, pars );
normalMap.texture.generateMipmaps = false;
uniformsNoise = {
"time": { value: 1.0 },
"scale": { value: new THREE.Vector2( 1.5, 1.5 ) },
"offset": { value: new THREE.Vector2( 0, 0 ) }
"scale": { value: new Vector2( 1.5, 1.5 ) },
"offset": { value: new Vector2( 0, 0 ) }
};
uniformsNormal = THREE.UniformsUtils.clone( normalShader.uniforms );
uniformsNormal = UniformsUtils.clone( normalShader.uniforms );
uniformsNormal[ "height" ].value = 0.05;
uniformsNormal[ "resolution" ].value.set( rx, ry );
......@@ -286,30 +300,30 @@
// TEXTURES
var loadingManager = new THREE.LoadingManager( function () {
var loadingManager = new LoadingManager( function () {
terrain.visible = true;
} );
var textureLoader = new THREE.TextureLoader( loadingManager );
var textureLoader = new TextureLoader( loadingManager );
var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
var specularMap = new WebGLRenderTarget( 2048, 2048, pars );
specularMap.texture.generateMipmaps = false;
var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big.jpg" );
var diffuseTexture2 = textureLoader.load( "textures/terrain/backgrounddetailed6.jpg" );
var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg" );
diffuseTexture1.wrapS = diffuseTexture1.wrapT = THREE.RepeatWrapping;
diffuseTexture2.wrapS = diffuseTexture2.wrapT = THREE.RepeatWrapping;
detailTexture.wrapS = detailTexture.wrapT = THREE.RepeatWrapping;
specularMap.texture.wrapS = specularMap.texture.wrapT = THREE.RepeatWrapping;
diffuseTexture1.wrapS = diffuseTexture1.wrapT = RepeatWrapping;
diffuseTexture2.wrapS = diffuseTexture2.wrapT = RepeatWrapping;
detailTexture.wrapS = detailTexture.wrapT = RepeatWrapping;
specularMap.texture.wrapS = specularMap.texture.wrapT = RepeatWrapping;
// TERRAIN SHADER
var terrainShader = THREE.TerrainShader;
var terrainShader = TerrainShader;
uniformsTerrain = THREE.UniformsUtils.clone( terrainShader.uniforms );
uniformsTerrain = UniformsUtils.clone( terrainShader.uniforms );
uniformsTerrain[ 'tNormal' ].value = normalMap.texture;
uniformsTerrain[ 'uNormalScale' ].value = 3.5;
......@@ -342,7 +356,7 @@
for ( var i = 0; i < params.length; i ++ ) {
var material = new THREE.ShaderMaterial( {
var material = new ShaderMaterial( {
uniforms: params[ i ][ 3 ],
vertexShader: params[ i ][ 2 ],
......@@ -356,19 +370,19 @@
}
var plane = new THREE.PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
var plane = new PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
quadTarget = new Mesh( plane, new MeshBasicMaterial( { color: 0x000000 } ) );
quadTarget.position.z = - 500;
sceneRenderTarget.add( quadTarget );
// TERRAIN MESH
var geometryTerrain = new THREE.PlaneBufferGeometry( 6000, 6000, 256, 256 );
var geometryTerrain = new PlaneBufferGeometry( 6000, 6000, 256, 256 );
THREE.BufferGeometryUtils.computeTangents( geometryTerrain );
BufferGeometryUtils.computeTangents( geometryTerrain );
terrain = new THREE.Mesh( geometryTerrain, mlib[ 'terrain' ] );
terrain = new Mesh( geometryTerrain, mlib[ 'terrain' ] );
terrain.position.set( 0, - 125, 0 );
terrain.rotation.x = - Math.PI / 2;
terrain.visible = false;
......@@ -376,14 +390,14 @@
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
......@@ -452,21 +466,21 @@
var fLow = 0.1, fHigh = 0.8;
lightVal = THREE.Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
lightVal = _Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
var valNorm = ( lightVal - fLow ) / ( fHigh - fLow );
scene.background.setHSL( 0.1, 0.5, lightVal );
scene.fog.color.setHSL( 0.1, 0.5, lightVal );
directionalLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
directionalLight.intensity = _Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
pointLight.intensity = _Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
uniformsTerrain[ 'uNormalScale' ].value = THREE.Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
uniformsTerrain[ 'uNormalScale' ].value = _Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
if ( updateNoise ) {
animDelta = THREE.Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
animDelta = _Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
uniformsNoise[ 'time' ].value += delta * animDelta;
uniformsNoise[ 'offset' ].value.x += delta * 0.05;
......
examples/webgl_test_memory.html
浏览文件 @ 827e18d5
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - webgl</title>
<title>three.js - webgl memory test I</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 {
background-color: #fff;
color: #000;
}
a {
color: #08f;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - memory test I
</div>
<script type="module">
import {
CanvasTexture,
Color,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
var container;
......@@ -30,13 +45,13 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 200;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -69,13 +84,13 @@
function render() {
var geometry = new THREE.SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
var geometry = new SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
var texture = new THREE.CanvasTexture( createImage() );
var texture = new CanvasTexture( createImage() );
var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } );
var material = new MeshBasicMaterial( { map: texture, wireframe: true } );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
......
examples/webgl_test_memory2.html
浏览文件 @ 827e18d5
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - webgl</title>
<title>three.js - webgl memory test II</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 {
background-color: #fff;
color: #000;
}
a {
color: #08f;
}
</style>
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - memory test II
</div>
<script type="x-shader/x-fragment" id="fragmentShader">
void main() {
......@@ -40,9 +48,16 @@
</script>
<script src="../build/three.js"></script>
<script>
<script type="module">
import {
Color,
Mesh,
PerspectiveCamera,
Scene,
ShaderMaterial,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
var N = 100;
......@@ -65,19 +80,19 @@
vertexShader = document.getElementById( "vertexShader" ).textContent;
fragmentShader = document.getElementById( "fragmentShader" ).textContent;
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 2000;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
geometry = new THREE.SphereBufferGeometry( 15, 64, 32 );
geometry = new SphereBufferGeometry( 15, 64, 32 );
for ( var i = 0; i < N; i ++ ) {
var material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
var material = new ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = ( 0.5 - Math.random() ) * 1000;
mesh.position.y = ( 0.5 - Math.random() ) * 1000;
......@@ -89,7 +104,7 @@
}
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -109,7 +124,7 @@
for ( var i = 0; i < N; i ++ ) {
var mesh = meshes[ i ];
mesh.material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
mesh.material = new ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
}
......
examples/webgl_tiled_forward.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webgl_tonemapping.html
浏览文件 @ 827e18d5
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - inline tone mapping</title>
<title>three.js 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">
<link type="text/css" rel="stylesheet" href="main.css">
......@@ -11,31 +11,42 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">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" rel="noopener">Ben Houston</a>.</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.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>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
ACESFilmicToneMapping,
BackSide,
BoxBufferGeometry,
CineonToneMapping,
HemisphereLight,
LinearToneMapping,
Mesh,
MeshStandardMaterial,
NoToneMapping,
PerspectiveCamera,
ReinhardToneMapping,
RepeatWrapping,
Scene,
sRGBEncoding,
SpotLight,
TextureLoader,
TorusKnotBufferGeometry,
Uncharted2ToneMapping,
UnsignedByteType,
WebGLRenderer
} from "../build/three.module.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 { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
import { CopyShader } from './jsm/shaders/CopyShader.js';
var container, stats;
var params = {
......@@ -49,15 +60,15 @@
};
var toneMappingOptions = {
None: THREE.NoToneMapping,
Linear: THREE.LinearToneMapping,
Reinhard: THREE.ReinhardToneMapping,
Uncharted2: THREE.Uncharted2ToneMapping,
Cineon: THREE.CineonToneMapping,
ACESFilmic: THREE.ACESFilmicToneMapping
None: NoToneMapping,
Linear: LinearToneMapping,
Reinhard: ReinhardToneMapping,
Uncharted2: Uncharted2ToneMapping,
Cineon: CineonToneMapping,
ACESFilmic: ACESFilmicToneMapping
};
var camera, scene, renderer, group;
var camera, scene, renderer, mesh;
var composer;
var standardMaterial, floorMaterial;
......@@ -69,14 +80,14 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0.0, 40, 40 * 3.5 );
scene = new THREE.Scene();
scene = new Scene();
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
standardMaterial = new THREE.MeshStandardMaterial( {
standardMaterial = new MeshStandardMaterial( {
bumpScale: - 0.05,
color: 0xffffff,
metalness: 0.9,
......@@ -85,12 +96,12 @@
transparent: true
} );
var textureLoader = new THREE.TextureLoader();
var textureLoader = new TextureLoader();
textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.encoding = THREE.sRGBEncoding;
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.encoding = sRGBEncoding;
map.anisotropy = 4;
map.repeat.set( 9, 0.5 );
standardMaterial.map = map;
......@@ -100,8 +111,8 @@
textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 0.5 );
standardMaterial.bumpMap = map;
......@@ -111,8 +122,8 @@
textureLoader.load( "textures/brick_roughness.jpg", function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 0.5 );
standardMaterial.roughnessMap = map;
......@@ -120,23 +131,23 @@
} );
var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
mesh = new THREE.Mesh( geometry, standardMaterial );
var geometry = new TorusKnotBufferGeometry( 18, 8, 150, 20 );
mesh = new Mesh( geometry, standardMaterial );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
floorMaterial = new THREE.MeshStandardMaterial( {
floorMaterial = new MeshStandardMaterial( {
map: null,
roughnessMap: null,
color: 0x888888,
metalness: 0.0,
roughness: 1.0,
side: THREE.BackSide
side: BackSide
} );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var floor = new THREE.Mesh( geometry, floorMaterial );
var geometry = new BoxBufferGeometry( 200, 200, 200 );
var floor = new Mesh( geometry, floorMaterial );
floor.position.y = 50;
floor.rotation.x = - Math.PI * 0.5;
floor.receiveShadow = true;
......@@ -151,30 +162,30 @@
hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
];
new THREE.HDRCubeTextureLoader()
.setType( THREE.UnsignedByteType )
new HDRCubeTextureLoader()
.setType( UnsignedByteType )
.load( hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremGenerator = new PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
standardMaterial.envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
standardMaterial.needsUpdate = true;
standardMaterial.envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
standardMaterial.needsUpdate = true;
hdrCubeMap.dispose();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
hdrCubeMap.dispose();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
} );
} );
// Lights
scene.add( new THREE.HemisphereLight( 0x111111, 0x000000 ) );
scene.add( new HemisphereLight( 0x111111, 0x000000 ) );
var spotLight = new THREE.SpotLight( 0xffffff );
var spotLight = new SpotLight( 0xffffff );
spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7;
spotLight.decay = 2;
......@@ -190,23 +201,23 @@
renderer.gammaOutput = true;
composer = new THREE.EffectComposer( renderer );
composer = new EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
var renderScene = new THREE.RenderPass( scene, camera );
var renderScene = new RenderPass( scene, camera );
composer.addPass( renderScene );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
var copyPass = new ShaderPass( CopyShader );
composer.addPass( copyPass );
stats = new Stats();
container.appendChild( stats.dom );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
var gui = new dat.GUI();
var gui = new GUI();
gui.add( params, 'toneMapping', Object.keys( toneMappingOptions ) );
gui.add( params, 'exposure', 0, 10 );
......
examples/webgl_trails.html
浏览文件 @ 827e18d5
......@@ -7,12 +7,20 @@
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BufferGeometry,
Color,
Float32BufferAttribute,
PerspectiveCamera,
Points,
PointsMaterial,
Scene,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var container, stats;
......@@ -26,12 +34,12 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
camera.position.set( 0, 0, 1 );
scene = new THREE.Scene();
scene = new Scene();
var colorArray = [ new THREE.Color( 0xff0080 ), new THREE.Color( 0xffffff ), new THREE.Color( 0x8000ff ) ];
var colorArray = [ new Color( 0xff0080 ), new Color( 0xffffff ), new Color( 0x8000ff ) ];
var positions = [];
var colors = [];
......@@ -45,16 +53,16 @@
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
var geometry = new BufferGeometry();
geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
var material = new THREE.PointsMaterial( { size: 4, vertexColors: THREE.VertexColors, depthTest: false, sizeAttenuation: false } );
var material = new PointsMaterial( { size: 4, vertexColors: VertexColors, depthTest: false, sizeAttenuation: false } );
var mesh = new THREE.Points( geometry, material );
var mesh = new Points( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer = new WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClearColor = false;
......
examples/webgl_video_panorama_equirectangular.html
浏览文件 @ 827e18d5
......@@ -7,25 +7,29 @@
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - video panorama
</div>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src="textures/pano.webm">
<source src="textures/pano.mp4">
</video>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
Math as _Math,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
Vector3,
VideoTexture,
WebGLRenderer
} from "../build/three.module.js";
var camera, scene, renderer;
......@@ -47,26 +51,26 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new Vector3( 0, 0, 0 );
scene = new THREE.Scene();
scene = new Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
var geometry = new SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var video = document.getElementById( 'video' );
video.play();
var texture = new THREE.VideoTexture( video );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var texture = new VideoTexture( video );
var material = new MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -126,7 +130,7 @@
distance += event.deltaY * 0.05;
distance = THREE.Math.clamp( distance, 1, 50 );
distance = _Math.clamp( distance, 1, 50 );
}
......@@ -140,8 +144,8 @@
function update() {
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
phi = _Math.degToRad( 90 - lat );
theta = _Math.degToRad( lon );
camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
camera.position.y = distance * Math.cos( phi );
......
examples/webgl_water.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webgl_water_flowmap.html
浏览文件 @ 827e18d5
......@@ -5,15 +5,6 @@
<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">
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/objects/Reflector.js"></script>
<script src="js/objects/Refractor.js"></script>
<script src="js/objects/Water2.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
</head>
<body>
......@@ -22,123 +13,131 @@
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - water flow map
</div>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
<script type="module">
import {
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
RepeatWrapping,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
}
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { Water } from './jsm/objects/Water2.js';
var scene, camera, renderer, water;
var scene, camera, renderer, water;
init();
animate();
init();
animate();
function init() {
function init() {
// scene
// scene
scene = new THREE.Scene();
scene = new Scene();
// camera
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 25, 0 );
camera.lookAt( scene.position );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 25, 0 );
camera.lookAt( scene.position );
// ground
// ground
var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20, 10, 10 );
var groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
var ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.rotation.x = Math.PI * - 0.5;
scene.add( ground );
var groundGeometry = new PlaneBufferGeometry( 20, 20, 10, 10 );
var groundMaterial = new MeshBasicMaterial( { color: 0xcccccc } );
var ground = new Mesh( groundGeometry, groundMaterial );
ground.rotation.x = Math.PI * - 0.5;
scene.add( ground );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function ( map ) {
var textureLoader = new TextureLoader();
textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
map.repeat.set( 4, 4 );
groundMaterial.map = map;
groundMaterial.needsUpdate = true;
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 16;
map.repeat.set( 4, 4 );
groundMaterial.map = map;
groundMaterial.needsUpdate = true;
} );
} );
// water
// water
var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
var waterGeometry = new PlaneBufferGeometry( 20, 20 );
var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
water = new THREE.Water( waterGeometry, {
scale: 2,
textureWidth: 1024,
textureHeight: 1024,
flowMap: flowMap
} );
water = new Water( waterGeometry, {
scale: 2,
textureWidth: 1024,
textureHeight: 1024,
flowMap: flowMap
} );
water.position.y = 1;
water.rotation.x = Math.PI * - 0.5;
scene.add( water );
water.position.y = 1;
water.rotation.x = Math.PI * - 0.5;
scene.add( water );
// flow map helper
// flow map helper
var helperGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var helperMaterial = new THREE.MeshBasicMaterial( { map: flowMap } );
var helper = new THREE.Mesh( helperGeometry, helperMaterial );
helper.position.y = 1.01;
helper.rotation.x = Math.PI * - 0.5;
helper.visible = false;
scene.add( helper );
var helperGeometry = new PlaneBufferGeometry( 20, 20 );
var helperMaterial = new MeshBasicMaterial( { map: flowMap } );
var helper = new Mesh( helperGeometry, helperMaterial );
helper.position.y = 1.01;
helper.rotation.x = Math.PI * - 0.5;
helper.visible = false;
scene.add( helper );
// renderer
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
//
//
var gui = new dat.GUI();
gui.add( helper, 'visible' ).name( 'Show Flow Map' );
gui.open();
var gui = new GUI();
gui.add( helper, 'visible' ).name( 'Show Flow Map' );
gui.open();
//
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
//
//
window.addEventListener( 'resize', onResize, false );
window.addEventListener( 'resize', onResize, false );
}
}
function onResize() {
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
render();
render();
}
}
function render() {
function render() {
renderer.render( scene, camera );
renderer.render( scene, camera );
}
}
</script>
</script>
</body>
</html>
examples/webvr_ballshooter.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_cubes.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_dragging.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_lorenzattractor.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_paint.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_panorama.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_rollercoaster.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_sandbox.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_sculpt.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_video.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_vive_paint.html
浏览文件 @ 827e18d5
此差异已折叠。
examples/webvr_vive_sculpt.html
浏览文件 @ 827e18d5
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或