ThingOrigin.js

案例展示 ​

基础纹理贴图

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

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

onMounted(() => {
  //初始化场景
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    helper: {//辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      }
    }
  })

  //加载贴图纹理图像
  var texture1 = TO.material.initTextureMap({
    url: `${import.meta.env.BASE_URL}img/materials/brick_diffuse.jpg`, //红砖
    mapType: 'map',
  })
  //创建材质
  const material = TO.material.initBasicMaterial({
    color: 0xffffff,
    map: texture1,
  })

  //创建网格模型
  const mesh = TO.model.initSphere({
    name: "Mesh1",
    base: {
      radius: 30,
      widthSegments: 30,
      heightSegments: 30,
    },
    position: { x: -50, y: 30, z: 0 },
  })
  mesh.material = material;
  TO.scene.add(mesh)


  //加载贴图纹理图像
  var texture2 = TO.material.initTextureMap({
    url: `${import.meta.env.BASE_URL}img/materials/raw_plank_wall_diff_2k.jpg`, //木质地板
    mapType: 'map',
  })
  //创建材质
  const material2 = TO.material.initBasicMaterial({
    color: 0xffffff,
    map: texture2,
  })

  //创建网格模型
  const mesh2 = TO.model.initSphere({
    name: "Mesh2",
    base: {
      radius: 30,
      widthSegments: 30,
      heightSegments: 30,
    },
    position: { x: 20, y: 30, z: 0 },
  })
  mesh2.material = material2;
  TO.scene.add(mesh2)
  
  //加载贴图纹理图像
  var texture3 = TO.material.initTextureMap({
    url: `${import.meta.env.BASE_URL}img/materials/FloorTile_S.jpg`, //木质地板
    mapType: 'map',
  })
//创建材质
  const material3 = TO.material.initBasicMaterial({
    color: 0xffffff,
    map: texture3,
  })

  //创建网格模型
  const mesh3 = TO.model.initSphere({
    name: "Mesh3",
    base: {
      radius: 30,
      widthSegments: 30,
      heightSegments: 30,
    },
    position: { x: 90, y: 30, z: 0 },
  })
  mesh3.material = material3;
  TO.scene.add(mesh3)

});
</script>

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

API 介绍 ​

material.initTextureMap ​

方法签名返回值描述
initTextureMap(params: BaseMapParams | NormalMapParams)Texture创建基础纹理贴图

BaseMapParams 参数说明：

参数名说明类型必填默认值
url贴图urlstring--
mapType贴图类型：map | normal | roughness | metalness | ao | emissive | displacement | alpha | bumpstring--

NormalMapParams 参数说明：

url 与 mapType 参数与 BaseMapParams 参数一致

参数名说明类型必填默认值
normalScale法线贴图特定参数（范围0-1）Vector2|number--