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.
154 lines
3.3 KiB
HTML
154 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - roll 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> - roll camera example</br>
|
|
WASD move, RF up/down, QE roll, 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 and camera
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
|
|
|
|
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
|
controls = new THREE.RollControls( camera );
|
|
|
|
controls.movementSpeed = 100;
|
|
controls.lookSpeed = 3;
|
|
controls.constrainVertical = [ -0.5, 0.5 ];
|
|
//controls.autoForward = true;
|
|
|
|
// 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 );
|
|
|
|
}
|
|
|
|
scene.add( camera );
|
|
|
|
// 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 = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
controls.update( clock.getDelta() );
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |