几何体
ThreeJs通用Geometry等
和 ThreeJs 几何体部分相通，如下都支持: BoxGeometry、CapsuleGeometry、CircleGeometry、ConeGeometry、CylinderGeometry、DodecahedronGeometry、EdgesGeometry、ExtrudeGeometry、IcosahedronGeometry、LatheGeometry、OctahedronGeometry、PlaneGeometry、PolyhedronGeometry、RingGeometry、ShapeGeometry、SphereGeometry、TetrahedronGeometry、TorusGeometry、TorusKnotGeometry、TubeGeometry、WireframeGeometry 详情移步：ThreeJs-几何体部分
<template>
<TresCanvas>
<TresMesh>
<TresBoxGeometry :args=[1,1,1] :widthSegments="10"/>
<TresMeshBasicMaterial />
</TresMesh>
</TresCanvas>
</template>
args参数
挂载的 args 为 构造函数（Constructor）所用到参数，此例子中 BoxGeometry :
BoxGeometry(width : Float, height : Float, depth : Float,
widthSegments : Integer, heightSegments : Integer, depthSegments : Integer);
width — X 轴上面的宽度，默认值为 1
height — Y 轴上面的高度，默认值为 1
depth — Z 轴上面的深度，默认值为 1
widthSegments — （可选）宽度的分段数，默认值是 1
heightSegments — （可选）高度的分段数，默认值是 1
depthSegments — （可选）深度的分段数，默认值是 1
挂载参数
挂载的其他形如： widthSegments 参数，参考构造参数以及属性（Properties），可以移步基类 BufferGeometry 的文档ThreeJs-点击详情 如下例子描写 如何在 BufferGeometry 挂载 attributes 参数
<template>
<TresCanvas>
<TresMesh>
<TresBufferGeometry :position="[positionArray, 3]" :a-scale="[scaleArray, 1]"/>
<TresShaderMaterial v-bind="shader" />
</TresMesh>
</TresCanvas>
</template>
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
const firefliesCount = 3000
const positionArray = new Float32Array(firefliesCount * 3)
const scaleArray = new Float32Array(firefliesCount)
for (let i = 0; i < firefliesCount; i++) {
positionArray[i * 3 + 0] = Math.random()
positionArray[i * 3 + 1] = Math.random()
positionArray[i * 3 + 2] = Math.random()
scaleArray[i] = Math.random()
}
const shader = {
vertexShader: `
// 着色器使用 aScale 声明后直接调用
attribute float aScale;
// 着色器直接使用 position 顶点
`
}
</script>
ref/shallowRef 大法
使用vue的ref方法获取属性和调用方法
<template>
<TresCanvas>
<TresMesh>
<TresBufferGeometry ref="tbgRef"/>
<TresShaderMaterial />
</TresMesh>
</TresCanvas>
</template>
<script lang="ts" setup>
import { shallowRef, watchEffect } from 'vue'
import { TresCanvas } from '@tresjs/core'
const tbgRef: ShallowRef<TresInstance | null> = shallowRef(null)
const positions = []
const count = 3000
for (let i = 0; i < count; i++) {
positions.push(Math.random(),Math.random(),Math.random())
}
watchEffect(() => {
if (tbgRef.value) {
tbgRef.value.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ))
console.log(tbgRef.value)
}
})
</script>
TIP
也可参考 TresJs 点击详情