43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, vLightHelper } from '@tresjs/cientos'
|
|
|
|
import Canvas from './model/canvas.vue';
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 1,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
// console.log(controlsState)
|
|
// const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
|
|
// const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
|
|
// const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
|
|
// console.log({ backLight, primaryLight, secondaryLight })
|
|
|
|
const { onLoop } = useRenderLoop()
|
|
onLoop(({ elapsed }) => {
|
|
// console.log(elapsed)
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="container min-w-full">
|
|
<TresCanvas shadows>
|
|
<TresPerspectiveCamera :position="[2, 3, 6]" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Canvas />
|
|
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
|
|
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
|
|
<TresAmbientLight />
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |