question Block init

src/App.css

@@ -12,7 +12,7 @@ body,
 }
 
 body {
-  background: lightblue;
+  /* background: lightblue; */
 }
 
 

src/page/index.js

@@ -9,4 +9,6 @@ export * as kaijiPubUpgrade from './kaijiPubUpgrade'
 
 export * as Multiplay from './multiplay'
 
-export * as Theatre from './theatre'
+export * as Theatre from './theatre'
+
+export * as QuestionBlock from './questionBlock'

src/page/questionBlock.js

@@ -0,0 +1,69 @@
+import * as THREE from 'three'
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
+
+import { useEffect } from 'react'
+
+import { OrbitControls, useGLTF, } from '@react-three/drei'
+
+import GLTFLoader from '../util/gltfLoader'
+
+
+
+export default function App() {
+    return (
+        <Canvas camera={{ position: [5, 5, -5] }} gl={{ preserveDrawingBuffer: true }}>
+            <Scene />
+        </Canvas>
+    )
+}
+
+function Scene() {
+
+    useEffect(() => {
+
+    }, [])
+    return (
+        <>
+            <hemisphereLight intensity={0.45} />
+            <spotLight angle={0.4} penumbra={1} position={[20, 30, 2.5]} castShadow shadow-bias={-0.00001} />
+            <directionalLight color="red" position={[-10, -10, 0]} intensity={1.5} />
+            <OrbitControls />
+
+            <Model />
+        </>
+
+    )
+}
+
+
+
+
+
+
+function Model(props) {
+    const group = useRef()
+    // const { nodes, materials } = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/star/model.gltf')
+    // const { scene } = useThree()
+    const { scene } = useGLTF('QuestionBlock.glb')
+
+
+
+    function handleClick() {
+        console.log("clicked");
+    }
+
+    useEffect(() => {
+        // GLTFLoader('QuestionBlock.glb').then((glb) => {
+        //     glb.scale.set(0.1,0.1,0.1)
+        //     scene.add(glb)
+        // })
+    }, [])
+    return (
+        <group ref={group} {...props} dispose={null}>
+            <primitive onClick={handleClick} object={scene}/>
+        </group>
+    )
+}
+
+useGLTF.preload('QuestionBlock.glb')

src/page/theatre.js

@@ -10,8 +10,8 @@ import { useEffect } from 'react'
 
 // create-react-app
 if (process.env.NODE_ENV === 'development') {
-    studio.initialize()
-    studio.extend(extension)
+    // studio.initialize()
+    // studio.extend(extension)
 }
 // studio.initialize()
 // studio.extend(extension)

src/util/gltfLoader.js

@@ -0,0 +1,27 @@
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
+
+
+export default function Loader(path) {
+    const loader = new GLTFLoader().setDRACOLoader(new DRACOLoader().setDecoderPath("assets/wasm/"))
+        .setKTX2Loader(new KTX2Loader().setTranscoderPath("assets/wasm/"))
+        .setMeshoptDecoder(MeshoptDecoder);
+
+    return new Promise((resolve) => {
+        loader.load(path, (gltf) => {
+            // console.log(gltf)
+            const scene = gltf.scene || gltf.scenes[0];
+            if (!scene) {
+                throw new Error(
+                    "This model contains no scene, and cannot be viewed here. However," +
+                    " it may contain individual 3D resources."
+                );
+            }
+
+            resolve(scene);
+            // resolve(gltf);
+        });
+    });
+}