`

three.js------视角篇(camera)

 
阅读更多

1.Camera视角

这是一个抽象类,如果你新建一个camera类的话你必须继承camera类
构造函数
camera()
这个构造函数需要正确设置如下类型:matrixWorldInverse, projectionMatrix and projectionMatrixInverse
(1)属性
matrixWorldInverse
这是个逆广角,它包含camera转换模型
projectionMatrix
这是个包含投影模型
projectionMatrixInverse
这是个逆投影模型
(2)方法
lookAt( vector )
参数:vector是个位置向量,
这个函数使camera观察到vector指向位置只要父camera是作为一个场景或者位置在(0,0,0)

2.OrthographicCamera
这是个继承camera的直角投影类
例子:
*********************
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
*********************

构造函数
OrthographicCamera( left, right, top, bottom, near, far )
left 摄像头的视锥体左侧面
right 摄像头的视锥体右侧面
top 摄像头的视锥体顶面
bottom 摄像头的视锥体底面
near 摄像头的视锥体近焦面
far 摄像头的视锥体远焦面
方法
updateProjectionMatrix()
更新直角投影模型,在参数改变时候被调用
大家对于3D的概念可以参考一下网上的这篇文章

http://blog.sina.com.cn/s/blog_4db3fe550100kyc5.html

3.PerspectiveCamera
透明投影camera
例子
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
构造函数
PerspectiveCamera( fov, aspect, near, far )
fov 视锥垂直视野
aspect 视锥宽高比
near 视锥近平面
far 视锥远平面
方法
.setLens( focalLength, frameSize )
focalLength 焦距
frameSize 帧大小
使用焦距(毫米)估计和使用相机时,如果没有指定帧大小设置:FOV35毫米(满帧)

.setViewOffset( fullWidth, fullHeight, x, y, width, height )
fullWidth — 全宽多视角设置
fullHeight — 多视角设置全高
x — 水平偏移辅助视角
y — 垂直偏移辅助视角
width — 宽度辅助视角
height — 辅助视角的高度

设置一个更大的视锥中的偏移量。为多窗口或multi-monitor/multi-machine的设置,这是非常有用的。
例如,如果你有3x2的显示器,每个显示器的分辨率为1920x1080的显示器是在网格这样的:

   +---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
then for each monitor you would call it like this:
var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h ); Note there is no reason monitors have to be the same size or in a grid.

核心
BufferGeometry
这是个特殊类,它保存所有都在缓冲区中,它可以减少内存消耗和CPU工作周期,它是一项复杂的工作需要计算缓存区,它主要运用还是在对
静态对象处理
构造函数
BufferGeometry()
几个属性都已经以默认值存在
id
是实例的唯一数字ID
attributes
这个hashmap是一个键值对形式
dynamic
当他设置时候,它拥有固定的内存缓冲能够快速更新对象,如果没有设置他将删除这段缓存区的数据

分享到:
评论

相关推荐

    three.js-dev.zip

    Three.js是一款基于WebGL的JavaScript库,它使得在浏览器中进行3D图形编程变得简单而直观。这个名为"three.js-dev.zip"的压缩包,显然包含了Three.js的开发版本,对于想要深入了解或定制Three.js的开发者来说,是一...

    three.js-master.rar

    4. **相机(Camera)**:观察3D世界的视角,设置相机位置和视角参数可以改变用户看到的场景。 5. **光照(Lighting)**:模拟真实世界中的光照效果,如点光源、平行光和聚光灯。 6. **渲染器(Renderer)**:负责将3D...

    three.js-master.zip

    Three.js是一款强大的JavaScript库,专为在Web浏览器中创建交互式3D图形而设计。它提供了丰富的API和工具,使得开发者无需深入理解底层的WebGL技术,也能轻松构建出引人入胜的3D视觉效果。"three.js-master.zip"这个...

    three.js-r141.zip

    《深入探索Three.js-r141:JavaScript 3D库的奥秘》 Three.js,作为WebGL库的领头羊,为JavaScript开发者提供了一种简单而强大的方式,用于在浏览器中创建三维图形和交互式体验。本次我们将深入剖析Three.js的r141...

    three.js-r122.zip

    Three.js是JavaScript中最流行的3D库之一,它使得WebGL技术的使用变得简单易行。r122是Three.js的一个版本号,代表着该库的一次更新迭代。在这个版本中,开发者可能会发现一些新的特性、性能优化以及错误修复。本文...

    three.js-r147

    2. **相机(Camera)**:相机定义了观察3D世界的视角,`THREE.PerspectiveCamera`和`THREE.OrthographicCamera`分别代表透视相机和正交相机,它们决定了视口的投影方式。 3. **几何体(Geometry)**:几何体是3D...

    three.js-打造微信爆款小游戏跳一跳 7-9代码 掉下动画

    three.js是一个流行的JavaScript库,专门用于在Web浏览器中进行3D图形编程。通过学习这个系列的第7到9部分,你将掌握如何利用three.js的核心功能制作出引人入胜的游戏动画。 首先,我们需要理解three.js的基本结构...

    three.js-master压缩包

    three.js,作为一款强大的JavaScript库,使得前端开发者能够轻松地在Web浏览器中创建复杂的3D场景。本文将深入剖析three.js的核心概念、关键组件以及实际应用,带你走进这个奇妙的3D世界。 首先,我们要理解three....

    three.js-3D钢琴播放器.zip

    本文将深入探讨如何利用JavaScript库three.js来创建一个交互式的3D钢琴播放器。three.js是一个强大的WebGL库,它为开发者提供了在浏览器中创建三维图形的便捷途径。 首先,我们要理解three.js的基础。它基于WebGL,...

    three.js-master_3d

    3. 相机(Camera):相机是观察3D世界的窗口,Three.js提供了多种类型的相机,如PerspectiveCamera(透视相机)和OrthographicCamera(正交相机)。 4. 几何体(Geometry):几何体是3D模型的基础,包括立方体、...

    three.js-master-R126.zip

    4. **相机(Camera)**:观察3D世界的窗口,控制视图的视角和投影方式。 5. **光源(Light)**:照亮3D场景,包括点光源、平行光和聚光灯等。 6. **渲染器(Renderer)**:负责将场景、相机和光照组合成最终图像,并...

    Three.js-3D互动城市.zip

    Three.js是一个基于WebGL的JavaScript库,它使得在浏览器中创建和展示3D图形变得简单易行。WebGL是一种JavaScript API,用于在HTML5 Canvas上进行硬件加速的3D图形渲染,无需插件支持。本项目“Three.js-3D互动城市...

    three.js.master

    《Three.js开发指南:WebGL的JavaScript 3D库》 在Web开发领域,Three.js是一个备受推崇的JavaScript库,专为实现WebGL技术而设计,用于在浏览器中创建交互式的3D图形。WebGL是一种基于OpenGL标准的JavaScript API...

    可视化技术库-three.js-master.zip

    **Three.js** 是一款强大的JavaScript库,专门用于在Web浏览器中创建三维图形和可视化效果。这个库充分利用了WebGL技术,让开发者无需深入理解底层图形编程,就能在网页上实现复杂的3D场景。以下是关于Three.js的...

    three.js实现3D全景看房

    本篇文章将深入探讨如何利用three.js实现3D全景看房功能,特别是针对移动端的应用。 首先,我们需要理解three.js的基础概念。Three.js是一个基于WebGL的库,WebGL是一种在浏览器中渲染3D图形的API,它允许开发者...

    three.js-r137.zip

    three.js是JavaScript最著名的3D渲染库之一,它为Web开发者提供了一种便捷的方式,将丰富的三维图形和动画引入到网页中。在r137版本中,three.js继续优化其性能,扩展功能,并提供了更丰富的API,使得开发者能够构建...

    three.min.js 最全的版本

    例如,`THREE.Scene`代表了3D场景,`THREE.Camera`定义了观察者视角,而`THREE.Object3D`则是所有3D对象的基类,包括几何体、光源、摄像机等。 在"three.min.js"中,包含了各种几何形状的构造函数,如`THREE....

Global site tag (gtag.js) - Google Analytics