材质(Material)和几何体(Geometry)

1.    材质

  一个材质结合一个几何体可以组成一个mesh对象。材质就像物体的皮肤,决定了几何体的外表。例如:皮肤定义了一个几何体看起来是否像金属、透明与否,或者显示为线框。

基本的材质如下:

1.属性介绍

1.1基础属性

   这些属性是所有材质共有的。通过这些属性可以设置材质的透明度、是否可见以及如何被引用(ID或自定义名称)。

1.2.融合属性

   融合决定了渲染的颜色如何与它们的后面的颜色交互。

 

1.3高级属性

  这些属性与WebGL内部工作有关,如下:

2.基本的网格材质

 设置材质属性的方法有两种,一种是通过构造函数传入参数的形式,如下

var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

第二种是通过修改属性的方法设置:

        var meshMaterial = new THREE.MeshBasicMaterial();
        meshMaterial.color = new THREE.Color(0x7777ff);
        meshMaterial.name="xxx";

 2.1    THREE.MeshBasicMaterial

   一种非常简单的材质,不考虑场景中的光照的影响。使用这种材质的网格会被渲染成简单的平面多边形,而且可以显示几何体的线框。除了上面的公共属性还可以设置下面的属性:

 2.2    THREE.MeshDepthMaterial

   这种材质其外观不是由光照或某个属性决定的,而是由物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用,从而很容易地创建出逐渐消失的效果。其特有属性如下:

3.高级材质 (光亮的和暗淡的材质)

  THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial材质会对光源做出反应,并且分别用来创建暗淡的材质和光亮的材质。

 3.1THREE.MeshLambertMaterial  创建暗淡材质

  创建暗淡的但是并不光亮的表面。会对光源产生影响。其特有的属性如下:

3..2    THREE.MeshPhongtMaterial创建光亮的材质

  与上面基本一样,只是用于创建光亮的材质。其基本属性如下:

 

总结:

  不是所有的材质都能对场景中的光源产生反应,如果希望一个材质计算光照的影响,应该使用高级材质(THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial) 。

  材质的大部分属性在运行时可以修改,但是有一些属性(例如side)不能修改。如果需要修改这些属性的值,需要将needsUodate属性设置为true。

 

2.    几何体 (重要)

  材质决定物体的外观,几何级决定了物体的形状,Three.js提供的几何体有:

基本的几何体:

高级几何体:

 1.THREE.JS提供发基本几何体

  基本的有二维几何体:THREE.CircleGeometry,THREE.RingGeometry和THREE.PlanGeometry、ShapeGeometry。

1.1二维几何体:

  二维几何体,看上去是扁平的,只有两个维度。

(1)THREE.PlaneGeometry(10, 14, 4, 4)   创建二维平面几何体

  其属性如下:

(2)THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2)  创建圆形或者扇形

  其属性如下:

创建一个完整的圆的代码如下:

new THREE.CircleGeometry(3,12)

 

创建一个半圆的代码如下:

new THREE.CircleGeometry(3,12,0,Math.PI)

 

(3)THREE.RingGeometry()  创建类似于圆的图形

  其参数如下:

(4)THREE.ShapeGeometry  自定义二维几何体

 

1.2   三维几何体

 1.THREE.BoxGeometry  立方体几何体 (重要)

  创建一个长方体只需要指定宽度高度和深度就可以,属性如下:

例如:

new THREE.BoxGeometry(10, 10, 10, 1, 1, 1)

如下:

 

 2.  THREE.SphereGeometry(4, 10, 10) 创建球体

   创建三维球体,属性如下:

3.new THREE.CylinderGeometry(20, 20, 20)  创建类似于圆柱体

  属性如下:

 

总结:

  开始创建几何体时,不要直接使用那些复杂的材质,可以从简单的BasicMaterial开始,并将wireframe属性设为true,或者使用NormalMaterial。

  对于二维图形,重要的是记住它们放置在x-y平面上的。如果想拥有一个水平的二维图形,那么需要将x轴旋转-0.5*Math.PI。如果要旋转一个二维图形或者一个开放的三维图形,记住需要将材质设置成THREE.DoubleSide,如果不这么做,那么几何体的内侧或背面将会不可见。

 

posted @ 2019-05-15 22:49  QiaoZhi  阅读(2199)  评论(1编辑  收藏  举报