Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 4b7c468e 编写于 作者: A alteredq
浏览文件
操作

Made TrackballControls work. Fixed more examples. 

This one was quite a pain.
上级 ef29a8e3
隐藏空白更改
内联 并排
Showing with 505 addition and 408 deletion
build/Three.js
浏览文件 @ 4b7c468e
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/misc_camera_roll.html
浏览文件 @ 4b7c468e
......@@ -47,8 +47,6 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var statsEnabled = true;
var container, stats;
var camera, controls, scene, renderer;
......@@ -123,20 +121,14 @@
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 );
}
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 );
......@@ -144,7 +136,7 @@
render();
stats.update();
};
}
function render() {
......@@ -157,4 +149,4 @@
</script>
</body>
</html>
</html>
\ No newline at end of file
examples/misc_camera_trackball.html
浏览文件 @ 4b7c468e
......@@ -39,19 +39,137 @@
<script src="../build/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>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Ray.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Object3D.js"></script>
<script type="text/javascript" src="../src/core/Projector.js"></script>
<script type="text/javascript" src="../src/core/Quaternion.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/core/Spline.js"></script>
<script type="text/javascript" src="../src/core/Edge.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/cameras/OrthographicCamera.js"></script>
<script type="text/javascript" src="../src/cameras/PerspectiveCamera.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
<script type="text/javascript" src="../src/lights/SpotLight.js"></script>
<script type="text/javascript" src="../src/materials/Material.js"></script>
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCanvasMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ShaderMaterial.js"></script>
<script type="text/javascript" src="../src/textures/Texture.js"></script>
<script type="text/javascript" src="../src/textures/DataTexture.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Bone.js"></script>
<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
<script type="text/javascript" src="../src/objects/LOD.js"></script>
<script type="text/javascript" src="../src/objects/Sprite.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/scenes/Fog.js"></script>
<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLShaders.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderTarget.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderTargetCube.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableVertex.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../src/extras/ColorUtils.js"></script>
<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
<script type="text/javascript" src="../src/extras/core/Curve.js"></script>
<script type="text/javascript" src="../src/extras/core/CurvePath.js"></script>
<script type="text/javascript" src="../src/extras/core/Path.js"></script>
<script type="text/javascript" src="../src/extras/core/Shape.js"></script>
<script type="text/javascript" src="../src/extras/core/TextPath.js"></script>
<script type="text/javascript" src="../src/extras/animation/AnimationHandler.js"></script>
<script type="text/javascript" src="../src/extras/animation/Animation.js"></script>
<script type="text/javascript" src="../src/extras/cameras/CubeCamera.js"></script>
<script type="text/javascript" src="../src/extras/cameras/FirstPersonCamera.js"></script>
<script type="text/javascript" src="../src/extras/cameras/PathCamera.js"></script>
<script type="text/javascript" src="../src/extras/cameras/FlyCamera.js"></script>
<script type="text/javascript" src="../src/extras/cameras/RollCamera.js"></script>
<script type="text/javascript" src="../src/extras/cameras/TrackballCamera.js"></script>
<script type="text/javascript" src="../src/extras/controls/FirstPersonControls.js"></script>
<script type="text/javascript" src="../src/extras/controls/PathControls.js"></script>
<script type="text/javascript" src="../src/extras/controls/FlyControls.js"></script>
<script type="text/javascript" src="../src/extras/controls/RollControls.js"></script>
<script type="text/javascript" src="../src/extras/controls/TrackballControls.js"></script>
<script type="text/javascript" src="../src/extras/geometries/CubeGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/CylinderGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/ExtrudeGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/IcosahedronGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/LatheGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/OctahedronGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/PlaneGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/SphereGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/TextGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/TorusGeometry.js"></script>
<script type="text/javascript" src="../src/extras/geometries/TorusKnotGeometry.js"></script>
<script type="text/javascript" src="../src/extras/modifiers/SubdivisionModifier.js"></script>
<script type="text/javascript" src="../src/extras/loaders/Loader.js"></script>
<script type="text/javascript" src="../src/extras/loaders/BinaryLoader.js"></script>
<script type="text/javascript" src="../src/extras/loaders/ColladaLoader.js"></script>
<script type="text/javascript" src="../src/extras/loaders/JSONLoader.js"></script>
<script type="text/javascript" src="../src/extras/loaders/SceneLoader.js"></script>
<script type="text/javascript" src="../src/extras/loaders/UTF8Loader.js"></script>
<script type="text/javascript" src="../src/extras/objects/Axes.js"></script>
<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
<script type="text/javascript" src="../src/extras/physics/Collisions.js"></script>
<script type="text/javascript" src="../src/extras/physics/CollisionUtils.js"></script>
<script type="text/javascript" src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
<script type="text/javascript" src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
<script src="js/Detector.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/Stats.js"></script>
<script>
var statsEnabled = true;
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
......@@ -60,28 +178,22 @@
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.8,
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 500;
noZoom: false,
noPan: false,
controls = new THREE.TrackballControls( camera );
staticMoving: true,
dynamicDampingFactor: 0.3,
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
keys: [ 65, 83, 68 ]
controls.noZoom = false;
controls.noPan = false;
});
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
camera.position.z = 500;
controls.keys = [ 65, 83, 68 ];
// world
......@@ -92,9 +204,9 @@
cube.vertices[ 4 ].position.multiplyScalar( 0.01 );
cube.vertices[ 5 ].position.multiplyScalar( 0.01 );
var material = new THREE.MeshLambertMaterial( { color:0xffffff } );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
for( var i = 0; i < 500; i++ ) {
for( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( cube, material );
mesh.position.set(( Math.random() - 0.5 ) * 1000,
......@@ -131,26 +243,29 @@
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 );
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 animate() {
requestAnimationFrame( animate );
function loop() {
render();
stats.update();
renderer.render( scene, camera );
}
if ( statsEnabled ) stats.update();
function render() {
controls.update();
renderer.render( scene, camera );
}
......
examples/webgl_trackballcamera_earth.html
浏览文件 @ 4b7c468e
......@@ -31,6 +31,7 @@
</style>
<script src="../build/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/Stats.js"></script>
......@@ -58,7 +59,7 @@
container, stats,
camera, scene, renderer,
camera, controls, scene, renderer,
geometry, meshPlanet, meshClouds, meshMoon,
dirLight, ambientLight,
......@@ -83,49 +84,37 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
renderer.setSize( width, height );
renderer.sortObjects = false;
renderer.autoClear = false;
container.appendChild( renderer.domElement );
camera = new THREE.TrackballCamera({
fov: 25,
aspect: width / height,
near: 50,
far: 1e7,
rotateSpeed: 1.0,
zoomSpeed: 1.2,
panSpeed: 0.2,
noZoom: false,
noPan: false,
container.appendChild( renderer.domElement );
staticMoving: false,
dynamicDampingFactor: 0.3,
camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
camera.position.z = radius * 7;
minDistance: radius * 1.1,
maxDistance: radius * 100,
controls = new THREE.TrackballControls( camera, renderer.domElement );
keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
domElement: renderer.domElement,
controls.noZoom = false;
controls.noPan = false;
});
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
camera.position.z = radius * 7;
controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;
controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set( -1, 0, 1 );
dirLight.position.normalize();
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );
var planetTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" ),
......@@ -289,6 +278,8 @@
);
meshMoon.rotation.y -= angle;
controls.update();
renderer.clear();
renderer.render( scene, camera );
......
src/extras/controls/TrackballControls.js
浏览文件 @ 4b7c468e
......@@ -2,36 +2,35 @@
* @author Eberhard Graether / http://egraether.com/
*/
THREE.TrackballControls = function ( object ) {
// target.position is modified when panning
THREE.TrackballControls = function ( object, domElement ) {
this.object = object;
this.domElement = parameters.domElement || document;
this.domElement = ( domElement !== undefined ) ? domElement : document;
this.screen = parameters.screen || { width : window.innerWidth, height : window.innerHeight, offsetLeft : 0, offsetTop : 0 };
this.radius = parameters.radius || ( this.screen.width + this.screen.height ) / 4;
// API
this.rotateSpeed = parameters.rotateSpeed || 1.0;
this.zoomSpeed = parameters.zoomSpeed || 1.2;
this.panSpeed = parameters.panSpeed || 0.3;
this.screen = { width: window.innerWidth, height: window.innerHeight, offsetLeft: 0, offsetTop: 0 };
this.radius = ( this.screen.width + this.screen.height ) / 4;
this.noZoom = parameters.noZoom || false;
this.noPan = parameters.noPan || false;
this.rotateSpeed = 1.0;
this.zoomSpeed = 1.2;
this.panSpeed = 0.3;
this.staticMoving = parameters.staticMoving || false;
this.dynamicDampingFactor = parameters.dynamicDampingFactor || 0.2;
this.noZoom = false;
this.noPan = false;
this.minDistance = parameters.minDistance || 0;
this.maxDistance = parameters.maxDistance || Infinity;
this.staticMoving = false;
this.dynamicDampingFactor = 0.2;
this.keys = parameters.keys || [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
this.minDistance = 0;
this.maxDistance = Infinity;
this.useTarget = true;
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
// internals
//internals
this.target = new THREE.Vector3( 0, 0, 0 );
var _keyPressed = false,
_state = this.STATE.NONE,
......@@ -89,10 +88,10 @@ THREE.TrackballControls = function ( object ) {
}
_eye = this.position.clone().subSelf( this.target.position );
_eye.copy( this.object.position ).subSelf( this.target );
var projection = this.up.clone().setLength( mouseOnBall.y );
projection.addSelf( this.up.clone().crossSelf( _eye ).setLength( mouseOnBall.x ) );
var projection = this.object.up.clone().setLength( mouseOnBall.y );
projection.addSelf( this.object.up.clone().crossSelf( _eye ).setLength( mouseOnBall.x ) );
projection.addSelf( _eye.setLength( mouseOnBall.z ) );
return projection;
......@@ -105,15 +104,15 @@ THREE.TrackballControls = function ( object ) {
if ( angle ) {
var axis = (new THREE.Vector3()).cross( _rotateStart, _rotateEnd ).normalize(),
quaternion = new THREE.Quaternion();
var axis = ( new THREE.Vector3() ).cross( _rotateStart, _rotateEnd ).normalize(),
quaternion = new THREE.Quaternion();
angle *= this.rotateSpeed;
quaternion.setFromAxisAngle( axis, -angle );
quaternion.multiplyVector3( _eye );
quaternion.multiplyVector3( this.up );
quaternion.multiplyVector3( this.object.up );
quaternion.multiplyVector3( _rotateEnd );
......@@ -162,11 +161,11 @@ THREE.TrackballControls = function ( object ) {
mouseChange.multiplyScalar( _eye.length() * this.panSpeed );
var pan = _eye.clone().crossSelf( this.up ).setLength( mouseChange.x );
pan.addSelf( this.up.clone().setLength( mouseChange.y ) );
var pan = _eye.clone().crossSelf( this.object.up ).setLength( mouseChange.x );
pan.addSelf( this.object.up.clone().setLength( mouseChange.y ) );
this.position.addSelf( pan );
this.target.position.addSelf( pan );
this.object.position.addSelf( pan );
this.target.addSelf( pan );
if ( this.staticMoving ) {
......@@ -186,15 +185,15 @@ THREE.TrackballControls = function ( object ) {
if ( !this.noZoom || !this.noPan ) {
if ( this.position.lengthSq() > this.maxDistance * this.maxDistance ) {
if ( this.object.position.lengthSq() > this.maxDistance * this.maxDistance ) {
this.position.setLength( this.maxDistance );
this.object.position.setLength( this.maxDistance );
}
if ( _eye.lengthSq() < this.minDistance * this.minDistance ) {
this.position.add( this.target.position, _eye.setLength( this.minDistance ) );
this.object.position.add( this.target, _eye.setLength( this.minDistance ) );
}
......@@ -202,9 +201,9 @@ THREE.TrackballControls = function ( object ) {
};
this.update = function( parentMatrixWorld, forceUpdate, camera ) {
this.update = function() {
_eye = this.position.clone().subSelf( this.target.position ),
_eye.copy( this.object.position ).subSelf( this.target );
this.rotateCamera();
......@@ -220,11 +219,11 @@ THREE.TrackballControls = function ( object ) {
}
this.position.add( this.target.position, _eye );
this.object.position.add( this.target, _eye );
this.checkDistances();
this.supr.update.call( this, parentMatrixWorld, forceUpdate, camera );
this.object.lookAt( this.target );
};
......@@ -269,7 +268,7 @@ THREE.TrackballControls = function ( object ) {
};
function mousedown(event) {
function mousedown( event ) {
event.preventDefault();
event.stopPropagation();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或