自行实现相机控制中的旋转功能。相机控制旋转最好使用球坐标系进行相机旋转。与直角坐标系相比,球坐标系更适合和直观地描述旋转。对于方位角和极角,它是线性变化的。我们很喜欢线性函数,因为线性表示简单,用越简单的函数来描述关系越适合。再想想,如果用直角坐标系求解角度问题,那肯定是三角函数。三角函数的复杂度大于线性函数,这是我们不希望看到的。下图为球坐标系示意图:代码解释//获取二维坐标,将原左上角的原点移动到屏幕中央。现在取值范围是[-1,1]constoffsetX=((e.offsetX-mouseDownX)/dom.clientWidth)*2;constoffsetY=((e.offsetY-mouseDownY)/dom.clientHeight)*2;constmatrix3=newTHREE.Matrix3();mouseDownX=e.offsetX;mouseDownY=e.offsetY;//记住原来的相机位置,我们只移动视角不移动位置cameraPosition.copy(camera.position);让rotation=newTHREE.Vector3(0,0,-1);//获取相机的世界坐标标准化坐标rotation.applyNormalMatrix(matrix3.setFromMatrix4(camera.matrixWorld));letspherical=newTHREE.Spherical();//从归一化坐标设置球,可以说是将相机坐标映射到半径为1的球坐标系上//setFromVector3用于设置theta和phi,相当于转换笛卡尔坐标系到球面坐标系spherical.setFromVector3(rotation);//上一步将笛卡尔坐标系转换为球坐标系后,theta和phi是线性变化的,只需加减theta和phispherical.theta-=offsetX;spherical.phi+=offsetY;spherical.makeSafe();rotation.setFromSpherical(spherical);//相机移动到原点是因为球坐标系在原点。名称为camera.position.copy(cameraPosition);相机.updateMatrixWorld();
