案例展示

水波纹材质

<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(100, 100);

  let water = TO.material.setWaterSkin(
    waterGeometry,
    100,
    100,
    `${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	string	是	-
waterColor	string | number | Color	否	水颜色
sunDirection	Vector3	否	太阳方向
sunColor	string | number | Color	否	太阳颜色