【threejs学习随记（二）】——up属性与lookAt方法解析

最新推荐文章于 2024-08-13 17:20:41 发布
最新推荐文章于 2024-08-13 17:20:41 发布
阅读量8.2k 收藏 8
点赞数 1
分类专栏： 3D绘图之threejs 文章标签： threejs webGL web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012088576/article/details/77886866
版权

  1. up属性

      camera的up属性其实是继承基类Object3D，定义了三维空间中向上的方向。官方文档中原话是：

      This is used by the lookAt method, for example, to determine the orientation of the result.
Default is Object3D.DefaultUp - that is, ( 0, 1, 0 )

 怎么理解呢？直白翻译就是：供lookAt方法使用，决定结果（渲染）的方向。默认是（0，1，0）方向。而threejs中默认的3D坐标系如下图，：

最低0.47元/天 解锁文章
差不多先生img
关注
专栏目录
Three.js中camera的lookAt函数与OrbitControls冲突
unirrrrr的博客
06-14 6335
今天想把整个场景往下沉一点，想要照相机也跟着沉，于是设置了 camera.lookAt(new THREE.Vector3(0, -1000, 0)); 结果发现视角并没有发生改变，在网上查了一下发现是与three.js的OrbitControls控件有关系， 在OrbitControls的源代码中可以看到，camera的lookAt对象被更改了： THREE.OrbitControl...
three.js：关于相机position,up,lookAt理解~~~
qq_42206266的博客
06-04 1万+
       最近对three.js突然感兴趣，搜了一些相关教程准备自学成才，但是发现关于相机的一些属性设置，教程写的还是比较模糊的，理解起来感觉有些困难。不多说先上代码：        为了便于理解，先手绘了一个三维坐标系，然后更改相应的参数，来进行理解： let scene = new THREE.Scene(); let camera = new THREE.Pe...
