Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 6c5354f4 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #11095 from Mugen87/dev 

Examples: Clean up
上级 affbb2b8 d9831d7b
隐藏空白更改
内联 并排
Showing with 187 addition and 127 deletion
examples/js/WaterShader.js
浏览文件 @ 6c5354f4
......@@ -210,9 +210,36 @@ THREE.Water = function ( renderer, camera, scene, options ) {
};
THREE.Water.prototype = Object.create( THREE.Mirror.prototype );
THREE.Water.prototype = Object.create( THREE.Object3D.prototype );
THREE.Water.prototype.constructor = THREE.Water;
THREE.Water.prototype.render = function () {
if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
this.matrixNeedsUpdate = true;
// Render the mirrored view of the current scene into the target texture
var scene = this;
while ( scene.parent !== null ) {
scene = scene.parent;
}
if ( scene !== undefined && scene instanceof THREE.Scene ) {
this.material.visible = false;
this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );
this.material.visible = true;
}
};
THREE.Water.prototype.updateTextureMatrix = function () {
......
examples/webgl_gpu_particle_system.html
浏览文件 @ 6c5354f4
......@@ -5,36 +5,46 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a {
color: #0078ff;
}
.dg {
right: auto!important;
left: 20px!important;
}
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
color: #ffffff;
}
a {
color: #ffffff;
}
</style>
</head>
<body>
<div style="position: absolute; top: 10px; width: 100%; text-align: center; color:#eee">
<a href="http://threejs.org" target="_blank">three.js</a> - GPU particle system plugin by <a href="http://charliehoey.com">Charlie Hoey</a>.</div>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank">three.js</a> - GPU particle system plugin by <a href="http://charliehoey.com">Charlie Hoey</a>.
</div>
<script src="../build/three.js"></script>
<script src="./js/controls/TrackballControls.js"></script>
<script src="./js/libs/dat.gui.min.js"></script>
<script src="./js/GPUParticleSystem.js" charset="utf-8"></script>
<script src="./js/GPUParticleSystem.js"></script>
<script>
var camera, tick = 0,
scene, renderer, clock = new THREE.Clock(true),
controls, container, gui = new dat.GUI(),
scene, renderer, clock = new THREE.Clock(),
controls, container, gui = new dat.GUI( { width: 350 } ),
options, spawnerOptions, particleSystem;
init();
......@@ -42,11 +52,11 @@
function init() {
//
container = document.createElement('div');
document.body.appendChild(container);
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 1, 10000);
camera = new THREE.PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 100;
scene = new THREE.Scene();
......@@ -55,13 +65,15 @@
// as you would any other scene graph component. Particle positions will be
// relative to the position of the particle system, but you will probably only need one
// system for your whole scene
particleSystem = new THREE.GPUParticleSystem({
particleSystem = new THREE.GPUParticleSystem( {
maxParticles: 250000
});
scene.add( particleSystem);
} );
scene.add( particleSystem );
// options passed during each spawned
options = {
position: new THREE.Vector3(),
positionRandomness: .3,
......@@ -82,30 +94,35 @@
timeScale: 1
};
gui.add(options, "velocityRandomness", 0, 3);
gui.add(options, "positionRandomness", 0, 3);
gui.add(options, "size", 1, 20);
gui.add(options, "sizeRandomness", 0, 25);
gui.add(options, "colorRandomness", 0, 1);
gui.add(options, "lifetime", .1, 10);
gui.add(options, "turbulence", 0, 1);
//
gui.add( options, "velocityRandomness", 0, 3 );
gui.add( options, "positionRandomness", 0, 3 );
gui.add( options, "size", 1, 20 );
gui.add( options, "sizeRandomness", 0, 25 );
gui.add( options, "colorRandomness", 0, 1 );
gui.add( options, "lifetime", .1, 10 );
gui.add( options, "turbulence", 0, 1 );
gui.add(spawnerOptions, "spawnRate", 10, 30000);
gui.add(spawnerOptions, "timeScale", -1, 1);
gui.add( spawnerOptions, "spawnRate", 10, 30000 );
gui.add( spawnerOptions, "timeScale", -1, 1 );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
// setup controls
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 2.2;
controls.panSpeed = 1;
controls.dynamicDampingFactor = 0.3;
window.addEventListener('resize', onWindowResize, false);
window.addEventListener( 'resize', onWindowResize, false );
}
......@@ -114,34 +131,39 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
requestAnimationFrame( animate );
controls.update();
var delta = clock.getDelta() * spawnerOptions.timeScale;
tick += delta;
if (tick < 0) tick = 0;
if ( tick < 0 ) tick = 0;
if ( delta > 0 ) {
options.position.x = Math.sin( tick * spawnerOptions.horizontalSpeed ) * 20;
options.position.y = Math.sin( tick * spawnerOptions.verticalSpeed ) * 10;
options.position.z = Math.sin( tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed ) * 5;
if (delta > 0) {
options.position.x = Math.sin(tick * spawnerOptions.horizontalSpeed) * 20;
options.position.y = Math.sin(tick * spawnerOptions.verticalSpeed) * 10;
options.position.z = Math.sin(tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed) * 5;
for ( var x = 0; x < spawnerOptions.spawnRate * delta; x++ ) {
for (var x = 0; x < spawnerOptions.spawnRate * delta; x++) {
// Yep, that's really it. Spawning particles is super cheap, and once you spawn them, the rest of
// their lifecycle is handled entirely on the GPU, driven by a time uniform updated below
particleSystem.spawnParticle(options);
particleSystem.spawnParticle( options );
}
}
particleSystem.update(tick);
particleSystem.update( tick );
render();
......@@ -149,9 +171,10 @@
function render() {
renderer.render(scene, camera);
renderer.render( scene, camera );
}
</script>
</body>
......
examples/webgl_morphtargets.html
浏览文件 @ 6c5354f4
......@@ -6,64 +6,41 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#000;
color:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
top: 0px;
width: 100%;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
font-family:Monospace;
font-size:13px;
text-align:center;
color: #ffffff;
}
#ctrl {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
a {
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
z-index:100;
}
a { color:red }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - WebGL morph target example
</div>
<div id="ctrl">
Use controls to change morph target influences:<br/>
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 0 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 1 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 2 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 3 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 4 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 5 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 6 ] = this.value/100;" />
<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 7 ] = this.value/100;" />
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
......@@ -76,21 +53,14 @@
var geometry, objects;
var mouseX = 0, mouseY = 0;
var mesh;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 500;
......@@ -138,6 +108,32 @@
//
var params = {
influence1: 0,
influence2: 0,
influence3: 0,
influence4: 0,
influence5: 0,
influence6: 0,
influence7: 0,
influence8: 0
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'Morph Targets' );
folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 0 ] = value; } );
folder.add( params, 'influence2', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 1 ] = value; } );
folder.add( params, 'influence3', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 2 ] = value; } );
folder.add( params, 'influence4', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 3 ] = value; } );
folder.add( params, 'influence5', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 4 ] = value; } );
folder.add( params, 'influence6', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 5 ] = value; } );
folder.add( params, 'influence7', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 6 ] = value; } );
folder.add( params, 'influence8', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 7 ] = value; } );
folder.open();
//
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x222222 );
renderer.setPixelRatio( window.devicePixelRatio );
......@@ -147,15 +143,16 @@
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
......@@ -163,13 +160,6 @@
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 2;
}
function animate() {
requestAnimationFrame( animate );
......@@ -181,13 +171,6 @@
mesh.rotation.y += 0.01;
//mesh.morphTargetInfluences[ 0 ] = Math.sin( mesh.rotation.y ) * 0.5 + 0.5;
//camera.position.x += ( mouseX - camera.position.x ) * .005;
camera.position.y += ( - mouseY - camera.position.y ) * .01;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
......
examples/webgl_shaders_ocean.html
浏览文件 @ 6c5354f4
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - terrain</title>
<title>three.js webgl - shaders - ocean</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
font-family:Monospace;
......@@ -20,21 +21,18 @@
padding: 5px;
}
a {
color: #a06851;
}
</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean demo</div>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean demo
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Mirror.js"></script>
<script src="js/WaterShader.js"></script>
<script src="js/Detector.js"></script>
......@@ -70,20 +68,27 @@
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
container = document.getElementById( 'container' );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xaabbbb, 0.0001);
scene.fog = new THREE.FogExp2( 0xaabbbb, 0.0001 );
//
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.set( 2000, 750, 2000 );
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.minDistance = 1000.0;
......@@ -93,10 +98,13 @@
scene.add( new THREE.AmbientLight( 0x444444 ) );
//
var light = new THREE.DirectionalLight( 0xffffbb, 1 );
light.position.set( - 1, 1, - 1 );
scene.add( light );
//
waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
......@@ -123,8 +131,7 @@
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );
// load skybox
// skybox
var cubeMap = new THREE.CubeTexture( [] );
cubeMap.format = THREE.RGBFormat;
......@@ -175,6 +182,7 @@
scene.add( skyBox );
//
var geometry = new THREE.IcosahedronGeometry( 400, 4 );
......@@ -193,6 +201,24 @@
sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
......@@ -201,6 +227,7 @@
requestAnimationFrame( animate );
render();
stats.update();
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或