微信小程序&three.js之自轉的地球

最近有客戶需求在小程序裏面搞一個自轉的地球，之前看過Three.js在微信小程序的支持方案;https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13

copy+paste了一個入門級的：

看下效果吧！

主要的實現：

//index.js
//獲取應用實例
const app = getApp()
import * as THREE from '../../libs/three.weapp.min.js'
import { OrbitControls } from '../../jsm/loaders/OrbitControls'

Page({
  data: {},
  onReady: function(){ 
  },
  onLoad: function () {
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        var canvas = res[0].node;
        canvas = THREE.global.registerCanvas(canvas);
        this.setData({ canvasId: canvas._canvasId })
        var windowHeight = wx.getSystemInfoSync().windowHeight
        var windowWidth = wx.getSystemInfoSync().windowWidth
        
        //init scene.
        const scene = new THREE.Scene();
        const scene1 = new THREE.Scene();
        const scene2 = new THREE.Scene();
        const scene3 = new THREE.Scene();
        // scene.background = new THREE.Color(0xAAAAAA);

        //initCarema.
        const fov = 45;
        const aspect = canvas.width / canvas.height ;  // the canvas default
        const near = 0.1;
        const far = 100;
        //const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

        const camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 1, 1000);
        camera.position.set(0, 0, 500);
        camera.up.set(0, 1, 0)
        camera.lookAt({ x: 0, y: 0, z: 0 }) 

        // //init render.
        const renderer = new THREE.WebGLRenderer({ antialias: true, autoClear:false });

        const controls = new OrbitControls(camera, renderer.domElement);
        // controls.enableDamping = true;
        // controls.dampingFactor = 0.25;
        // controls.enableZoom = false;
        camera.position.set(200, 200, 200);
        controls.update();

        //init light.
        const light = new THREE.DirectionalLight(0xffffff, 1)
        light.position.set(50, 50, 10)
        scene.add(light)  
        renderer.render(scene, camera);

        //地球 

        var earth_geometry = new THREE.SphereGeometry(50, 50, 55);
        console.log(earth_geometry);
        const texture = new THREE.TextureLoader().load('../../image/earth4.jpg');
        const earth_material = new THREE.MeshBasicMaterial({ map: texture });

        // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });
        // const mesh = new THREE.Mesh(earth_geometry, material);

        // var earth_geometry = new THREE.SphereGeometry(100, 50, 50);
        // var earth_material = new THREE.MeshPhongMaterial({
        //   color: 0xffff00,
        //   map: new THREE.TextureLoader().load('../../image/earth4.jpg'),
        //   side: THREE.DoubleSide
        // });
        const earth = new THREE.Mesh(earth_geometry, earth_material);
        earth.position.set(0, 0, 0);
        earth.rotation.x = 0.42;
        earth.rotation.y = 60;
        scene.add(earth);
        console.log(earth);

        //init modules.
        /* 宇宙背景 */


        var yz_geometry = new THREE.SphereGeometry(500, 500, 50);
        var yz_material = new THREE.MeshPhongMaterial({
          map: new THREE.TextureLoader().load('../../image/negy.jpg'),
          side: THREE.DoubleSide
        });
        const xkbg = new THREE.Mesh(yz_geometry, yz_material);
        xkbg.position.set(0, 0, 0);
        scene1.add(xkbg);
        renderer.render(scene1, camera);
        

        function render() {
          canvas.requestAnimationFrame(render);
          // earth.rotation.x += 0.02;
          earth.rotation.y -= 0.005;
          controls.update();
          renderer.render(scene, camera);
        }

        render()

        //renderer.render(scene, camera);
        //雲層 
        var cloud_geometry = new THREE.SphereGeometry(101, 50, 50);
        var cloud_material = new THREE.MeshPhongMaterial({
          map: new THREE.ImageUtils.loadTexture('../../image/earth_cloud.png'),
          transparent: true,
          opacity: .8
        });
        const cloud = new THREE.Mesh(cloud_geometry, cloud_material);
        cloud.position.set(0, 0, 0);
        earth.add(cloud);
        //雲層2 
        var cloud2_geometry = new THREE.SphereGeometry(102, 50, 50);
        var cloud2_material = new THREE.MeshPhongMaterial({
          map: new THREE.ImageUtils.loadTexture('../../image/earth_cloud.png'),
          transparent: true,
          opacity: .8
        });
        const cloud2 = new THREE.Mesh(cloud2_geometry, cloud2_material);
        cloud2.position.set(0, 0, 0);
        cloud2.rotation.y = 10;
        earth.add(cloud2); 

        console.log(1);
        
        //zizhuan .
        function zizhuan() {
          console.log("zizhuan");
          console.log(earth);
          var isMove = true;
          if (isMove) {
            //canvas.requestAnimationFrame(zizhuan);
            earth.rotation.y -= 0.0005;
            //renderer.render(scene, camera);
          }
          //xkbg.rotation.y -= 0.0005;
        }
        // this.setData({ earth })
        this.setData({
          canvas
        })
        //zizhuan();
        console.log(2);
        //renderer.render(scene, camera);
        console.log(3);

      })
  },

  //zizhuan .
  zizhuan: function (earth, xkbg) {
    var _this = this;
    var canvas = this.data.canvas
    console.log("zizhuan");
    // var earth = this.data.earth;
    // var xkbg = this.data.xkbg;
    var isMove = true;
    if(isMove) {
      //canvas.requestAnimationFrame(_this.zizhuan);
      earth.rotation.y -= 0.0005;
      //renderer.render(scene, camera);
    }
          xkbg.rotation.y -= 0.0005;
  },

  onUnload: function () {
    THREE.global.unregisterCanvas(this.data.canvasId)
  },

})

接微信小程序私活15110133359微信同號，請註明來意，北京一線開發人員團隊，注：定製化開發，故價錢略高，請知悉。