微信小程序实现3D地球仪

erath3d.png

采用three.js
参考：https://www.cnblogs.com/xuejiangjun/p/11815650.html
http://www.myjscode.com/page/article21.html
以下是我的代码

import * as THREE from '../../libs/three.weapp.js' import {OrbitControls} from '../../jsm/controls/OrbitControls' Page({ data: { canvasId: null, }, onLoad: function () { wx.createSelectorQuery() .select('#c') .node() .exec((res) => { let canvasId = res[0].node._canvasId const canvas = THREE.global.registerCanvas(canvasId, res[0].node) this.setData({canvasId}) const camera = new THREE.PerspectiveCamera(90, canvas.width / canvas.height, 1, 1000); camera.position.z = 500; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); const renderer = new THREE.WebGLRenderer({antialias: true}); //真机抗锯齿 wx.getSystemInfo({ success: (res) => { renderer.setPixelRatio(res.pixelRatio) } }); const cOntrols= new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; camera.position.set(200, 200, 500); controls.autoRotate = true controls.update(); const geometry = new THREE.SphereGeometry(200, 200, 200); //图片宽高必须是2的次方 const texture = new THREE.TextureLoader().load('./earth1.png'); const material = new THREE.MeshBasicMaterial({map: texture}); // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const mesh = new THREE.Mesh(geometry, material); // this.setData({mesh}) scene.add(mesh); // renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // renderer.setSize(canvas.width, canvas.height); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); // mesh.rotation.x += 0.005; // mesh.rotation.y += 0.01; controls.update(); renderer.render(scene, camera); } render() }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) }, touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) }, touchCancel(e) { // console.log('canvas', e) }, longTap(e) { // console.log('canvas', e) }, tap(e) { // console.log('canvas', e) }, documentTouchStart(e) { // console.log('document',e) }, documentTouchMove(e) { // console.log('document',e) }, documentTouchEnd(e) { // console.log('document',e) }, })