use fbx model
This commit is contained in:
parent
72b62896de
commit
0af77c958b
|
|
@ -10,7 +10,7 @@
|
|||
"dependencies": {
|
||||
"@fireworks-js/vue": "^2.10.7",
|
||||
"@tresjs/cientos": "^3.9.0",
|
||||
"@tresjs/core": "^4.0.0-rc.0",
|
||||
"@tresjs/core": "^3.9.0",
|
||||
"@vueuse/components": "^10.9.0",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"d3": "^7.9.0",
|
||||
|
|
@ -802,7 +802,7 @@
|
|||
"vue": ">=3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tresjs/cientos/node_modules/@tresjs/core": {
|
||||
"node_modules/@tresjs/core": {
|
||||
"version": "3.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@tresjs/core/-/core-3.9.0.tgz",
|
||||
"integrity": "sha512-6el70oXSduTvSA3XCI8/rQV2GzcgCLceZKA443CTU/MBPmRDULJ12q/UYl18Ij4CJ68rTqgVi0Da+WNMrs784A==",
|
||||
|
|
@ -816,20 +816,6 @@
|
|||
"vue": ">=3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tresjs/core": {
|
||||
"version": "4.0.0-rc.0",
|
||||
"resolved": "https://registry.npmjs.org/@tresjs/core/-/core-4.0.0-rc.0.tgz",
|
||||
"integrity": "sha512-xztDCvDbIisHUWY6Axwy4swMj/LgxmfJRSke3E1gKV+W5uS77sWxD2r9i5rzUq+Gh4Gq8Vt5xNnS1D01QL412Q==",
|
||||
"dependencies": {
|
||||
"@alvarosabu/utils": "^3.2.0",
|
||||
"@vue/devtools-api": "^6.6.1",
|
||||
"@vueuse/core": "^10.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"three": ">=0.133",
|
||||
"vue": ">=3.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"dependencies": {
|
||||
"@fireworks-js/vue": "^2.10.7",
|
||||
"@tresjs/cientos": "^3.9.0",
|
||||
"@tresjs/core": "^4.0.0-rc.0",
|
||||
"@tresjs/core": "^3.9.0",
|
||||
"@vueuse/components": "^10.9.0",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"d3": "^7.9.0",
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,11 +0,0 @@
|
|||
Model Information:
|
||||
* title: Rubber duck
|
||||
* source: https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886
|
||||
* author: samene (https://sketchfab.com/samene)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* requirements: Author must be credited. Commercial use is allowed.
|
||||
|
||||
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
|
||||
This work is based on "Rubber duck" (https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886) by samene (https://sketchfab.com/samene) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
Binary file not shown.
|
|
@ -1,260 +0,0 @@
|
|||
{
|
||||
"accessors": [
|
||||
{
|
||||
"bufferView": 2,
|
||||
"componentType": 5126,
|
||||
"count": 3737,
|
||||
"max": [
|
||||
0.6664810180664063,
|
||||
0.8251870274543762,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-0.6664810180664063,
|
||||
-0.8251870274543762,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 44844,
|
||||
"componentType": 5126,
|
||||
"count": 3737,
|
||||
"max": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-1.0,
|
||||
-1.0,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 3,
|
||||
"componentType": 5126,
|
||||
"count": 3737,
|
||||
"max": [
|
||||
1.0,
|
||||
0.9991883039474487,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-1.0,
|
||||
-0.9989029169082642,
|
||||
-1.0,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC4"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"componentType": 5126,
|
||||
"count": 3737,
|
||||
"max": [
|
||||
0.9725810289382935,
|
||||
0.9348239898681641
|
||||
],
|
||||
"min": [
|
||||
0.05584320053458214,
|
||||
0.042854998260736465
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"componentType": 5125,
|
||||
"count": 18900,
|
||||
"type": "SCALAR"
|
||||
}
|
||||
],
|
||||
"asset": {
|
||||
"extras": {
|
||||
"author": "samene (https://sketchfab.com/samene)",
|
||||
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||
"source": "https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886",
|
||||
"title": "Rubber duck"
|
||||
},
|
||||
"generator": "Sketchfab-12.67.0",
|
||||
"version": "2.0"
|
||||
},
|
||||
"bufferViews": [
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 75600,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34963
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 29896,
|
||||
"byteOffset": 75600,
|
||||
"byteStride": 8,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 89688,
|
||||
"byteOffset": 105496,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 59792,
|
||||
"byteOffset": 195184,
|
||||
"byteStride": 16,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
}
|
||||
],
|
||||
"buffers": [
|
||||
{
|
||||
"byteLength": 254976,
|
||||
"uri": "scene.bin"
|
||||
}
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"uri": "textures/lambert1_baseColor.jpeg"
|
||||
},
|
||||
{
|
||||
"uri": "textures/lambert1_metallicRoughness.png"
|
||||
},
|
||||
{
|
||||
"uri": "textures/lambert1_normal.png"
|
||||
}
|
||||
],
|
||||
"materials": [
|
||||
{
|
||||
"doubleSided": true,
|
||||
"name": "lambert1",
|
||||
"normalTexture": {
|
||||
"index": 2
|
||||
},
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"metallicRoughnessTexture": {
|
||||
"index": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes": [
|
||||
{
|
||||
"name": "defaultMaterial",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 1,
|
||||
"POSITION": 0,
|
||||
"TANGENT": 2,
|
||||
"TEXCOORD_0": 3
|
||||
},
|
||||
"indices": 4,
|
||||
"material": 0,
|
||||
"mode": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"nodes": [
|
||||
{
|
||||
"children": [
|
||||
1
|
||||
],
|
||||
"matrix": [
|
||||
1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
2.220446049250313e-16,
|
||||
-1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0,
|
||||
2.220446049250313e-16,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "Sketchfab_model"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
2
|
||||
],
|
||||
"matrix": [
|
||||
1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
-4.371139006309477e-08,
|
||||
0.999999999999999,
|
||||
0.0,
|
||||
0.0,
|
||||
-0.999999999999999,
|
||||
-4.371139006309477e-08,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "Collada visual scene group"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
3
|
||||
],
|
||||
"name": "patitodegoma2"
|
||||
},
|
||||
{
|
||||
"mesh": 0,
|
||||
"name": "defaultMaterial"
|
||||
}
|
||||
],
|
||||
"samplers": [
|
||||
{
|
||||
"magFilter": 9729,
|
||||
"minFilter": 9987,
|
||||
"wrapS": 10497,
|
||||
"wrapT": 10497
|
||||
}
|
||||
],
|
||||
"scene": 0,
|
||||
"scenes": [
|
||||
{
|
||||
"name": "Sketchfab_Scene",
|
||||
"nodes": [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"textures": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 0
|
||||
},
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 1
|
||||
},
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 MiB |
|
|
@ -1,14 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { shallowRef } from 'vue';
|
||||
import { CameraControls, FBXModel, GLTFModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
|
||||
import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
|
||||
import { onUnmounted, reactive, ref } from 'vue';
|
||||
import { CameraControls, FBXModel, PositionalAudio, useFBX, useProgress } from '@tresjs/cientos'
|
||||
import { TresCanvas, useRenderLoop } from '@tresjs/core';
|
||||
import { Vector3 } from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
|
||||
import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
|
||||
import duckUrl from '../../assets/promo/models/rubber_duck (1)/scene.gltf'
|
||||
import jeepUrl from '../../assets/promo/models/jeep.fbx'
|
||||
import audioUrl from '../../assets/promo/sounds/sea.ogg'
|
||||
|
||||
const router = useRouter()
|
||||
|
|
@ -23,8 +22,8 @@ const onChange = (e: any) => {
|
|||
e._camera.position.sub(_v);
|
||||
}
|
||||
|
||||
const cameraPosition = new Vector3(200, 400, 800)
|
||||
const lightPosition = new Vector3(80, 20, 100)
|
||||
const cameraPosition = [200, 400, 800]
|
||||
const lightPosition = [3, 3, 3]
|
||||
|
||||
const controlsState = reactive({
|
||||
minDistance: 300,
|
||||
|
|
@ -41,11 +40,12 @@ const positionalAudioRef = shallowRef()
|
|||
onUnmounted(() => {
|
||||
positionalAudioRef?.value?.dispose()
|
||||
})
|
||||
|
||||
const ducks: any[] = []
|
||||
const ducksRef: any[] = []
|
||||
for (let index = 0; index < 4; index++) {
|
||||
// const { scene } = await useLoader(GLTFLoader, duckUrl)
|
||||
// ducks.push(scene)
|
||||
const model = await useFBX(jeepUrl)
|
||||
ducks.push(model)
|
||||
ducksRef.push(ref())
|
||||
}
|
||||
const { onLoop } = useRenderLoop()
|
||||
|
|
@ -54,42 +54,35 @@ onLoop(() => {
|
|||
for (let index = 0; index < ducksRef.length; index++) {
|
||||
const element = ducksRef[index];
|
||||
if (element.value) {
|
||||
element.value[0].rotation.y += 0.01 * index
|
||||
element.value[0].rotation.y += 0.01 * (index + 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
||||
Загрузка {{ progress }}%
|
||||
</div>
|
||||
<div :class="[{ 'invisible': !hasFinishLoading }]">
|
||||
<TresCanvas window-size alpha shadows :on-click="() => console.log('Scene')">
|
||||
<div>
|
||||
<TresCanvas window-size alpha shadows>
|
||||
<TresPerspectiveCamera :position="cameraPosition" />
|
||||
<CameraControls v-bind="controlsState" @change="onChange" make-default />
|
||||
|
||||
<Suspense>
|
||||
<Suspense v-if=false>
|
||||
<FBXModel :path="modelUrl">
|
||||
<PositionalAudio ref="positionalAudioRef" :url="audioUrl" :loop="true" :inner-angle="360" />
|
||||
</FBXModel>
|
||||
</Suspense>
|
||||
|
||||
<TresMesh :position-x="400" :position-z="400" @click="() => console.log('click big red item')">
|
||||
<TresBoxGeometry :args="[100, 100, 100]" />
|
||||
<TresMeshBasicMaterial color="red" />
|
||||
</TresMesh>
|
||||
<Suspense>
|
||||
<FBXModel :path="jeepUrl" :scale="0.5"></FBXModel>
|
||||
</Suspense>
|
||||
<template v-for="i in 4">
|
||||
<Suspense>
|
||||
<TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
|
||||
@click="() => console.log('click on duck')" :ref="ducksRef[i]" cast-shadow>
|
||||
<TresBoxGeometry :args="[100, 100, 100]" />
|
||||
<TresMeshBasicMaterial color="red" />
|
||||
@click="() => console.log('click on duck')" :ref="ducksRef[i - 1]">
|
||||
<primitive :object="ducks[i - 1]" :scale="0.25" />
|
||||
</TresMesh>
|
||||
</Suspense>
|
||||
</template>
|
||||
|
||||
<TresDirectionalLight :position="lightPosition" :intensity="15" cast-shadow />
|
||||
<TresAmbientLight :intensity="5" />
|
||||
<TresDirectionalLight :position="lightPosition" :intensity="5" />
|
||||
<TresAmbientLight />
|
||||
</TresCanvas>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue