案例展示

法线纹理贴图

<template>
  <div id="TO"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  //初始化场景
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    helper: {//辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    },
  })
  // 批量创建材质贴图
  const maps = TO.material.initTextureMaps({
    map: { url: `${import.meta.env.BASE_URL}img/materials/gray_rocks_diff_2k.jpg` },//基础贴图
    displacement: { url: `${import.meta.env.BASE_URL}img/materials/gray_rocks_disp_2k.png` }, //位移贴图
  });
  //创建高光材质
  const material = TO.material.initPhongMaterial({
    map: maps.map, //贴图
    displacementMap: maps.displacement, //位移贴图
  })

  //创建网格模型
  TO.model.initPlane({
    name: "wallMesh",
    base: {
      width: 1000, //平面在 X 轴方向的宽度
      height: 1000, //平面在 Y 轴方向的高度
    },
  }).then(mesh => {
    mesh.material = material;
    //添加到场景中
    TO.scene.add(mesh)
  })

});

</script>

<style scoped>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
</style>

API 介绍

material.initTextureMaps

方法签名	返回值	描述
initTextureMaps(params: MaterialMapsParams)	Texture	批量创建纹理贴图

MaterialMapsParams 参数说明：

参数名	说明	类型	必填	默认值
map	基础贴图	Omit<BaseMapParams, "mapType">	-	-
normal	通过法线向量模拟表面细节，比 bumpMap 更精确	Omit<NormalMapParams, "mapType">	-	-
roughness	控制表面粗糙度，影响高光大小和反射清晰度	Omit<BaseMapParams, "mapType">	-	-
metalness	控制表面金属属性，影响反射和环境映射效果	Omit<BaseMapParams, "mapType">	-	-
ao	环境光遮蔽贴图，增强模型立体感，不影响光照方向	Omit<BaseMapParams, "mapType">	-	-
emissive	自发光贴图，使物体表面发光，不受光照影响	Omit<BaseMapParams, "mapType">	-	-
displacement	通常用于更强烈的表面变形	Omit<BaseMapParams, "mapType">	-	-
alpha	控制材质透明度，黑色透明，白色不透明，需配合 transparent: true 使用	Omit<BaseMapParams, "mapType">	-	-
bump	通过明暗差异模拟表面凹凸，计算量小于法线贴图	Omit<BaseMapParams, "mapType">	-	-