107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { useGLTF } from '@tresjs/cientos'
|
|
import { Box3, Color, FrontSide, MeshStandardMaterial, Vector3 } from 'three';
|
|
const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color'])
|
|
|
|
let scene
|
|
if (props.modelUrl) {
|
|
const { scene: model } = await useGLTF(props.modelUrl, { draco: true })
|
|
scene = model
|
|
} else {
|
|
scene = props.model
|
|
}
|
|
scene.receiveShadow = true
|
|
scene.castShadow = true
|
|
|
|
const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
|
|
const box = new Box3();
|
|
box.expandByObject(scene.children[0]);
|
|
let size = new Vector3();
|
|
box.getSize(size)
|
|
|
|
const getMaterial = () => {
|
|
return new MeshStandardMaterial({
|
|
color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
|
|
roughness: 0.2,
|
|
metalness: 0.5,
|
|
})
|
|
}
|
|
const material = getMaterial()
|
|
function shadows_and_pos(scene: any) {
|
|
scene.children.forEach((el: any) => {
|
|
if (el.isMesh) {
|
|
el.castShadow = true
|
|
el.receiveShadow = true
|
|
}
|
|
if (props.removePos) {
|
|
el.translateX(-el.position.x)
|
|
el.translateY(-el.position.y)
|
|
el.translateZ(-el.position.z)
|
|
}
|
|
if (el.material && props.color) el.material = material
|
|
shadows_and_pos(el)
|
|
})
|
|
}
|
|
|
|
shadows_and_pos(scene)
|
|
|
|
const model = ref()
|
|
const { onLoop } = useRenderLoop()
|
|
let stepbase = 0.005
|
|
const axis = [
|
|
{ axis: 'x', func: 'translateX', },
|
|
{ axis: 'y', func: 'translateY', },
|
|
{ axis: 'z', func: 'translateZ', },
|
|
]
|
|
type vectorType = 'x' | 'y' | 'z';
|
|
|
|
onLoop(() => {
|
|
if (model.value && props.target) {
|
|
axis.forEach(element => {
|
|
const point = model.value.position[element.axis]
|
|
let step = stepbase * target[element.axis as vectorType]
|
|
if (step !== 0) {
|
|
if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
|
|
step = 0
|
|
}
|
|
model.value[element.func](step)
|
|
}
|
|
});
|
|
}
|
|
})
|
|
|
|
watch(props, () => {
|
|
if (props.color && `#${material.color.getHexString()}` !== props.color) {
|
|
function set_material(scene: any) {
|
|
scene.children.forEach((el: any) => {
|
|
if (el.material && props.color) el.material.color = new Color(props.color)
|
|
set_material(el)
|
|
})
|
|
}
|
|
set_material(model.value)
|
|
}
|
|
}, { deep: true })
|
|
|
|
const targetExplosion = useState('targetExplosion')
|
|
watch(targetExplosion, () => {
|
|
if (props.refPosition) {
|
|
if (model.value.position.x !== targetExplosion.value[props.refPosition][0]) {
|
|
model.value.position.x = targetExplosion.value[props.refPosition][0]
|
|
}
|
|
if (model.value.position.y !== targetExplosion.value[props.refPosition][1]) {
|
|
model.value.position.y = targetExplosion.value[props.refPosition][1]
|
|
}
|
|
if (model.value.position.z !== targetExplosion.value[props.refPosition][2]) {
|
|
model.value.position.z = targetExplosion.value[props.refPosition][2]
|
|
}
|
|
}
|
|
}, { deep: true })
|
|
</script>
|
|
<template>
|
|
<Suspense>
|
|
<TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
|
|
ref="model">
|
|
<primitive :object="scene.children[0]" />
|
|
</TresGroup>
|
|
</Suspense>
|
|
</template> |