Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

All canvas examples are now using RequestAnimationFrame.js 

Webgl examples next.
上级 a4ee822b
隐藏空白更改
内联 并排
Showing with 390 addition and 221 deletion
examples/canvas_camera_orthographic.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - camera - orthographic</title>
<title>three.js canvas - camera - orthographic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -18,6 +18,7 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -26,7 +27,7 @@
var camera, scene, renderer;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -115,19 +116,30 @@
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
container.appendChild( stats.domElement );
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = new Date().getTime() * 0.0001;
camera.position.x = Math.cos( timer ) * 200;
camera.position.z = Math.sin( timer ) * 200;
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
</script>
......
examples/canvas_geometry_birds.html
浏览文件 @ 5aa43cd1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>three.js - geometry - birds</title>
<title>three.js canvas - geometry - birds</title>
<style type="text/css">
body {
color: #808080;
......@@ -26,11 +26,12 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/Bird.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
// Based on http://www.openprocessing.org/visuals/?visualID=6910
......@@ -331,6 +332,7 @@
var stats;
init();
animate();
function init() {
......@@ -378,8 +380,6 @@
document.getElementById( 'container' ).appendChild(stats.domElement);
setInterval( loop, 1000 / 200 );
}
function onDocumentMouseMove( event ) {
......@@ -398,7 +398,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
for ( var i = 0, il = birds.length; i < il; i++ ) {
......@@ -421,8 +432,6 @@
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_geometry_cube.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - cube</title>
<title>three.js canvas - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -172,7 +172,7 @@
function render() {
plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
renderer.render(scene, camera);
renderer.render( scene, camera );
}
......
examples/canvas_geometry_earth.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - earth</title>
<title>three.js canvas - geometry - earth</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -33,14 +33,14 @@
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var container, stats;
......@@ -54,10 +54,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -98,7 +96,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
......@@ -106,7 +115,6 @@
mesh.rotation.y -= 0.005;
renderer.render( scene, camera );
stats.update();
}
......
examples/canvas_geometry_panorama.html
浏览文件 @ 5aa43cd1
......@@ -32,7 +32,6 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript">
......
examples/canvas_geometry_terrain.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - terrain</title>
<title>three.js canvas - geometry - terrain</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -33,12 +33,14 @@
<div id="container"><br /><br /><br /><br /><br />Generating...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var container, stats;
......@@ -53,10 +55,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -103,23 +103,6 @@
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render(scene, camera);
stats.update();
}
function generateHeight( width, height ) {
var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
......@@ -192,6 +175,33 @@
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
......
examples/canvas_interactive_cubes.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - cubes</title>
<title>three.js canvas - interactive - cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -17,6 +17,7 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -25,7 +26,7 @@
var camera, scene, projector, renderer;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -69,7 +70,7 @@
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
......@@ -112,18 +113,29 @@
*/
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var radius = 600;
var theta = 0;
function loop() {
function render() {
theta += 0.2;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
</script>
......
examples/canvas_interactive_cubes_tween.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - cubes tween</title>
<title>three.js canvas - interactive - cubes tween</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -18,6 +18,7 @@
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -26,7 +27,7 @@
var camera, scene, projector, renderer;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -118,10 +119,21 @@
*/
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var radius = 600;
var theta = 0;
function loop() {
function render() {
TWEEN.update();
......@@ -130,8 +142,8 @@
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
</script>
......
examples/canvas_interactive_voxelpainter.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - voxel painter</title>
<title>three.js canvas - interactive - voxel painter</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -15,10 +15,10 @@
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -31,7 +31,7 @@
theta = 45, isCtrlDown = false;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -186,7 +186,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( isShiftDown ) {
......@@ -221,7 +232,7 @@
camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_lights_pointlights.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - point light</title>
<title>three.js canvas - point light</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -38,8 +38,10 @@
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
......@@ -49,7 +51,7 @@
mesh;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -93,7 +95,17 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() * 0.0005;
......@@ -123,7 +135,7 @@
light3.position.y = particle3.position.y;
light3.position.z = particle3.position.z;
renderer.render(scene, camera);
renderer.render( scene, camera );
}
......
examples/canvas_lights_pointlights_smooth.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - point light</title>
<title>three.js canvas - point light smooth</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -38,8 +38,10 @@
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
......@@ -49,7 +51,7 @@
geometry, mesh;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -96,7 +98,17 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() * 0.0005;
......@@ -126,7 +138,7 @@
light3.position.y = particle3.position.y;
light3.position.z = particle3.position.z;
renderer.render(scene, camera);
renderer.render( scene, camera );
}
......
examples/canvas_lines.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - floor</title>
<title>three.js canvas - lines - random</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -18,7 +18,9 @@
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
......@@ -31,12 +33,10 @@
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer,
stats;
camera, scene, renderer;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -80,13 +80,6 @@
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
scene.addObject( line );
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
*/
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
......@@ -108,7 +101,9 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
......@@ -119,20 +114,28 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
renderer.render(scene, camera);
renderer.render( scene, camera );
// stats.update();
}
</script>
......
examples/canvas_lines_sphere.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - floor</title>
<title>three.js canvas - lines - sphere</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -18,7 +18,9 @@
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
......@@ -34,12 +36,10 @@
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer,
stats;
camera, scene, renderer;
init();
setInterval(loop, 1000 / 60);
animate();
function init() {
......@@ -92,16 +92,9 @@
geometry.vertices.push( new THREE.Vertex( vector2 ) );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
scene.addObject(line);
scene.addObject( line );
}
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
*/
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
......@@ -117,37 +110,47 @@
function onDocumentTouchStart( event ) {
if(event.touches.length > 1) {
if ( event.touches.length > 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if(event.touches.length == 1) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
renderer.render( scene, camera );
// stats.update();
}
</script>
......
examples/canvas_materials.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials</title>
<title>three.js canvas - materials</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -15,10 +15,10 @@
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -29,8 +29,7 @@
var particleLight, pointLight;
init();
// loop();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -172,7 +171,16 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = new Date().getTime() * 0.0001;
......@@ -198,7 +206,6 @@
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_materials_depth.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - depth material</title>
<title>three.js canvas - depth material</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -15,10 +15,10 @@
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -55,8 +55,7 @@
var debugContext;
init();
setInterval( loop, 1000 / 60 );
// loop();
animate();
function init() {
......@@ -129,7 +128,6 @@
scene.addLight( pointLight );
renderer = new THREE.CanvasRenderer();
// renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -196,7 +194,16 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
......@@ -216,14 +223,14 @@
if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
debugContext.clearRect( -256, -256, 512, 512 );
debugContext.clearRect( - 256, - 256, 512, 512 );
debugContext.beginPath();
// center
debugContext.moveTo( -10, 0 );
debugContext.moveTo( - 10, 0 );
debugContext.lineTo( 10, 0 );
debugContext.moveTo( 0, -10 );
debugContext.moveTo( 0, - 10 );
debugContext.lineTo( 0, 10 );
// camera
......@@ -249,9 +256,8 @@
debugContext.closePath();
debugContext.stroke();
renderer.render(scene, camera);
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_materials_normal.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - normal material</title>
<title>three.js canvas - normal material</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -41,13 +41,15 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
object;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -64,20 +66,29 @@
scene.addObject( object );
renderer = new THREE.CanvasRenderer();
//renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() * 0.0005;
object.rotation.x -= 0.005;
object.rotation.y -= 0.01;
renderer.render(scene, camera);
renderer.render( scene, camera );
}
......
examples/canvas_materials_reflection.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - spherical reflection</title>
<title>three.js canvas - spherical reflection</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -42,6 +42,8 @@
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
......@@ -50,7 +52,7 @@
geometry, mesh;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -74,13 +76,23 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = new Date().getTime() * 0.0005;
mesh.rotation.y -= 0.01;
renderer.render(scene, camera);
renderer.render( scene, camera );
}
......
examples/canvas_materials_video.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - materials - video</title>
<title>three.js canvas - materials - video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -15,11 +15,12 @@
</head>
<body>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<video id="video" autoplay style="display:none">
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
......@@ -44,12 +45,8 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -148,6 +145,8 @@
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove(event) {
......@@ -157,7 +156,18 @@
}
function loop() {
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
......@@ -172,7 +182,6 @@
textureReflectionContext.fillRect( 0, 0, 480, 204 );
renderer.render( scene, camera );
stats.update();
}
......
examples/canvas_particles_floor.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - floor</title>
<title>three.js canvas - particles - floor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -19,6 +19,8 @@
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -35,7 +37,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -106,14 +108,22 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_particles_random.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - random</title>
<title>three.js canvas - particles - random</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -20,6 +20,7 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -32,12 +33,12 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
......@@ -100,14 +101,22 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_particles_sprites.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - sprites</title>
<title>three.js canvas - particles - sprites</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -19,8 +19,10 @@
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript">
......@@ -32,12 +34,12 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 1000;
......@@ -76,7 +78,6 @@
var canvas = document.createElement( 'canvas' );
canvas.width = 16;
canvas.height = 16;
canvas.loaded = true;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
......@@ -136,7 +137,9 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
......@@ -147,12 +150,23 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
TWEEN.update();
......@@ -161,7 +175,6 @@
renderer.render( scene, camera );
stats.update();
}
</script>
......
examples/canvas_particles_waves.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - particles - waves</title>
<title>three.js canvas - particles - waves</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
......@@ -18,6 +18,8 @@
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -35,7 +37,7 @@
var windowHalfY = window.innerHeight / 2;
init();
setInterval(loop, 1000 / 60);
animate();
function init() {
......@@ -116,7 +118,16 @@
//
function loop() {
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
......@@ -136,8 +147,6 @@
renderer.render( scene, camera );
stats.update();
count += 0.1;
}
......
examples/canvas_performance.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - sphere</title>
<title>three.js canvas - performance</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -16,7 +16,7 @@
<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
......@@ -83,6 +83,7 @@
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -103,27 +104,7 @@
var windowHalfY = window.innerHeight / 2;
init();
/*
var accum = 0, result = 0, results = [], amount = 100;
for ( var i = 0; i < amount; i ++ ) {
var timer = new Date().getTime();
loop();
accum += result = new Date().getTime() - timer;
results.push( result );
}
console.log( results );
console.log( accum / amount );
*/
// loop();
setInterval( loop, 1000 / 60 );
animate();
function init() {
......@@ -203,11 +184,19 @@
//
function loop() {
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
......
examples/canvas_sandbox.html
浏览文件 @ 5aa43cd1
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - sphere</title>
<title>three.js canvas - sandbox</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -83,6 +83,7 @@
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
......@@ -114,7 +115,7 @@
var debugContext;
init();
setInterval( render, 1000 / 60 );
animate();
function init() {
......@@ -259,6 +260,15 @@
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( moveForward ) camera.position.z -= 5;
......@@ -313,9 +323,7 @@
debugContext.closePath();
debugContext.stroke();
renderer.render(scene, camera);
stats.update();
renderer.render( scene, camera );
}
......
src/extras/MiscUtils.js 已删除 100644 → 0
浏览文件 @ a4ee822b
/**
* @author greggman / http://greggman.com/
*/
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
window.setTimeout(callback, 1000/60);
};
})();
};
\ No newline at end of file
utils/build.py
浏览文件 @ 5aa43cd1
......@@ -82,7 +82,6 @@ EXTRAS_FILES = [
'extras/Detector.js',
'extras/GeometryUtils.js',
'extras/ImageUtils.js',
'extras/MiscUtils.js',
'extras/SceneUtils.js',
'extras/ShaderUtils.js',
'extras/primitives/Cube.js',
......@@ -396,7 +395,7 @@ def main(argv=None):
debug = args.debug
config = [
['Three', 'includes_common', COMMON_FILES, args.common],
['Three', 'includes_common', COMMON_FILES, args.common],
['ThreeCanvas', 'includes_canvas', CANVAS_FILES, args.canvas],
['ThreeWebGL', 'includes_webgl', WEBGL_FILES, args.webgl],
['ThreeSVG', 'includes_svg', SVG_FILES, args.svg],
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或