three.js 安装方法、基础简介、创建基础场景
最新发布
weixin_44242600的博客
08-13 915
three.js安装方法讲解，认识场景Scene、相机Camera、渲染器**Renderer**三个基本概念，创建three.js基础场景。
`Object3D.lookAt()` 是 Three.js 中 `Object3D` 类的一个方法，用于让一个对象朝向指定的目标点。
小豆包
04-08 973
demo案例 参数 ：目标点的坐标，可以是一个 Three.js 的 对象，也可以是包含 、、 坐标的普通 JavaScript 对象。 返回值 该方法没有返回值。该方法将当前对象的 轴指向目标点，并调整对象的旋转使其朝向目标点。具体来说，该方法会根据对象当前的位置和目标点的位置，计算出一个新的旋转方向，然后将当前对象的旋转调整为这个方向。 在上面的示例中， 对象将会朝向坐标为 的目标点。所有源码 本内容来源于小豆包，想要更多内容请跳转小豆包 》
three.js 相机 Camera `.up`相机上方向(旋转渲染结果)
u014291990的博客
12-13 885
up是相机对象的属性，当你改变.up属性时候，就好比你生活中拍照时候，扭转你的相机姿态角度进行拍照，这时候你的照片也会跟着相机姿态旋转。.up属性默认值是,意思是沿着y轴朝上。
Three.js相机对象.up属性
yinge0508的博客
12-22 1203
Threejs相机对象Camera的.up属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在threejs代码中更改.up的属性值，查看threejs渲染结果有什么变化。 .up属性默认值是new THREE.Vector3(0,1,0),沿着y轴朝上，你可以使用下面代码看渲染效果绿色y轴数值向上，你可以改变.up属性的值，查看渲染结果变化。 camera.position.set(200, 300, 200); // 浏览器控制台查看.up...
three.js中坐标系转换以及camera的position、lookAt与up属性理解
weixin_50867227的博客
09-01 7077
three.js中坐标系转换以及camera的position、lookAt与up属性理解
Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls
NanChen的博客
07-17 2329
正投影相机和透视相机的区别 如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果 透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3 改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi
阿西河前端教程学习心得随记——HTML5 有哪些新特性？_声明方式
01-08
为了享受这个过程，我会首先滑动鼠标中键，大概浏览下Up主博客的篇幅及其一级标题和二级标题（篇幅当然是越短越喜欢啦，嘻嘻~），而Up主提到的“核心”部分便重点记忆。 学习内容：HTML5 有哪些新特性？ html5的新...
【threejs学习随记（三）】3D模型导入问题
热门推荐
u012088576的博客
09-07 4万+
threejs来实现常见简单的几何体（立方体，圆，球，棱锥等）十分容易，但在实际开发中，我们可能需要展示的模型非常复杂，很难用简单的几何体来实现。基本上都需要依赖像 "blender"， "cinema 4d"，"Maya"，"3ds Max"这样的3D建模软件来构建所需模型，然后再将其以指定格式（"collada"，"json","obj"等）导出。Threejs允许用户导入某些指定格式的三维模型，并添加到场景中。因此本文主要讲如何基于threejs导入所需3D模型。
threejs学习随记（一）
u012088576的博客
07-13 1046
搞浏览器3D绘图的应该都或多多少接触过threejs，其之于webGL，如jquery之于js。有了webGL，开发者仅通过遵循其提供的api和js就能在html网页中进行3d绘图。而直接使用原生的webGL API 进行3d绘图十分繁琐，所以一个优秀的webGL框架——threeJs应运而生，其包装了很多复杂的细节，使3d绘图变得轻松了起来。           在Three.js中，要渲染
python随机抽号_Python学习随记 ————随机抽号器（一）
weixin_39817347的博客
11-20 2236
第一篇博客 2018-07-15笔者是一名学生，见到很多教师会选择用抽号的方式点名、收作业，甚至来确定期末口语考试的背诵文章，特花了几天时间，查阅了大量资料，完成了此抽号器。闲话不多说，进入正题。界面是这样的： 功能是这样的：随机抽取学号结果保存至本地修改字体及大小代码是这样的：首先画出...
Three.js camera.up参数的作用
一名业余前端的博客
10-25 3073
camera中有三个参数，position、lookAt、up。 position，设置camera的位置。也就是把摄像机放在哪里。 lookAt，设置camera看向的位置，即摄像机在position的位置看向哪里。若position设置为（500,500,500），lookAt设置为（100,100,100）。其意思就是把camera放在坐标为（500,500,500）的位置，并把摄像头对...
threejs camera.lookAt()的作用
redrun博客
01-29 1796
threejs camera.lookAt()的作用 // 传入的是观察对象元素的位置 camera.lookAt(group.position) 显示效果会将 放入的元素的位置持续置为坐标中心
three.js学习笔记（三）-camera.up属性探索
低到尘埃，仰望星空
10-23 4477
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/three.js"></script> <script src="js
three.js 相机camera的up和lookAt详解
flame_007的博客
03-11 1万+
three.js相机的设置很重要。甚至牵涉到缩放，旋转等动画的应用，下面就up和lookAt的用法做下解释： 先来说说position属性，就是设置相机的位置，而位置设置后相机看向哪里呢？ 默认情况下，是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。 如果不设置lookAt，相机看向的就是position的z值垂直向里看的方向。 如果设置了lookAt，比...
java3d lookat_ThreeJS轨道控制器设置目标而无需lookAt
weixin_39997089的博客
02-19 237
有什么方法可以解决这个问题吗？Short answer is "Yes, but it's not using a standard version OrbitControls.js".请继续阅读我的详细推理....我花了一些时间来查看 OrbitControls.js (r87)的源代码，考虑到实现增强功能的想法，该增强功能允许您提供可用作相机目标的可选第二点 .然而，在探索代码之后，我认为这将...
three.js 学习笔记
好好学习天天向上
01-07 1250
渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix，但是不会每渲染一帧，都通过相机的属性计算投影矩阵(节约计算资源)。比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。反射的光线越多，光越亮，反射的光线越少光越暗。
C++随记：内存管理、内联函数与默认参数详解
在"C++随记"文档中，记录了几个关键的C++知识点，对于学习者来说具有较高的参考价值。首先，关于内存管理，提到了`new`和`delete`以及`new[]`和`delete[]`操作符的重要性，强调了在C++中正确使用这些运算符以避免...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值