TvT.js
目录
主题颜色

物体

ThreeJs通用Mesh等

和 ThreeJs 物体部分相通，如下都支持: Bone、Group、InstancedMesh、Line、LineLoop、LineSegments、LOD、Mesh、Points、Skeleton、SkinnedMesh、Sprite 详情移步：ThreeJs-物体部分open in new window 下面来举个例子：

<template>
  <TresCanvas>
	<TresMesh :position="[1,0,0]" :scale-y="2" :rotation-x="Math.PI * 2">
		<TresBoxGeometry />
		<TresMeshBasicMaterial />
    </TresMesh>
  </TresCanvas>
</template>

也可以这么描述：

<template>
  <TresCanvas>
	  <TresMesh 
        :geometry="new THREE.BoxGeometry(1, 1, 1)" 
        :material="new THREE.MeshBasicMaterial({ color: 0x00ff00 })" />
  </TresCanvas>
</template>

可挂载参数：

挂载参数名称参数例子扩展扩展参数例扩展说明
position位置[1,0,0]position-x1x,y,z 同理
scale缩放[1,2,1]scale-y2x,y,z 同理
rotation旋转[0,Math.PI * 2,0]rotation-z-Math.PI * 2x,y,z 同理
cast-shadow阴影贴图
......等等详见ThreeJs-Object3Dopen in new window

TIP

  • 组件名都是 Tres+对应的ThreeJs名称，其中一般包含Geometry几何体和Material材质。
  • 官方不推荐直接挂载反应式的数据绑定参数，若需要动态改变物体的具体参数，推荐如下操作：
<template>
  <TresCanvas>
	<TresMesh ref="boxRef">
		<TresBoxGeometry />
		<TresMeshBasicMaterial />
    </TresMesh>
  </TresCanvas>
</template>
<script lang="ts" setup>
import { shallowRef, watchEffect } from 'vue'
import { TresCanvas } from '@tresjs/core'
const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
watchEffect(() => {
	if (boxRef.value) {
		boxRef.value.position.x = 2.0
		console.log(boxRef.value)
	}
})
</script>
  • 其中 TresGroup 例子如下：
<template>
  <TresCanvas>
	 <TresGroup ref="groupRef" :position="[2,0,0]">
      <TresMesh>
        <TresBoxGeometry />
        <TresMeshBasicMaterial color="red" />
      </TresMesh>
      <TresMesh>
        <TresSphereGeometry />
        <TresMeshBasicMaterial color="blue" />
      </TresMesh>
    </TresGroup>
  </TresCanvas>
</template>

特殊物体: Primitives

组件是 TresJS 中一个通用的底层组件，允许您在Vue中直接使用任何three.js对象，而无需抽象它，所谓物体占位符。详情可移步：tresjs-点击详情open in new window

TIP

  • 使用场景一：使用原生的 ThreeJs API来创建物体对象，然后直接塞到占位符。
<template>
  <TresCanvas>
    <primitive :object="obMesh" />
  </TresCanvas>  
</template>

<script setup lang="ts">
  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'  
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshBasicMaterial({ color: 0x00ff00 })
  const obMesh = new Mesh(geometry, material)
</script>
  • 使用场景二：等待读取三维模型，然后塞到占位符。
<template>
	<TresCanvas>
		<primitive :object="nodes.AkuAku" />
	</TresCanvas>
</template>

<script lang="ts" setup>
import { useGLTF } from '@tresjs/cientos'

const { nodes } = await useGLTF('/models/AkuAku.gltf')
</script>

注意：此段代码是异步等待读取模型：await 以及 <Suspense> ，在vue3.x的<script setup> 语法糖中，需要做<Suspense>处理，具体在常见问题中，请移步：点击详情

本页目录