ThingOrigin.js

材质 ​

下面以物理网格材质为例，开启材质篇章。

初始化场景 ​

默认已经设置了一个 div 宽度为 600px， 高度为 400px， id 设置为 TO 的容器。
且已经完成初始化一个空场景，请参考 初始化场景。

物理网格材质 ​

设置颜色值。

js
const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffffff, 0x888888,
        0x336699, 0x993366, 0x669933, 0x999933, 0x339933, 0x993399, 0x339999, 0x000000];

循环生成一个 4 x 4 球体矩阵。

js
const matrixSize = 4;
const spacing = 22;
for (let i = 0; i < matrixSize; i++) {
    for (let j = 0; j < matrixSize; j++) {
        //生成球体
        const sphereGeometry = TO.model.initSphere();
        //生成物理网格材质
        const material = TO.material.initPhysicalMaterial(
            colors[i * matrixSize + j],
            null,
            null,
            0,
            1,
            0,
            0,
            0,
            2
        );
        //设置球体材质
        sphereGeometry.material = material;
        //设置球体位置
        sphereGeometry.position.x = (i - (matrixSize - 1) / 2) * spacing;
        sphereGeometry.position.y = (j - (matrixSize - 1) / 2) * spacing;
        //添加球体到场景
        TO.scene.add(sphereGeometry);
    }
}

方法参数说明

  • color: 材质的颜色
  • map: 颜色贴图
  • envMap: 环境贴图
  • metalness: 金属度 非金属材质0.0，金属使用1.0 范围从0.0-1.0
  • roughness: 粗糙度 0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0
  • clearcoat: 表示clear coat层的强度 范围从0.0到1.0m,默认为0.0
  • clearcoatRoughness: clear coat层的粗糙度，由0.0到1.0。 默认为0.0
  • envMapIntensity: 通过乘以环境贴图的颜色来缩放环境贴图的效果
  • side: 定义将要渲染哪一面 正面0，背面1, 双面2 默认为正面

更多材质使用方法，请参考 案例