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 waterGeometry = TO.model.initPlaneGeometry(200, 200);

  //设置水波纹材质
  let water = TO.material.setWaterSkin(
    waterGeometry, //模型
    200, //宽度
    200,//高度
    `${import.meta.env.BASE_URL}img/materials/waternormals.jpg` //图片
  );

  //旋转角度
  water.rotation.x = -Math.PI / 2;
  //添加到场景
  TO.scene.add(water);
  //收到更新材质
  TO.toUpdate.material.push(water.material);
});


</script>

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

API 介绍 ​

material.setWaterSkin ​

方法签名返回值描述
setWaterSkin(geometry: PlaneGeometry, width: number, height: number, url: string, waterColor?: string | number | Color, sunDirection?: Vector3, sunColor?: string | number | Color)Water给模型设置水波纹材质（需要将色调映射设置为 NoToneMapping）

参数说明：

参数名说明类型必填默认值
geometry模型PlaneGeometry是-
width纹理宽度number是-
height纹理高度number是-
url纹理图片urlstring是-
waterColor水颜色string | number | Color--
sunDirection太阳方向Vector3--
sunColor太阳颜色string | number | Color--