From dcd6b7ea6ac2bb27e11e602a9d2804fbf546a3a4 Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Tue, 18 Oct 2022 16:26:17 +0800 Subject: [PATCH] Add loader to lib --- lib/gltfLoader.ts | 12 ++++++++++++ pages/about.tsx | 13 +++---------- pages/index.tsx | 11 ++--------- 3 files changed, 17 insertions(+), 19 deletions(-) create mode 100644 lib/gltfLoader.ts diff --git a/lib/gltfLoader.ts b/lib/gltfLoader.ts new file mode 100644 index 0000000..bd21ad8 --- /dev/null +++ b/lib/gltfLoader.ts @@ -0,0 +1,12 @@ +import { THREE } from 'rua-three'; +import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; +import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; + +const manager = new THREE.LoadingManager(); +const gltfLoader = new GLTFLoader(manager); +const dracoLoader = new DRACOLoader(); +dracoLoader.setDecoderPath('./libs/draco/'); +dracoLoader.setDecoderConfig({ type: 'wasm' }); +gltfLoader.setDRACOLoader(dracoLoader); + +export { manager, gltfLoader, dracoLoader }; diff --git a/pages/about.tsx b/pages/about.tsx index b2d0e08..706ac82 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,23 +1,16 @@ import TWEEN from '@tweenjs/tween.js'; import classNames from 'classnames'; +import { gltfLoader, manager } from 'lib/gltfLoader'; import { getMousePosition } from 'lib/utils'; import { useTheme } from 'next-themes'; import dynamic from 'next/dynamic'; import { useEffect, useRef, useState } from 'react'; import { InitFn, THREE, useThree } from 'rua-three'; -import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; -import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; +import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'; import { NextPageWithLayout } from 'types'; const Loading = dynamic(() => import('components/RUA/loading/RUALoading')); -const manager = new THREE.LoadingManager(); -const glftLoader = new GLTFLoader(manager); -const dracoLoader = new DRACOLoader(); -dracoLoader.setDecoderPath('./libs/draco/'); -dracoLoader.setDecoderConfig({ type: 'wasm' }); -glftLoader.setDRACOLoader(dracoLoader); - const rotationY = 0.4; const rotationX = 0.2; @@ -163,7 +156,7 @@ const About: NextPageWithLayout = () => { }); }; - glftLoader.load('./models/cloud_station/modelDraco.gltf', handleLoad); + gltfLoader.load('./models/cloud_station/modelDraco.gltf', handleLoad); }; const { ref } = useThree({ diff --git a/pages/index.tsx b/pages/index.tsx index f47d26d..17658eb 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,5 @@ import cn from 'classnames'; +import { gltfLoader, manager } from 'lib/gltfLoader'; import { getMousePosition } from 'lib/utils'; import dynamic from 'next/dynamic'; import Image from 'next/future/image'; @@ -6,20 +7,12 @@ import Head from 'next/head'; import { useCallback, useEffect, useRef, useState } from 'react'; import { InitFn, THREE, useThree } from 'rua-three'; import styles from 'styles/index/index.module.css'; -import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; -import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; +import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'; import type { NextPageWithLayout } from 'types'; const MainLayout = dynamic(() => import('layouts/MainLayout')); const Loading = dynamic(() => import('components/RUA/loading/RUALoading')); -const manager = new THREE.LoadingManager(); -const gltfLoader = new GLTFLoader(manager); -const dracoLoader = new DRACOLoader(); -dracoLoader.setDecoderPath('./libs/draco/'); -dracoLoader.setDecoderConfig({ type: 'wasm' }); -gltfLoader.setDRACOLoader(dracoLoader); - const rotationY = 0.4; const rotationX = 0.18;