Move implement to upper place

README.md

@@ -1,2 +1 @@
-# DoricThree
-1. 将细节API暴露到上层
+# DoricThree

example/src/Example.tsx

@@ -7,24 +7,96 @@ import {
   Image,
   VLayout,
   jsx,
+  GestureContainer,
+  createRef,
+  modal,
 } from "doric";
-import { GLTFView } from "doric-three";
+import THREE from "three";
+import { OrbitControls, ThreeView, loadGLTF } from "doric-three";
+import { vsync } from "dangle";
 
 @Entry
 class Example extends Panel {
   onShow() {
     navbar(context).setTitle("GLTF");
   }
   build(root: Group) {
+    const ref = createRef<GestureContainer>();
     <VLayout parent={root} layoutConfig={layoutConfig().most()}>
       <Image image={new AssetsResource("logo_doric.png")} />
-      <GLTFView
-        res={new AssetsResource("threejs/LittlestTokyo/LittlestTokyo.gltf")}
-        layoutConfig={layoutConfig().just()}
-        width={300}
-        height={300}
-        context={this.context}
-      />
+      <GestureContainer ref={ref}>
+        <ThreeView
+          layoutConfig={layoutConfig().just()}
+          width={300}
+          height={300}
+          gestureRef={ref}
+          onInited={async (renderer) => {
+            const scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xbfe3dd);
+            const camera = new THREE.PerspectiveCamera(
+              40,
+              renderer.domElement.width / renderer.domElement.height,
+              1,
+              100
+            );
+            camera.position.set(5, 2, 8);
+            {
+              const skyColor = 0xffffff;
+              const groundColor = 0xffffff; // brownish orange
+              const intensity = 1;
+              const light = new THREE.HemisphereLight(
+                skyColor,
+                groundColor,
+                intensity
+              );
+              scene.add(light);
+            }
+            {
+              const color = 0xffffff;
+              const intensity = 1.5;
+              const light = new THREE.DirectionalLight(color, intensity);
+              light.position.set(5, 10, 2);
+              scene.add(light);
+            }
+
+            const controls = new OrbitControls(
+              camera,
+              renderer.domElement
+            ) as any;
+            controls.target.set(0, 0.5, 0);
+            controls.update();
+            controls.enablePan = false;
+            controls.enableDamping = true;
+            const requestAnimationFrame = vsync(
+              this.context
+            ).requestAnimationFrame;
+            try {
+              const gltf = await loadGLTF(
+                this.context,
+                new AssetsResource("threejs/LittlestTokyo/LittlestTokyo.gltf")
+              );
+              let mixer: THREE.AnimationMixer;
+              const clock = new THREE.Clock();
+              function animate() {
+                requestAnimationFrame(animate);
+                const delta = clock.getDelta();
+                mixer.update(delta);
+                controls.update();
+                renderer.render(scene, camera);
+              }
+              const model = gltf.scene;
+              model.position.set(1, 1, 0);
+              model.scale.set(0.01, 0.01, 0.01);
+              scene.add(model);
+              mixer = new THREE.AnimationMixer(model);
+              mixer.clipAction(gltf.animations[0]).play();
+              animate();
+            } catch (error) {
+              modal(this.context).alert(`${error}`);
+            }
+          }}
+        />
+      </GestureContainer>
     </VLayout>;
   }
 }

index.ts

@@ -1,2 +1,3 @@
 export * from "./lib/ThreeView";
-export * from "./lib/GLTFView";
+export * from "./lib/controls/OrbitControls";
+export * from "./lib/loaders/GLTFLoader";

lib/ThreeView.ts

@@ -8,7 +8,7 @@ export class ThreeView extends DangleView {
   onInited?: (renderer: THREE.WebGLRenderer) => void;
   touchable = true;
   gl?: DangleWebGLRenderingContext;
-
+  gestureRef?: Ref<GestureContainer>;
   isDirty() {
     this.gl?.endFrame();
     return super.isDirty();
@@ -21,6 +21,9 @@ export class ThreeView extends DangleView {
   constructor() {
     super();
     this.onReady = (gl: DangleWebGLRenderingContext) => {
+      if (this.gestureRef && this.gestureRef.current) {
+        this.gesture = this.gestureRef.current;
+      }
       this.gl = gl;
       const width = gl.drawingBufferWidth;
       const height = gl.drawingBufferHeight;
@@ -94,7 +97,4 @@ export class ThreeView extends DangleView {
       }
     };
   }
-  set gestureRef(ref: Ref<GestureContainer>) {
-    this.gesture = ref.current;
-  }
 }

lib/loaders/GLTFLoader.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Resource } from "doric";
+import { Resource, BridgeContext } from "doric";
 import {
   AnimationClip,
   Bone,
@@ -74,6 +74,23 @@ export type GLTF = {
   parser: GLTFParser;
   userData: {};
 };
+
+export async function loadGLTF(context: BridgeContext, resource: Resource) {
+  const loader = new GLTFLoader(context);
+  return new Promise<GLTF>((resolve, reject) => {
+    loader.load(
+      resource,
+      (gltf) => {
+        resolve(gltf);
+      },
+      undefined,
+      (e) => {
+        reject(e);
+      }
+    );
+  });
+}
+
 export class GLTFLoader extends Loader {
   doricContext: BridgeContext;
   constructor(doricContext: BridgeContext, manager?: LoadingManager) {