ThingOrigin.js

案例展示 ​

环境纹理贴图

<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 r = `${import.meta.env.BASE_URL}img/materials/Bridge2/`;
  //或者使用数组
  // const urls = [r + 'posx.jpg', r + 'negx.jpg',
  // r + 'posy.jpg', r + 'negy.jpg',
  // r + 'posz.jpg', r + 'negz.jpg'];

  // 路径列表
  const urls1 = ['posx.jpg', 'negx.jpg',
    'posy.jpg', 'negy.jpg',
    'posz.jpg', 'negz.jpg'];

  //加载贴图纹理
  const envMap = TO.material.initCubeTexture({
    urls: urls1,
    pathPrefix: r,
  });
  //创建材质
  const material = TO.material.initBasicMaterial({
    color: 0xffffff,
    envMap: envMap
  });


  //创建网格模型
  const mesh = TO.model.initCube({
    name: "cube",
    base: {
      width: 80,
      height: 80,
      depth: 80,
    },
    position: {
      y: 40
    }
  });
  //设置材质
  mesh.material = material;
  //添加模型
  TO.scene.add(mesh);
});
</script>

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

API 介绍 ​

material.initCubeTexture ​

方法签名返回值描述
initCubeTexture(params: Partial<CubeTextureParams>)CubeTexture创建环境纹理贴图

CubeTextureParams 参数说明：

参数名说明类型必填默认值
urls6个面的贴图路径，格式为 [posx, negx, posy, negy, posz, negz]array--
pathPrefix贴图路径前缀string--