微信小程序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().windowHeightvar 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 defaultconst 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.canvasconsole.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微信同号，请注明来意，北京一线开发人员团队，注：定制化开发，故价钱略高，请知悉。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！