three.js绘制过程(二)
博客专区 > 李勇2 的博客 > 博客详情
three.js绘制过程(二)
李勇2 发表于3年前
three.js绘制过程(二)
  • 发表于 3年前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

同一个场景中可以有多个摄像机,同一个屏幕缓冲区可以分块绘制不同的物体。


WeblGLRender 中autoClear 设定为false之后, 每次绘制不会清空缓冲区;

setSize 设定canvas的大小

setViewport 设定绘制的位置的大小

clear() 手动清空绘制缓冲区


例如有两个摄像机A B;

将autoClear设定为false,

在绘制函数中 

开始手动清空缓冲区clear()

setViewport (0 0, Width/2, height) 左侧可以绘制第一个摄像机的看到的场景,

render() 

setViewport(width/2, 0, width/2, height) 右侧可以绘制第二个摄像机的场景

render()


这样就可以在一个屏幕上绘制两个摄像机的看到的场景。


CameraHelper:

THREE 中有 CameraHelper类可以帮助确定场景中摄像机的位置,和可视见范围, 本质上是一个场景节点。

CameraHelper 本身是一个Object3D, 可以作为摄像机的子节点, 这样就可以保证和摄像机一起移动。

CameraHelper的update函数, 当观察的摄像机参数改变, 比如fov, far平面, 则需要更新helper的状态。


构造函数 CameraHelper(camera) 传入要观察的摄像机

  


标签: object
共有 人打赏支持
李勇2
粉丝 43
博文 183
码字总数 60421
×
李勇2
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: