three.js 怎么创建地图

three.js 怎么创建地图

图片[1]-three.js 怎么创建地图-学吧号

thr

ThreeJS简介

图片[2]-three.js 怎么创建地图-学吧号

近年来web得到了快速的发展。随着HTML5的普及,网页的表现能力越来越强大。

网页上已经可以做出很多复杂的动画,精美的效果。

但是,人总是贪的。那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形。 OpenGL 它是最常用的跨平台图形库。 WebGL 是基于 OpenGL 设计的面向web的图形标准,提供了一系列JavaScript API,通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而 Three.js 是通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。 简单点的说法 threejs=three + js ,three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。

而javascript的计算能力因为google的V8引 擎得到了迅猛的增强,做3D程序,做服务器都没有问题。 WebGL 门槛相对较高,需要相对较多的数学知识(线性代数、解析几何)。因此,想要短时间上手 WebGL 还是挺有难度的。

Three.js 对 WebGL 提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本。并且,几乎没有损失 WebGL 的灵活性。 因此,从 Three.js入 手是值得推荐的,这可以让你在较短的学习后就能面对大部分需求场景。

Three.js 的入门是相对简单的,但是当我们真的去学的时候,会发现一个很尴尬的问题:相关的学习资料很少。 通常这种流行的库都有很完善的文档,很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的,它的文档对初学者来说太过简明扼要。 不过官方提供了非常丰富的examples,几乎所有你需要的用法都在某个example中有所体现。

但这些example不太适合用来入门,倒是适合入门之后的进一步学习。 这里推荐一些相对较好的教程: 当然,实际的学习过程中这些资料肯定是不太够的,遇到问题还是要自己去查资料。不过这里要提醒一下,Three.js的更新是相当频繁的,现在是r80版本,自2010年4月发布r1以来,这已经是第72个版本了(中间有的版本号跳过了)。因此,在网上找到的资料有些可能是不适合当前版本的,需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。

要在屏幕上展示3D图形,思路大体上都是这样的: 1、构建一个三维空间 Three中称之为场景(Scene) 2、选择一个观察点,并确定观察方向/角度等 Three中称之为相机(Camera) 3、在场景中添加供观察的物体 Three中的物体有很多种,包括Mesh,Line,Points等,它们都继承自Object3D类 4、将观察到的场景渲染到屏幕上的指定区域 Three中使用Renderer完成这一工作 场景是所有物体的容器,也对应着我们创建的三维世界。 Camera是三维世界中的观察者,为了观察这个世界,首先我们要描述空间中的位置。 Three中使用采用常见的右手坐标系定位。 Three中的相机有两种,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

这里补充一个视景体的概念:视景体是一个几何体,只有视景体内的物体才会被我们看到,视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。 正交投影相机的视景体是一个长方体,OrthographicCamera的构造函数是这样的: Camera本身可以看作是一个点,left则表示左平面在左右方向上与Camera的距离。

另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。 可以近似地认为,视景体里的物体平行投影到近平面上,然后近平面上的图像被渲染到屏幕上。

2)透视投影相机 fov对应着图中的视角,是上下两面的夹角。aspect是近平面的宽高比。在加上近平面距离near,远平面距离far,就可以唯一确定这个视景体了。 透视投影相机很符合我们通常的看东西的感觉,因此大多数情况下我们都是用透视投影相机展示3D效果。

有了相机,总要看点什么吧?在场景中添加一些物体吧。 Three中供显示的物体有很多,它们都继承自Object3D类,这里我们主要看一下Mesh和Points两种。 1)Mesh 我们都知道,计算机的世界里,一条弧线是由有限个点构成的有限条线段连接得到的。

线段很多时,看起来就是一条平滑的弧线了。 计算机中的三维模型也是类似的,普遍的做法是用三角形组成的网格来描述,我们把这种模型称之为Mesh模型。 geometry是它的形状,material是它的材质。 不止是Mesh,创建很多物体都要用到这两个属性。

下面我们来看看这两个重要的属性。 2)Geometry Geometry,形状,相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。

Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状; 你也可以通过自己定义每个点的位置来构造形状; 对于比较复杂的形状,我们还可以通过外部的模型文件导入。 3)Material Material,材质,这就没有形状那么直观了。 材质其实是物体表面除了形状以为所有可视属性的集合,例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。 这里讲一下材质(Material)、贴图(Map)�。

threeJS 导入模型(不确定尺寸)后如何确定相机位置及物体缩放比例

图片[3]-three.js 怎么创建地图-学吧号

1、打开threeJS软件,任意创建一个模型。

2、然后选择模型并单击“选择并均匀缩放”按钮。

3、将光标移动到X轴上,则X轴变为黄色,且光标的形状发生变化。

4、按住回鼠标左键拖动光标,则模型随着光标的移动发生变化,同理,其他轴也是这样的,

5、鼠标放在三角中间,按住鼠标左键拖动光标,则模型在X、Y、Z三个方向同时变化。如图所示

6、第二种模式“选择并非均匀缩放”跟第一种模式是一样的,

7、鼠标左键按住缩放按钮不放,在弹出的工具菜单中选择“选择并挤压缩放”按钮,将鼠标移动到三角形标识上,向内进行缩放操作,可以看到模型外观发生了巨大的变化,如图所示。

8、完成图。

注意事项:
three.js封装了一些3D渲染需求中重要的工具方法与渲染循环。

它的教程同样可以在hiwebgl里面找版到。
three.js之于webgl,类似于windows版本的虚幻引擎之于D3D。当然,虚幻引擎的能力范围比three.js大得多。

d3.js跟上面两者没有关权系。

three.js怎么控制3D模型中局部动作

图片[4]-three.js 怎么创建地图-学吧号

控制显隐
ThingJS 中通过设置物体的 visible 属性来直接控制物体的显示/隐藏,例如:
var car=app.query(‘car01’)[0];car.visible=false;
当然也可以设置对象集合(Selector)的 visible 属性控制多个物体的显示/隐藏,例如:
// 获取场景内所有的建筑 并 隐藏var buildings=app.query(‘.Building’);buildings.visible=false;
如果对象有相应的父子关系,那么,当隐藏父亲时,他的子子孙孙也会跟随隐藏。
比如当隐藏建筑时,建筑的外立面、楼层、楼层里的物体等子孙会同时隐藏。

three.js怎么导入html

图片[5]-three.js 怎么创建地图-学吧号

1.在HTML的<head>标签中加入代码<script type=”text/javascript” src=”three.js”></script>
注意一下,只有当你要导入的html文件和three.js文件在一个目录下的时候才这样写。

不然要根据实际情况写。

如果是用Dreamweaver软件编写时可以直接浏览目录的。

如何用Three.js渲染到纹理

图片[6]-three.js 怎么创建地图-学吧号

ImageUtils.loadTexture:从指定位置加载图片文件,文件格式可以是PNG,GIF或JPEG文件。ImageUtils.loadTexture2个很关键的值得注意的点:这个方法是异步调用的,所幸的是使用了render循环,这样每秒能被渲染几十次,并不会影响渲染的效果图片的长宽大小最好是2的次方256*256 512*512等。

我曾看到如果使用不是类似这样的长宽,Three..js会将其压缩。

THE END
喜欢就支持一下吧
点赞14
温馨提示:

1、本内容转载于网络,版权归原作者所有!
2、本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
3、本内容若侵犯到你的版权利益,请联系我QQ:243371741,会尽快给予删除处理!