ThreeJS – 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
1 ThreeJS摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
在threejs中,如果我们想要摄像机绕某一个世界坐标轴旋转,比如绕Y轴旋转。我尝试过以下的方法
- camera.rotateY(radian)
- camera.rotateOnWorldAxis(new THREE.Vector3(0,1,0),radian);
这两个方法都是没有效果的。
其实要想摄像机绕轴旋转本质上是在改变摄像机的坐标,所以我们使用three.js的四元数,从头构造一个绕轴旋转的四元数然后对摄像机的坐标进行变换,这样就可以达到旋转摄像机的目的。
1.1 摄像机绕X轴旋转
var x_axis = new THREE.Vector3( 1, 0, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(x_axis, radian));
1.2 摄像机绕Y轴旋转
var y_axis = new THREE.Vector3( 0, 1, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(y_axis, radian));
1.3 摄像机绕Z轴旋转
var z_axis = new THREE.Vector3( 0, 0, 1 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(z_axis, radian));
参考链接
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:ThreeJS – 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
原文链接:https://www.stubbornhuang.com/2361/
发布于:2022年09月21日 11:38:47
修改于:2023年06月21日 18:02:41
当前分类随机文章推荐
- ThreeJS - 如何提升three.js的渲染效果?看完这篇你可能会有启发 阅读5614次,点赞1次
- ThreeJS - 设置透明背景模仿L2Dwidget.js看板娘渲染效果 阅读997次,点赞0次
- ThreeJS - three.moudle.js报Uncaught SyntaxError:Unexpected token ‘export‘错误 阅读2171次,点赞0次
- ThreeJS - FBXLoader: TGA loader not found, creating placeholder texture for ... 阅读1066次,点赞0次
- ThreeJS - 直接设置Fbx模型的某个关节的位移和旋转值 阅读2007次,点赞0次
- ThreeJS - 获取当前使用的three.js的版本 阅读821次,点赞0次
- ThreeJS - 使用自定义Shader 阅读1055次,点赞2次
- ThreeJS - 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图 阅读3216次,点赞1次
- ThreeJS - 使用Hdr环境贴图作为间接光照对模型进行渲染 阅读2583次,点赞3次
- ThreeJS - 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度 阅读1403次,点赞1次
全站随机文章推荐
- 书籍翻译 – Fundamentals of Computer Graphics, Fourth Edition,第6章 Transformation Matrices中文翻译 阅读2194次,点赞7次
- 资源分享 - Game Physics (Second Edition) 英文高清PDF下载 阅读2499次,点赞1次
- C++STL容器 - std::map查找元素与判断键值是否存在方法总结 count,find,contains,equal_range,lower_bound,upper_bound 阅读1269次,点赞0次
- Duilib - duilib应用程序实现文件可拖拽的功能 阅读2771次,点赞1次
- 书籍翻译 - Fundamentals of Computer Graphics, Fourth Edition,第1章 Introduction中文翻译 阅读5883次,点赞19次
- 资源分享 - Game Physics (First Edition) 英文高清PDF下载 阅读1810次,点赞0次
- 资源分享 - Physically Based Rendering From Theory To Implementation (Fourth Edition)英文高清PDF下载 阅读1082次,点赞0次
- 资源分享 - Geometric Data Structures for Computer Graphics 英文高清PDF下载 阅读2384次,点赞0次
- 资源分享 - Real-Time 3D Character Animation with Visual C++ 英文高清PDF下载 阅读1917次,点赞0次
- ThreeJS - 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度 阅读1403次,点赞1次
评论
169