lint fix & touch event support with demo (#20)

Author: ttzztztz

example/app.json

@@ -1,12 +1,12 @@
-{
-  "pages": [
-    "index/index"
-  ],
-  "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle": "black"
-  },
-  "sitemapLocation": "sitemap.json"
+{
+  "pages": [
+    "index/index"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json"
 }

example/app.wxss

@@ -0,0 +1,17 @@
+/**app.wxss**/
+page {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

example/index/index.js

@@ -16,6 +16,7 @@ Page({
       .node()
       .exec((res) => {
         const canvas = res[0].node
+        this.canvas = canvas
         const THREE = createScopedThreejs(canvas)
 
         // renderSphere(canvas, THREE)
@@ -24,4 +25,13 @@ Page({
         renderModel(canvas, THREE)
       })
   },
+  touchStart(e) {
+    this.canvas.dispatchTouchEvent({...e, type:'touchstart'})
+  },
+  touchMove(e) {
+    this.canvas.dispatchTouchEvent({...e, type:'touchmove'})
+  },
+  touchEnd(e) {
+    this.canvas.dispatchTouchEvent({...e, type:'touchend'})
+  }
 })

example/index/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "disableScroll": true
 }

example/index/index.wxml

@@ -3,6 +3,9 @@
   type="webgl"
   id="webgl"
   style="width: 100%; height: 450px;"
+  bindtouchstart="touchStart"
+  bindtouchmove="touchMove"
+  bindtouchend="touchEnd"
 ></canvas>
 <canvas
   type="webgl"

example/index/index.wxss

@@ -1,4 +1,4 @@
-.intro {
-  margin: 30px;
-  text-align: center;
+.intro {
+  margin: 30px;
+  text-align: center;
 }

example/miniprogram_npm/threejs-miniprogram/index.js

@@ -1,10 +1,11 @@
 import { registerGLTFLoader } from '../loaders/gltf-loader'
+import registerOrbit from "./orbit"
 
 export function renderModel(canvas, THREE) {
   registerGLTFLoader(THREE)
 
   var container, stats, clock, gui, mixer, actions, activeAction, previousAction;
-  var camera, scene, renderer, model, face;
+  var camera, scene, renderer, model, face, controls;
   var api = { state: 'Walking' };
   init();
   animate();
@@ -45,6 +46,12 @@ export function renderModel(canvas, THREE) {
     renderer.setSize(canvas.width, canvas.height);
     renderer.gammaOutput = true;
     renderer.gammaFactor = 2.2;
+
+    const { OrbitControls } = registerOrbit(THREE)
+    controls = new OrbitControls( camera, renderer.domElement );
+
+    camera.position.set( 5, 5, 10 );
+    controls.update();
   }
 
   function createGUI(model, animations) {
@@ -81,11 +88,11 @@ export function renderModel(canvas, THREE) {
       .fadeIn(duration)
       .play();
   }
-
   function animate() {
     var dt = clock.getDelta();
     if (mixer) mixer.update(dt);
     canvas.requestAnimationFrame(animate);
+    controls.update()
     renderer.render(scene, camera);
   }
 }