home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

added new TrackballCamera-example and changed keys

Browse Source
This commit is contained in:
Eberhard Gräther
2011-05-29 23:45:15 +02:00
parent 20abaadaef
commit 359407b722
3 changed files with 215 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/misc_camera_trackball.html
+194
View File
@@ -0,0 +1,194 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - trackball camera</title>
<meta charset="utf-8">
<style type="text/css">
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> - trackball camera example</br>
MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/cameras/TrackballCamera.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var statsEnabled = true;
var container, stats;
var camera, scene, renderer;
var cross;
init();
function init() {
// scene and camera
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xffffff, 0.002 );
camera = new THREE.TrackballCamera({
fov: 60,
aspect: window.innerWidth / window.innerHeight,
near: 1,
far: 1e3,
rotateSpeed: 1.0,
zoomSpeed: 1.2,
panSpeed: 0.4,
noZoom: false,
noPan: false,
staticMoving: false,
dynamicDampingFactor: 0.3,
keys: [ 65, 83, 68 ]
});
camera.position.z = 500;
// world
var cube = new THREE.Cube( 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.addChild( mesh );
}
// create cross
/*
cross = new THREE.Object3D();
cross.scale.set( 0.5, 0.5, 0.5 );
cross.matrixAutoUpdate = false;
var material = new THREE.MeshPhongMaterial( { color:0xff0000 } );
var mesh = new THREE.Mesh( new THREE.Cube( 40, 5, 5 ), material );
mesh.position.x = 20;
cross.addChild( mesh );
var material = new THREE.MeshPhongMaterial( { color:0x00ff00 } );
var mesh = new THREE.Mesh( new THREE.Cube( 5, 40, 5 ), material );
mesh.position.y = 20;
cross.addChild( mesh );
var material = new THREE.MeshPhongMaterial( { color:0x0000ff } );
var mesh = new THREE.Mesh( new THREE.Cube( 5, 5, 40 ), material );
mesh.position.z = 20;
cross.addChild( mesh );
camera.addChild( cross );
*/
// lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.addChild( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.addChild( light );
light = new THREE.AmbientLight( 0x222222 );
scene.addChild( 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 );
if ( statsEnabled ) {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
}
setInterval( loop, 1000 / 60 );
}
function loop() {
/*
cross.matrix.copy( camera.matrix );
cross.matrix.n14 = 0;
cross.matrix.n24 = 0;
cross.matrix.n34 = -200;
cross.matrixWorldNeedsUpdate = true;
*/
renderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
</script>
</body>
</html>
examples/webgl_trackballcamera_earth.html
+20 -51
View File
@@ -5,7 +5,7 @@
<style type="text/css">
body {
background: #FFF;
background: #000;
color: #EEE;
padding: 0;
margin: 0;
@@ -42,17 +42,11 @@
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
<b>MOVE</b> mouse & press <b>LEFT/SHIFT:</b> rotate, <b>MIDDLE/ALT:</b> zoom, <b>RIGHT/CTRL:</b> pan</div>
<b>MOVE</b> mouse & press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
</div>
<script type="text/javascript">
if ( !Detector.webgl ) {
Detector.addGetWebGLMessage();
return;
}
var radius = 6371,
tilt = 0.41,
rotationSpeed = 0.1,
@@ -66,13 +60,20 @@
container, stats,
camera, scene, renderer,
geometry, meshPlanet, meshClouds, meshMoon, meshMoon2, meshMoon3,
geometry, meshPlanet, meshClouds, meshMoon,
dirLight, ambientLight,
time = new Date().getTime();
window.onload = function() {
if ( !Detector.webgl ) {
Detector.addGetWebGLMessage();
return;
}
init();
animate();
@@ -101,7 +102,7 @@
near: 50,
far: 1e7,
rotateSpeed: 0.6,
rotateSpeed: 1.0,
zoomSpeed: 1.2,
panSpeed: 0.2,
@@ -109,12 +110,12 @@
noPan: false,
staticMoving: false,
dynamicDampingFactor: 0.2,
dynamicDampingFactor: 0.3,
minDistance: radius * 1.1,
maxDistance: radius * 100,
keys: [ 16, 18, 17 ], // [ rotateKey, zoomKey, panKey ],
keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
domElement: renderer.domElement,
@@ -199,26 +200,6 @@
scene.addObject( meshMoon );
// moon2
var materialMoon2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
meshMoon2 = new THREE.Mesh( geometry, materialMoon );
meshMoon2.position.set( -radius * 7, 0, radius * 3 );
meshMoon2.scale.set( moonScale, moonScale, moonScale );
scene.addObject( meshMoon2 );
// moon3
var materialMoon3 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
meshMoon3 = new THREE.Mesh( geometry, materialMoon );
meshMoon3.position.set( radius, 0, -radius * 10 );
meshMoon3.scale.set( moonScale, moonScale, moonScale );
scene.addObject( meshMoon3 );
// stars
var i,
@@ -309,30 +290,18 @@
var angle = dt * rotationSpeed;
meshMoon.position = rotateY( meshMoon.position, angle * 2 );
meshMoon.rotation.y += angle;
meshMoon2.position = rotateY( meshMoon2.position, -angle * 1.5 );
meshMoon2.rotation.y += angle;
meshMoon3.position = rotateY( meshMoon3.position, angle );
meshMoon3.rotation.y += angle;
meshMoon.position = new THREE.Vector3(
Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
0,
Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
);
meshMoon.rotation.y -= angle;
renderer.clear();
renderer.render( scene, camera );
};
function rotateY( vector, angle ) {
return new THREE.Vector3(
Math.cos( angle ) * vector.x - Math.sin( angle ) * vector.z,
0,
Math.sin( angle ) * vector.x + Math.cos( angle ) * vector.z
);
};
</script>
</body>
</html>
src/extras/cameras/TrackballCamera.js
+1 -1
View File
@@ -56,7 +56,7 @@ THREE.TrackballCamera = function ( parameters ) {
this.minDistance = parameters.minDistance || 0;
this.maxDistance = parameters.maxDistance || Infinity;
this.keys = parameters.keys || [ 16 /*SHIFT*/, 18 /*ALT*/, 17 /*CTRL*/ ];
this.keys = parameters.keys || [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
this.useTarget = true;