THREE.JS 2.0 场景及场景中的对象

JavaScript025

THREE.JS 2.0 场景及场景中的对象,第1张

场景中的三要素

camera 相机

spotLight 光源

object (plane、cube...)物体

一个只有一个平面的简单场景中已经包含了几个对象

其中包括使用 Scene.add(object) 加载进场景的几个对象

场景渲染的时候camera对象会自动添加进来

从几个函数来理解THREE.Scene()对象

1、在场景中添加物体 Scene.Add()

2、移除物体 Scene.Remove()

3、获取场景中所有子对象列表 Scene.children

4、利用name 属性,获取场景中某个特定的物体 Scene.getChildByName()

5、这是一个回调函数返回所有子对象列表 scene.traverse()

在这里的效果同使用for 循环遍历children这个属性

6、雾化属性 在添加完场景后即可添加,可以使整个场景有一种雾化的效果

scene.fog = new THREE.Fog(0xffffff,0.015,100)

7、使场景中的所有物体都使用相同的材质

scene.overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff})

var geom = new THREE.Geometry()

geom.vertices = vertices vertices数组定义了构成几何体的点;

geom.faces = faces 将vertices里面的点连接起来,创建成三角面片,就形成了faces数组;

geom.verticesNeedUpdate = true 告诉geom对象 上面的属性需要更新;

geom.computeCentroids() 计算geom中face数组里每一个面的重心;

geom.computeFaceNormals() 该函数用来重新计算侧面,从而完成整个模型的更新

geom.mergeVertices() 从字面上的意思可以理解为将几何体的面融成一个立体;

geom.clone() 创建出一个geom对象的副本,赋予不同的材质后,就可以使用这个副本创建不同的网格对象。

mesh.position

mesh.rotation

mesh.scale

mesh.translateX

mesh.translateY

mesh.translateZ

cube.position.set(10,3,1)

cube.position = new THREE.Vector3(10,3,1)

1、在controls 中添加方法变量

属性变量是这样的: this.positionX = 1

方法变量:

2、把对象传递给gui (无取值范围)

gui.add(controls,'translate')

这样在gui中点击的时候就可以调用 translate 方法

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials)//其中materials是设置材料的对象数组

这个方法创建出来的不是一个THREE.Mesh实例,而是materials数组里面的每一个材质都会创建一个实例 所以要像使用Scene对象一样使用这个(THREE.Mesh)

亲,微信的公众平台域名是mp.weixin.qq.com,至于URL意思就是统一资源定位符URL,统一资源定位符 URL 是对可以从因特网上得到的资源的位置和访问方法的一种简洁的表示。URL 给资源的位置提供一种抽象的识别方法,并用这种方法给资源定位。统一资源定位符只要能够对资源定位,系统就可以对资源进行各种操作,如存取、更新、替换和查找其属性。URL 相当于一个文件名在网络范围的扩展。因此 URL 是与因特网相连的机器上的任何可访问对象的一个指针。在因特网的历史上,统一资源定位符的发明是一个非常基础的步骤。统一资源定位符的语法是一般的,可扩展的,它使用ASCII代码的一部分来表示因特网的地址。一般统一资源定位符的开始标志着一个计算机网络所使用的网络协议。

移动端(h5页,小标题)

PC端

移动端:Vant ,Cube-UI , NutUI

PC端:    element-ui  (饿了么),Ant Design of Vue(蚂蚁),iView(个人)

小程序:uniapp

学习组件库的基本方法是查文档,遇到困难时提 issue

1.首先通过命令: npm i element-ui -S 安装  -S为生产环境依赖,上线时也要一起打包发布

2.到main.js中引入并注册  注意:此时不仅要引入组件还要引入样式,写法固定可以直接到官网上面复制粘贴

3.剩下的就是用哪个组件直接参考组件文档 cv 使用即可,按照要求修改成自己想要的样式。

1.数据源由table组件的data属性来指定(不需要我们自己用v-for指令来循环)

2.data,决定表格的数据。其中的包含行列内容数据的属性是一个数组,数组中的每一个元素是一个对象,一个对象就表示一行。

3.列,决定表格结构。 列由el-table-column决定,列的数据就是数组中每一个对象(行)中的数据,将对象的属性赋给prop属性用来更改列的展示内容,下面有三个属性需要掌握:

①label:决定当前列显示出的标题

②prop:决定当前列数据的来源。对于表格来说, 它的数据是一个数组,每一个元素是一个对象,这里的prop值就是这个对象中的属性名

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

③width: 用来设置列的宽度。如果不设置,它会自适应。

data中的数据就是  列  所需要携带的属性,行中有列

当我们想要渲染一些自定义的内容,例如图片,操作按钮时,就需要在对应列中,使用 template  标签包裹我们的自定义渲染内容,这时用的就是自定义插槽的机制

要自定义内容:1. 删除prop属性   2.用 插槽

例:想要将数字转换成对应代表的男女