53 lines
1.6 KiB
Vue
53 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls } from '@tresjs/cientos'
|
|
import Item from './model/item.vue';
|
|
|
|
const onClick = (e: MouseEvent) => {
|
|
console.log(e)
|
|
}
|
|
const controlsState = reactive({
|
|
minDistance: 0,
|
|
maxDistance: 100,
|
|
})
|
|
|
|
// Import necessary three.js classes
|
|
import { Mesh, BoxGeometry, MeshBasicMaterial, MeshStandardMaterial } from 'three'
|
|
|
|
// Create a box geometry and a basic material
|
|
const geometry = new BoxGeometry(1, 1, 1)
|
|
const material = new MeshStandardMaterial({ color: 0x00ff00 })
|
|
const meshWithMaterial = new Mesh(geometry, material)
|
|
|
|
</script>
|
|
<template>
|
|
<div class="container">
|
|
<TresCanvas clear-color="#82DBC5">
|
|
<TresPerspectiveCamera :position="[5, 5, 5]" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<TresMesh @click="onClick" :position="[-1, -1, -1]">
|
|
<primitive :object="meshWithMaterial" />
|
|
</TresMesh>
|
|
<Suspense>
|
|
<TresGroup>
|
|
<Item model-url="/models/kosynka.glb" />
|
|
<Item model-url="/models/kreplaniye_planok.glb" />
|
|
<Item model-url="/models/planki.glb" />
|
|
<Item model-url="/models/stolb.glb" />
|
|
<Item model-url="/models/verh.glb" />
|
|
<Item model-url="/models/zakliopki.glb" />
|
|
</TresGroup>
|
|
</Suspense>
|
|
<TresDirectionalLight />
|
|
<TresAmbientLight />
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 100vh;
|
|
max-height: 50vw;
|
|
display: block;
|
|
}
|
|
</style> |