手机哪个网站好,成都旅游十大必去景区,贵州省交通建设工程质量监督局网站,邳州建网站渲染器
渲染器其实代表的是canvas标签。
渲染器的类型
WebGLRender
使用WebGL来渲染图形#xff0c;速度较快#xff0c;但是有些机器不支持WebGL。
CanvasRender
使用canvas2d来渲染图形#xff0c;在较老的版本上#xff0c;主要是用来渲染2D图形。现在这个渲染器在…渲染器
渲染器其实代表的是canvas标签。
渲染器的类型
WebGLRender
使用WebGL来渲染图形速度较快但是有些机器不支持WebGL。
CanvasRender
使用canvas2d来渲染图形在较老的版本上主要是用来渲染2D图形。现在这个渲染器在新版本中已弃用。
创建渲染器
创建渲染器代码如下
renderer new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);setSize方法设置的是canvas标签的大小比如
renderer.setSize(100,100)等于
canvas stylewidth:100px;height:100px;/canvas相机
相机定义了场景中哪部分是可以见的相机有自己的位置position、朝向lookAt和可视域。我们创建的图形一定要放在相机的可视域中才能看得见。可视域与相机的类型、相机的位置和朝向都有关。
相机的类型和创建
threejs提供的相机有正交相机OrthographicCamera、透视相机PerspectiveCamera、全景相机CubeCamera和3D相机StereoCamera。
正交相机
正交相机拍摄的效果类似设计图重在表现物体的实际尺寸没有近小远大的效果如下图 正交相机的构造方法如下
OrthographicCamera( left, right, top, bottom, near, far )这个六个参数即是指定视域的左右上下近远六个范围。正交相机的视域是立方体 可以打开 【threejs相机例子】按o键就可以看到正交相机的演示右边的线框则展示出正交相机的视域示意图。
透视相机
透视相机拍摄的效果类似人眼所见即有近小远大的效果如下图
透视相机的构造方法如下
PerspectiveCamera( fov, aspect, near, far )fov参数指定视角aspect指定视图宽高比后两个参数指定近平面和远平面。透视相机的视域是一个台体 可以打开 【threejs相机例子】按p键就可以看到透视相机的演示右边的线框则展示出透视相机的视域示意图。
全景相机
全景相机就是可以360度拍摄的相机见过百度地图全景街景拍摄车的话应该会有印象就像下面这个 在threejs中全景相机构造也类似使用六个不同方向上的相机同时拍摄将拍摄的结果融合到同一个画面中。这有点像VR的概念无论你看向画面的哪个方向都能看到那个方向的景物。可以打开下面的链接体验一下【全景相机的例子】
3D相机
这个3D相机应该叫浮雕3D相机它是用两个不同位置的透视相机同时拍摄将拍摄的结果合成为一个画面。这便是早期3D电影的表现方法通过让人的两只眼睛看到稍微不同的图像来欺骗人的感觉让人好像看到了立体一样。可以打开下面的链接看看这种相机的拍摄效果【3D相机例子】
你会发现直接看画面似乎很模糊但是当你戴上红蓝眼镜时画面就变成了立体的了。关于浮雕3D电影可参考【浮雕3D电影】
相机和渲染器的关系
在threejs中渲染器可以视为是canvas标签相机可以视为画布。注意画布和canvas标签不是同一个东西canvas标签是画布的容器。画布就好比一张图片而canvas标签就像img标签。
因此
renderer.setSize(100,100)相当于
canvas stylewidth:100px;height:100px;/canvas而
var camera new THREE.OrthographicCamera(-500,500,100,-100,1,1000);相当于
canvas heigth1000 width1000/canvas当然这种类比过于简单实际中threejs做的工作要更多。
canvas标签大小和画布大小不一致会引发的问题
如果canvas标签和画布大小不一致则会拉伸画布填充canvas标签这会导致画面变形。例如
camera new THREE.OrthographicCamera(-500,500,20,-20,1,100);
renderer.setSize(1000,1000);在上面的代码中canvas标签较大而故意将画布高度设得很小画出来的效果大致如下 可以看到字母在竖直方向上被拉长了。 threejs相关的其它文章见threejs教程
