Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 1f7bc4e3 编写于 作者: A alteredq
浏览文件
操作

Made PathControls work. 

Aargh, I feel dirty now.
上级 4b7c468e
展开全部 隐藏空白更改
内联 并排
Showing with 511 addition and 599 deletion
build/Three.js
浏览文件 @ 1f7bc4e3
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
build/custom/ThreeExtras.js
浏览文件 @ 1f7bc4e3
此差异已折叠。
examples/misc_camera_path.html
浏览文件 @ 1f7bc4e3
......@@ -39,12 +39,15 @@
<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;
......@@ -61,21 +64,23 @@
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.resamplingCoef = 1;
controls.createDebugPath = true;
controls.createDebugDummy = true;
//controls.createDebugPath = true;
//controls.createDebugDummy = true;
controls.lookSpeed = 0.0006;
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
......@@ -126,12 +131,18 @@
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() {
......@@ -145,6 +156,9 @@
function render() {
THREE.AnimationHandler.update( 1/60 );
controls.update();
renderer.render( scene, camera );
}
......
examples/misc_camera_trackball.html
浏览文件 @ 1f7bc4e3
......@@ -39,121 +39,6 @@
<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>
......
src/extras/controls/PathControls.js
浏览文件 @ 1f7bc4e3
......@@ -2,11 +2,14 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.PathControls = function ( object ) {
THREE.PathControls = function ( object, domElement ) {
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
this.id = "PathCamera" + THREE.PathCameraIdCounter ++;
this.id = "PathControls" + THREE.PathControlsIdCounter ++;
// API
this.duration = 10 * 1000; // milliseconds
this.waypoints = [];
......@@ -25,7 +28,9 @@ THREE.PathControls = function ( object ) {
this.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
this.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
this.domElement = document;
// internals
this.target = new THREE.Object3D();
this.mouseX = 0;
this.mouseY = 0;
......@@ -37,12 +42,16 @@ THREE.PathControls = function ( object ) {
this.theta = 0;
if ( this.domElement === document ) {
this.viewHalfX = window.innerWidth / 2;
this.viewHalfY = window.innerHeight / 2;
} else {
this.viewHalfX = this.domElement.offsetWidth / 2;
this.viewHalfY = this.domElement.offsetHeight / 2;
this.domElement.setAttribute( 'tabindex', -1 );
}
var PI2 = Math.PI * 2,
......@@ -50,7 +59,7 @@ THREE.PathControls = function ( object ) {
// methods
this.update = function ( parentMatrixWorld, forceUpdate, camera ) {
this.update = function () {
var srcRange, dstRange;
......@@ -70,52 +79,46 @@ THREE.PathControls = function ( object ) {
srcRange = this.verticalAngleMap.srcRange;
dstRange = this.verticalAngleMap.dstRange;
//this.phi = map_linear( this.phi, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpPhi = map_linear( this.phi, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpPhiFullRange = dstRange[ 1 ] - dstRange[ 0 ];
var tmpPhiNormalized = ( tmpPhi - dstRange[ 0 ] ) / tmpPhiFullRange;
this.phi = TWEEN.Easing.Quadratic.EaseInOut( tmpPhiNormalized ) * tmpPhiFullRange + dstRange[ 0 ];
this.phi = QuadraticEaseInOut( tmpPhiNormalized ) * tmpPhiFullRange + dstRange[ 0 ];
// constrain horizontal look angle
srcRange = this.horizontalAngleMap.srcRange;
dstRange = this.horizontalAngleMap.dstRange;
//this.theta = map_linear( this.theta, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpTheta = map_linear( this.theta, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpThetaFullRange = dstRange[ 1 ] - dstRange[ 0 ];
var tmpThetaNormalized = ( tmpTheta - dstRange[ 0 ] ) / tmpThetaFullRange;
this.theta = TWEEN.Easing.Quadratic.EaseInOut( tmpThetaNormalized ) * tmpThetaFullRange + dstRange[ 0 ];
this.theta = QuadraticEaseInOut( tmpThetaNormalized ) * tmpThetaFullRange + dstRange[ 0 ];
var targetPosition = this.target.position,
position = this.position;
/*
targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = position.y + 100 * Math.cos( this.phi );
targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );
*/
position = this.object.position;
targetPosition.x = 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = 100 * Math.cos( this.phi );
targetPosition.z = 100 * Math.sin( this.phi ) * Math.sin( this.theta );
this.supr.update.call( this, parentMatrixWorld, forceUpdate, camera );
this.object.lookAt( this.target.position );
};
this.onMouseMove = function ( event ) {
if ( this.domElement === document ) {
this.mouseX = event.pageX - this.viewHalfX;
this.mouseY = event.pageY - this.viewHalfY;
} else {
this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
}
};
......@@ -151,6 +154,13 @@ THREE.PathControls = function ( object ) {
};
function QuadraticEaseInOut ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
return - 0.5 * ( --k * ( k - 2 ) - 1 );
};
function bind( scope, fn ) {
return function () {
......@@ -240,10 +250,10 @@ THREE.PathControls = function ( object ) {
particleObj = new THREE.ParticleSystem( particleGeo, new THREE.ParticleBasicMaterial( { color: 0xffaa00, size: 3 } ) );
lineObj.scale.set( 1, 1, 1 );
parent.addChild( lineObj );
parent.add( lineObj );
particleObj.scale.set( 1, 1, 1 );
parent.addChild( particleObj );
parent.add( particleObj );
var waypoint,
geo = new THREE.SphereGeometry( 1, 16, 8 ),
......@@ -253,58 +263,61 @@ THREE.PathControls = function ( object ) {
waypoint = new THREE.Mesh( geo, mat );
waypoint.position.copy( spline.points[ i ] );
waypoint.updateMatrix();
parent.addChild( waypoint );
parent.add( waypoint );
}
};
// constructor
this.init = function ( ) {
this.spline = new THREE.Spline();
this.spline.initFromArray( this.waypoints );
// constructor
if ( this.useConstantSpeed ) {
this.spline = new THREE.Spline();
this.spline.initFromArray( this.waypoints );
this.spline.reparametrizeByArcLength( this.resamplingCoef );
if ( this.useConstantSpeed ) {
}
this.spline.reparametrizeByArcLength( this.resamplingCoef );
if ( this.createDebugDummy ) {
}
var dummyParentMaterial = new THREE.MeshLambertMaterial( { color: 0x0077ff } ),
dummyChildMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } ),
dummyParentGeo = new THREE.CubeGeometry( 10, 10, 20 ),
dummyChildGeo = new THREE.CubeGeometry( 2, 2, 10 );
if ( this.createDebugDummy ) {
this.animationParent = new THREE.Mesh( dummyParentGeo, dummyParentMaterial );
var dummyParentMaterial = new THREE.MeshLambertMaterial( { color: 0x0077ff } ),
dummyChildMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } ),
dummyParentGeo = new THREE.CubeGeometry( 10, 10, 20 ),
dummyChildGeo = new THREE.CubeGeometry( 2, 2, 10 );
var dummyChild = new THREE.Mesh( dummyChildGeo, dummyChildMaterial );
dummyChild.position.set( 0, 10, 0 );
this.animationParent = new THREE.Mesh( dummyParentGeo, dummyParentMaterial );
this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
var dummyChild = new THREE.Mesh( dummyChildGeo, dummyChildMaterial );
dummyChild.position.set( 0, 10, 0 );
this.animationParent.addChild( this );
this.animationParent.addChild( this.target );
this.animationParent.addChild( dummyChild );
this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
} else {
this.animationParent.add( this.object );
this.animationParent.add( this.target );
this.animationParent.add( dummyChild );
} else {
this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
this.animationParent.addChild( this.target );
this.animationParent.addChild( this );
this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
this.animationParent.add( this.target );
this.animationParent.add( this.object );
}
}
if ( this.createDebugPath ) {
if ( this.createDebugPath ) {
createPath( this.debugPath, this.spline );
createPath( this.debugPath, this.spline );
}
}
this.domElement.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false );
this.domElement.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false );
};
};
THREE.PathCameraIdCounter = 0;
THREE.PathControlsIdCounter = 0;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或