Three.js入门指南

1.threejs导入3d模型到web端，3d模型的文件格式可以找个建模软件转化为threejs所支持的格式，如.dae .obj .mtl stl gld等
harp.gl 3D地图渲染引擎
key：TiWMPfkD-HO_Kv9exEnvQWyKpIqvtMwFfTYX5tmFRSI
案例

Three.js入门指南(张雯莉)

应用结构

上图需要注意的事项：
首先有一个渲染器(Renderer)。这可以说是three.js的主要对象。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。
其次有一个场景图它是一个树状结构，由很多对象组成，比如图中包含了一个场景(Scene)对象，多个网格(Mesh)对象，光源(Light)对象，群组(Group)，三维物体(Object3D)，和摄像机(Camera)对象。一个场景(Scene)对象定义了场景图最基本的要素，并包了含背景色和雾等属性。这些对象通过一个层级关系明确的树状结构来展示出各自的位置和方向。子对象的位置和方向总是相对于父对象而言的。比如说汽车的轮子是汽车的子对象，这样移动和定位汽车时就会自动移动轮子。你可以在场景图的这篇文章中了解更多内容。
注意图中摄像机(Camera)是一半在场景图中，一半在场景图外的。这表示在three.js中，摄像机(Camera)和其他对象不同的是，它不一定要在场景图中才能起作用。相同的是，摄像机(Camera)作为其他对象的子对象，同样会继承它父对象的位置和朝向。在场景图这篇文章的结尾部分有放置多个摄像机(Camera)在一个场景中的例子。
网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。材质(Material)和几何体(Geometry)可以被多个网格(Mesh)对象使用。比如在不同的位置画两个蓝色立方体，我们会需要两个网格(Mesh)对象来代表每一个立方体的位置和方向。但只需一个几何体(Geometry)来存放立方体的顶点数据，和一种材质(Material)来定义立方体的颜色为蓝色就可以了。两个网格(Mesh)对象都引用了相同的几何体(Geometry)和材质(Material)。
几何体(Geometry)对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体。你也可以创建自定义几何体或从文件中加载几何体。
材质(Material)对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。
纹理(Texture)对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。
光源(Light)对象代表不同种类的光。
基础知识
一、立方体
THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)；
THREE.CubeGeometry(x方向上的长度, y方向上的长度, z方向上的长度, x方向上分段数, y方向上分段数, z方向上分段数)；
分段是对六个面进行分段，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。
例子：
new THREE.CubeGeometry(1, 2, 3);可以创建一个x方向长度为1，y方向长度为2，z方向长度为3的立方体。
二、平面
THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
THREE.PlaneGeometry(x方向上的长度, y方向上的长度,x方向上分段数,y方向上分段数);
例子：
new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，要创建的平面在x轴和z轴所在的平面内，可以通过物体的旋转来实现
三、球体
THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);
THREE.SphereGeometry(半径, 经度上的切片数, 纬度上的切片数, 经度开始的弧度, 经度跨过的弧度, 纬度开始的弧度, 纬度跨过的弧度);
例子：
new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3，经度划分成8份，纬度划分成6份的球体。
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)。
四、圆形
THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)；
THREE.CircleGeometry(半径, 切片数, 纬度开始的弧度, 纬度跨过的弧度)；
例子：
new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4)可以创建一个在x轴和y轴所在平面的三分之二圆的扇形
五、圆柱体
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded);
THREE.CylinderGeometry(顶面, 底面的半径, 圆柱体的高度, 顶面分段, 高度分段, 布尔值，是否没有顶面和底面);
例子：
new THREE.CylinderGeometry(2, 2, 4, 18, 3)创建一个顶面与底面半径都为2，高度为4的圆柱体。
new THREE.CylinderGeometry(2, 3, 4, 18, 3)将底面半径设为3创建一个圆台。
new THREE.CylinderGeometry(2, 3, 4, 18, 3, true)将创建一个没有顶面与底面的圆台。
六、正四面体、正八面体、正二十面体
THREE.TetrahedronGeometry(radius, detail);正四面体
THREE.OctahedronGeometry(radius, detail);正八面体
THREE.IcosahedronGeometry(radius, detail);正二十面体
radius是半径；detail是细节层次（Level of Detail）的层数
例子：
new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体。
new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体。
new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体。
七、圆环面
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
THREE.TorusGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, 圆环面的弧度);
例子：
new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面。
new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面。
new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面。
八、圆环结
THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);
THREE.TorusKnotGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, p, q, z轴方向上的缩放);
p和q是控制其样式的参数，一般可以缺省
例子：
new THREE.TorusKnotGeometry(2, 0.5, 32, 8)。
九、文字形状
使用文字形状需要先引入字体库

THREE.TextGeometry(text, parameters);
THREE.TextGeometry(text, {
size:字号大小，一般为大写字母的高度,
height:文字的厚度,
curveSegments:弧线分段数，使得文字的曲线更加光滑,
font:字体，默认是’helvetiker’，需对应引用的字体文件,
weight:值为’normal’或’bold’，表示是否加粗,
style:‘值为’normal’或’italics’，表示是否斜体’,
bevelEnabled:‘布尔值，是否使用倒角，意为在边缘处斜切’,
bevelThickness:‘倒角厚度’,
bevelSize:‘倒角宽度’
});

例子：
new THREE.TextGeometry(‘Hello’, {size: 1, height: 1});三维文字
十、自定义形状
THREE.Geometry()
例子：

// 初始化几何形状
var geometry = new THREE.Geometry();

// 设置顶点位置
// 顶部4顶点
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face3(0, 1, 3));
geometry.faces.push(new THREE.Face3(1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face3(4, 5, 6));
geometry.faces.push(new THREE.Face3(5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face3(1, 5, 6));
geometry.faces.push(new THREE.Face3(6, 2, 1));
geometry.faces.push(new THREE.Face3(2, 6, 7));
geometry.faces.push(new THREE.Face3(7, 3, 2));
geometry.faces.push(new THREE.Face3(3, 7, 0));
geometry.faces.push(new THREE.Face3(7, 4, 0));
geometry.faces.push(new THREE.Face3(0, 4, 5));
geometry.faces.push(new THREE.Face3(0, 5, 1));

Three.js入门指南相关推荐

d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
物理世界的互动之旅：Matter.js入门指南
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文简介戴尬猴,我是德育处主任欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
d3js mysql_D3.js入门指南
近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉 ...
html js不触发_「万字整理」这里有一份Node.js入门指南和实践,请注意查收 ??
前言什么是 Node.js 呢 ? JS 是脚本语言,脚本语言都需要一个解析器才能运行.对于写在 HTML 页面里的 JS,浏览器充当了解析器的角色.而对于需要独立运行的 JS,NodeJS 就是一 ...
handlebars.js_Handlebars.js入门指南
在本文中,我们将研究Handlebars ,这是一个基于MustacheJavaScript模板引擎. 它与Moustache具有相同的功能,但具有许多新功能. Handlebars是一个实用的模板工 ...
Ember.js 入门指南——查询记录
2019独角兽企业重金招聘Python工程师标准>>> store提供了统一的获取数据的接口.包括创建新记录.修改记录.删除记录等,更多有关Store API请看这个网址的介绍:ht ...

Three.js入门指南

Three.js入门指南相关推荐

最新文章

热门文章