Javascript 当我调用相机位置three.js时,我似乎只能调用起始位置,而不能调用当前位置
我正在用THREEJS编辑一个路径文件,因为我希望摄影机始终垂直于它正在移动的路径(而原始文件允许用户使用鼠标更改摄影机目标)。该项目是一个3D艺术画廊 基本上,我正在尝试做的是,我已经创建了一个视图向量数组,它对应于相机路径上的样条曲线点,我正在尝试做的是,每次相机位置到达下一个样条曲线点时,重置相机视图。然而,在我看来,每当我在样条曲线点之间循环以查看样条曲线点是否与相机位置匹配时,我尝试调用相机位置时,得到的只是相机位置的(0,0,0) 行警报(this.object.position.z);只是说零,但相机的z位置在起点和大部分点上都不是零。我好像没叫摄像机的位置。任何帮助都将不胜感激Javascript 当我调用相机位置three.js时,我似乎只能调用起始位置,而不能调用当前位置,javascript,three.js,Javascript,Three.js,我正在用THREEJS编辑一个路径文件,因为我希望摄影机始终垂直于它正在移动的路径(而原始文件允许用户使用鼠标更改摄影机目标)。该项目是一个3D艺术画廊 基本上,我正在尝试做的是,我已经创建了一个视图向量数组,它对应于相机路径上的样条曲线点,我正在尝试做的是,每次相机位置到达下一个样条曲线点时,重置相机视图。然而,在我看来,每当我在样条曲线点之间循环以查看样条曲线点是否与相机位置匹配时,我尝试调用相机位置时,得到的只是相机位置的(0,0,0) 行警报(this.object.position.z
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.PathControls = function ( object, domElement ) {
//var lookvector;
var cc = new Array();
cc[0]= new THREE.Vector3(0,0,-1);
var aa = 1;
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
this.id = "PathControls" + THREE.PathControlsIdCounter ++;
// API
this.duration = 10 * 1000; // milliseconds
this.waypoints = [];
this.spline = [];
this.useConstantSpeed = true;
this.resamplingCoef = 50;
this.debugPath = new THREE.Object3D();
this.debugDummy = new THREE.Object3D();
this.animationParent = new THREE.Object3D();
this.lookSpeed = 0.005;
this.lookVertical = true;
this.lookHorizontal = true;
this.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
this.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
// internals
this.target = new THREE.Object3D();
this.mouseX = 0;
this.mouseY = 0;
this.lat = 0;
this.lon = 0;
this.phi = 0;
this.theta = 0;
var PI2 = Math.PI * 2;
this.viewHalfX = 0;
this.viewHalfY = 0;
if ( this.domElement !== document ) {
this.domElement.setAttribute( 'tabindex', -1 );
}
// methods
this.handleResize = function () {
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.update = function ( delta ) {
var srcRange, dstRange;
if( this.lookHorizontal ) this.lon += this.mouseX * this.lookSpeed * delta;
if( this.lookVertical ) this.lat -= this.mouseY * this.lookSpeed * delta;
this.lon = this.lon;
this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
this.phi = THREE.Math.degToRad( 90 - this.lat );
this.theta = THREE.Math.degToRad( this.lon );
this.phi = normalize_angle_rad( this.phi );
// constrain vertical look angle
srcRange = this.verticalAngleMap.srcRange;
dstRange = this.verticalAngleMap.dstRange;
var tmpPhi = THREE.Math.mapLinear( this.phi, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpPhiFullRange = dstRange[ 1 ] - dstRange[ 0 ];
var tmpPhiNormalized = ( tmpPhi - dstRange[ 0 ] ) / tmpPhiFullRange;
this.phi = QuadraticEaseInOut( tmpPhiNormalized ) * tmpPhiFullRange + dstRange[ 0 ];
// constrain horizontal look angle
srcRange = this.horizontalAngleMap.srcRange;
dstRange = this.horizontalAngleMap.dstRange;
var tmpTheta = THREE.Math.mapLinear( this.theta, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
var tmpThetaFullRange = dstRange[ 1 ] - dstRange[ 0 ];
var tmpThetaNormalized = ( tmpTheta - dstRange[ 0 ] ) / tmpThetaFullRange;
this.theta = QuadraticEaseInOut( tmpThetaNormalized ) * tmpThetaFullRange + dstRange[ 0 ];
var targetPosition = this.target.position,
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 );
for (i=0; i < cc.length; i++){
if (this.waypoints[i]==this.object.position){
//this.object.lookAt( cc[i] );
}
}
alert(this.object.position.z);
};
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;
}
};
// utils
function normalize_angle_rad( a ) {
var b = a % PI2;
return b >= 0 ? b : b + PI2;
};
function distance( a, b ) {
var dx = a[ 0 ] - b[ 0 ],
dy = a[ 1 ] - b[ 1 ],
dz = a[ 2 ] - b[ 2 ];
return Math.sqrt( dx * dx + dy * dy + dz * dz );
};
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 () {
fn.apply( scope, arguments );
};
};
function initAnimationPath( parent, spline, name, duration ) {
var animationData = {
name: name,
fps: 0.6,
length: duration,
hierarchy: []
};
var i,
parentAnimation, childAnimation,
path = spline.getControlPointsArray(),
sl = spline.getLength(),
pl = path.length,
t = 0,
first = 0,
last = pl - 1;
parentAnimation = { parent: -1, keys: [] };
parentAnimation.keys[ first ] = { time: 0, pos: path[ first ], rot: [ 0, 0, 0, 1 ], scl: [ 1, 1, 1 ] };
parentAnimation.keys[ last ] = { time: duration, pos: path[ last ], rot: [ 0, 0, 0, 1 ], scl: [ 1, 1, 1 ] };
for ( i = 1; i < pl - 1; i++ ) {
// real distance (approximation via linear segments)
t = duration * sl.chunks[ i ] / sl.total;
// equal distance
//t = duration * ( i / pl );
// linear distance
//t += duration * distance( path[ i ], path[ i - 1 ] ) / sl.total;
parentAnimation.keys[ i ] = { time: t, pos: path[ i ] };
}
animationData.hierarchy[ 0 ] = parentAnimation;
THREE.AnimationHandler.add( animationData );
return new THREE.Animation( parent, name, THREE.AnimationHandler.CATMULLROM_FORWARD, false );
};
function createSplineGeometry( spline, n_sub ) {
var i, index, position,
geometry = new THREE.Geometry();
for ( i = 0; i < spline.points.length * n_sub; i ++ ) {
index = i / ( spline.points.length * n_sub );
position = spline.getPoint( index );
geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
}
return geometry;
};
function createPath( parent, spline, mycam) {
var lineGeo = createSplineGeometry( spline, 10 ),
particleGeo = createSplineGeometry( spline, 10 ),
lineMat = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 3 } ),
lineObj = new THREE.Line( lineGeo, lineMat ),
particleObj = new THREE.ParticleSystem( particleGeo, new THREE.ParticleSystemMaterial( { color: 0xffaa00, size: 3 } ) );
lineObj.scale.set( 1, 1, 1 );
parent.add( lineObj );
particleObj.scale.set( 1, 1, 1 );
parent.add( particleObj );
var waypoint,
geo = new THREE.SphereGeometry( 1, 16, 8 ),
mat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
aa = 0;
var myval;
for ( var i = 0; i < spline.points.length; i ++ ) {
if( i > 0 ) {
var mydirection = new THREE.Vector3(spline.points[i].x - spline.points[i-1].x, spline.points[i].y - spline.points[i-1].y, spline.points[i].z - spline.points[i-1].z);
var planevector = new THREE.Vector3(0,1,0);
var myc = new THREE.Vector3();
myc.crossVectors( mydirection, planevector );
cc[i] = myc;
} else {cc[0] = new THREE.Vector3(0.05,0,-1);}
waypoint = new THREE.Mesh( geo, mat );
waypoint.position.copy( spline.points[ i ] );
parent.add( waypoint );
}
};
this.init = function ( ) {
// constructor
this.spline = new THREE.Spline();
this.spline.initFromArray( this.waypoints );
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 );
this.animationParent = new THREE.Mesh( dummyParentGeo, dummyParentMaterial );
var dummyChild = new THREE.Mesh( dummyChildGeo, dummyChildMaterial );
dummyChild.position.set( 0, 10, 0 );
this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
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.add( this.target );
this.animationParent.add( this.object );
}
// if ( this.createDebugPath ) {
createPath( this.debugPath, this.spline, this.object );
// }
this.domElement.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false );
};
this.handleResize();
};
THREE.PathControlsIdCounter = 0;
/**
*@author alteredq/http://alteredqualia.com/
*/
THREE.PathControls=函数(对象、DomeElement){
//向量向量;
var cc=新数组();
cc[0]=新的三向量3(0,0,-1);
var aa=1;
this.object=对象;
this.domElement=(domElement!==未定义)?domElement:文档;
this.id=“PathControls”+THREE.PathControlsIdCounter++;
//原料药
this.duration=10*1000;//毫秒
this.waypoints=[];
this.spline=[];
this.useConstantSpeed=true;
此参数为:重采样系数=50;
this.debugPath=new THREE.Object3D();
this.debugDummy=new THREE.Object3D();
this.animationParent=new THREE.Object3D();
该速度为0.005;
this.lookVertical=true;
this.lookHorizontal=true;
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.target=new THREE.Object3D();
this.mouseX=0;
this.mouseY=0;
这个.lat=0;
这是0.lon=0;
这个φ=0;
这个θ=0;
var PI2=Math.PI*2;
this.viewHalfX=0;
this.viewHalfY=0;
if(this.domeElement!==文档){
this.domeElement.setAttribute('tabindex',-1);
}
//方法
this.handleResize=函数(){
if(this.domeElement==文档){
this.viewHalfX=window.innerWidth/2;
this.viewHalfY=window.innerHeight/2;
}否则{
this.viewHalfX=this.domeElement.offsetWidth/2;
this.viewHalfY=this.domeElement.offsetHeight/2;
}
};
this.update=函数(增量){
var范围,dstRange;
如果(this.lookHorizontal)this.lon+=this.mouseX*this.lookSpeed*delta;
如果(this.lookVertical)this.lat-=this.mouseY*this.lookSpeed*delta;
this.lon=this.lon;
this.lat=Math.max(-85,Math.min(85,this.lat));
this.phi=3.Math.degToRad(90-this.lat);
this.theta=3.Math.degToRad(this.lon);
this.phi=标准化角度(this.phi);
//约束垂直视角
srcRange=this.verticalAngleMap.srcRange;
dstRange=this.verticalAngleMap.dstRange;
var tmpPhi=THREE.Math.mapLinear(this.phi,srcRange[0],srcRange[1],dstRange[0],dstRange[1]);
var tmpPhiFullRange=dstRange[1]-dstRange[0];
var tmpPhiNormalized=(tmpPhi-dstRange[0])/tmpPhiFullRange;
this.phi=平方ASEINOUT(tmpph标准化)*tmpPhiFullRange+dstRange[0];
//约束水平视角
srcRange=this.horizontalAngleMap.srcRange;
dstRange=this.horizontalAngleMap.dstRange;
var tmpTheta=THREE.Math.mapLinear(this.theta,srcRange[0],srcRange[1],dstRange[0],dstRange[1]);
var tmpThetaFullRange=dstRange[1]-dstRange[0];
var tmpthetaxormalized=(tmpTheta-dstRange[0])/tmpThetaFullRange;
this.theta=QuadraticEaseInOut(tmpThetaNormalized)*tmpThetaFullRange+dstRange[0];
var targetPosition=this.target.position,
位置=this.object.position;
targetPosition.x=100*数学sin(this.phi)*数学cos(this.theta);
targetPosition.y=100*Math.cos(this.phi);
targetPosition.z=100*Math.sin(this.phi)*Math.sin(this.theta);
对于(i=0;i=0?b:b+PI2;
};
功能距离(a,b){
var dx=a[0]-b[0],
dy=a[1]-b[1],
dz=a[2]-b[2];
返回数学sqrt(dx*dx+dy*dy+dz*dz);
};
函数平方输出(k){
如果((k*=2)<1)返回0.5*k*k;
回报率-0.5*(-k*(k-2)-1);
};
函数绑定(范围,fn){
返回函数(){
fn.适用(范围、参数);
};
};
函数initAnimationPath(父对象、样条曲线、名称、持续时间){
var animationData={
姓名:姓名,,
fps:0.6,
长度:持续时间,
层次结构:[]
};
var i,