材质
ThreeJs通用Material等
和 ThreeJs 材质部分相通，如下都支持: LineBasicMaterial、LineDashedMaterial、Material、MeshBasicMaterial、MeshDepthMaterial、MeshDistanceMaterial、MeshLambertMaterial、MeshMatcapMaterial、MeshNormalMaterial、MeshPhongMaterial、MeshPhysicalMaterial、MeshStandardMaterial、MeshToonMaterial、PointsMaterial、RawShaderMaterial、ShaderMaterial、ShadowMaterial、SpriteMaterial 详情移步：ThreeJs-材质部分
挂载参数
挂载的其他形如： roughness、color 的参数，参考属性(Properties)ThreeJs-材质部分
<template>
<TresCanvas>
<TresMesh>
<TresBoxGeometry :args=[1,1,1] :widthSegments="10"/>
<TresMeshPhysicalMaterial :roughness="1" color="orange" :side="2" />
</TresMesh>
</TresCanvas>
</template>
v-bind绑定
如下举例，具体参数根据API设置
<template>
<TresCanvas>
<TresMesh>
<TresBufferGeometry/>
<TresShaderMaterial v-bind="shader" />
</TresMesh>
</TresCanvas>
</template>
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
const shader = {
vertexShader: ``,
//...
}
</script>
ref/shallowRef 大法
使用vue的ref方法获取属性和调用方法
<template>
<TresCanvas>
<TresMesh>
<TresBufferGeometry />
<TresMeshPhysicalMaterial ref="tsmRef"/>
</TresMesh>
</TresCanvas>
</template>
<script lang="ts" setup>
import { shallowRef, watchEffect } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { Color} from 'three';
const tsmRef: ShallowRef<TresInstance | null> = shallowRef(null)
watchEffect(() => {
if (tsmRef.value) {
tsmRef.value.color = new Color('#ffff00')
console.log(tsmRef.value)
}
})
</script>
TIP
也可参考 TresJs 点击详情