mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
175 lines
3.8 KiB
HTML
175 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - path camera</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;
|
|
font-size:13px;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
|
|
background-color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
color:#000;
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
a { color: red; }
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container"></div>
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - path camera example</br>
|
|
mouse look around
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container, stats;
|
|
|
|
var camera, controls, scene, renderer;
|
|
|
|
var cross;
|
|
|
|
var clock = new THREE.Clock();
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
|
|
|
|
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
|
controls = new THREE.PathControls( camera );
|
|
|
|
controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
|
|
controls.duration = 28
|
|
controls.useConstantSpeed = true;
|
|
//controls.createDebugPath = true;
|
|
//controls.createDebugDummy = true;
|
|
controls.lookSpeed = 0.06;
|
|
controls.lookVertical = true;
|
|
controls.lookHorizontal = true;
|
|
controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
|
|
controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
|
|
controls.lon = 180;
|
|
|
|
controls.init();
|
|
|
|
scene.add( controls.animationParent );
|
|
|
|
// world
|
|
|
|
var cube = new THREE.CubeGeometry( 20, 60, 20 );
|
|
|
|
cube.vertices[ 0 ].position.multiplyScalar( 0.01 );
|
|
cube.vertices[ 1 ].position.multiplyScalar( 0.01 );
|
|
cube.vertices[ 4 ].position.multiplyScalar( 0.01 );
|
|
cube.vertices[ 5 ].position.multiplyScalar( 0.01 );
|
|
|
|
var material = new THREE.MeshLambertMaterial( { color:0xffffff } );
|
|
|
|
for ( var i = 0; i < 500; i ++ ) {
|
|
|
|
var mesh = new THREE.Mesh( cube, material );
|
|
mesh.position.set(
|
|
( Math.random() - 0.5 ) * 1000,
|
|
( Math.random() - 0.5 ) * 1000,
|
|
( Math.random() - 0.5 ) * 1000
|
|
);
|
|
|
|
mesh.updateMatrix();
|
|
mesh.matrixAutoUpdate = false;
|
|
scene.add( mesh );
|
|
|
|
}
|
|
|
|
// lights
|
|
|
|
light = new THREE.DirectionalLight( 0xffffff );
|
|
light.position.set( 1, 1, 1 );
|
|
scene.add( light );
|
|
|
|
light = new THREE.DirectionalLight( 0x002288 );
|
|
light.position.set( -1, -1, -1 );
|
|
scene.add( light );
|
|
|
|
light = new THREE.AmbientLight( 0x222222 );
|
|
scene.add( light );
|
|
|
|
|
|
// renderer
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: false } );
|
|
renderer.setClearColorHex( 0xffffff, 1 );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container = document.getElementById( 'container' );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
// stats
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
// start animation
|
|
|
|
controls.animation.play( true, 0 );
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var delta = clock.getDelta();
|
|
|
|
THREE.AnimationHandler.update( delta );
|
|
|
|
controls.update( delta );
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|