82 lines
3.0 KiB
Vue
82 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, Environment, vLightHelper } from '@tresjs/cientos'
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 5,
|
|
maxDistance: 12,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
// maxZoom: 2,
|
|
// minZoom: 1,
|
|
})
|
|
const cameraStat = reactive({
|
|
position: [-4, 2, 8],
|
|
aspect: 1920 / 600,
|
|
fov: 40,
|
|
})
|
|
onMounted(() => {
|
|
cameraStat.aspect = window.innerWidth / 600
|
|
})
|
|
const spot = reactive({
|
|
x: 10, y: 10, z: 10, intensity: 10, distance: 10, color: 'red'
|
|
})
|
|
const directional = reactive({
|
|
x: 20, y: 10, z: 10, intensity: 10, distance: 10, color: 'green'
|
|
})
|
|
const point = reactive({
|
|
x: 30, y: 10, z: 10, intensity: 10, distance: 10, color: 'blue'
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="container min-w-full relative" v-if="false">
|
|
<div>
|
|
<h2>spot</h2>
|
|
<template v-for="(label, key) in spot">
|
|
<label :for="key">{{ key }}</label>
|
|
<input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="spot[key]" style="width: 100px" />
|
|
</template>
|
|
<h2>directional</h2>
|
|
<template v-for="(label, key) in directional">
|
|
<label :for="key">{{ key }}</label>
|
|
<input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="directional[key]"
|
|
style="width: 100px" />
|
|
</template>
|
|
<h2>point</h2>
|
|
<template v-for="(label, key) in point">
|
|
<label :for="key">{{ key }}</label>
|
|
<input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="point[key]" style="width: 100px" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="container min-w-full relative">
|
|
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
|
|
<Loader />
|
|
<TresCanvas shadows>
|
|
<TresPerspectiveCamera v-bind="cameraStat" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
|
|
</Suspense>
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
<template v-if="false">
|
|
<TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper />
|
|
<TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]"
|
|
cast-shadow v-light-helper />
|
|
<TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper />
|
|
<TresAmbientLight />
|
|
</template>
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |