年前，微信发布了一个重磅消息：微信小程序的小游戏功能，千呼万唤始出来！

笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js制作的，所以我就选择了three.js。那么开始吧。

微信小游戏教程地址：教程小游戏

开发环境搭建

下载了最新的微信开发工具，并按照教程建立了示例项目。示例游戏是2D游戏，和我期望的有点距离，找遍网络没有一个3D的微信小游戏示例，看来只能自己试试了。

新建了一个小程序项目，并且按照教程添加了game.js 和game.json，但是程序一直报错：

后来发现是调试基础库没有默认为“game”,按照截图操作之后就正常了：

引入three.js

到github下载three.js最新版本，笔者当时下载的是r89，用最新的应该也没有问题。前文介绍过，笔者并没有开发小程序的经验，所以一上来就在game.js里直接引用three.js：

import './js/libs/weapp-adapter.js'
import './js/libs/symbol.js'
import './js/three/three.js'var scene = new THREE.Scene();

程序直接报错：

耐心看了小程序开发的说明，再看了three.js的写法，重新修改引用方式，game.js:

import './js/libs/weapp-adapter.js'
import './js/libs/symbol.js'var THREE = require('./js/three/three.js');
var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var context = canvas.getContext('webgl');
var renderer = new THREE.WebGLRenderer(context);renderer.setSize(window.innerWidth, window.innerHeight);canvas.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function render() {requestAnimationFrame(render);cube.rotation.x += 0.1;cube.rotation.y += 0.1;renderer.render(scene, camera);
}
render();

一个旋转的立方体就在开发环境下显示出来了！

到目前为止，一切算是比较顺利，于是马上使用预览功能上传到手机微信进行测试：

这个时候发生问题了：手机微信看不到我的立方体？！

还好微信环境下有提供console，笔者通过记录日志，最终定位了错误：

原来是three.js里面有一段代码：

是判断当前环境WebGL版本的，而微信环境下是opengl es3.2，使用这句正则表达式明显不能匹配到。我们稍微改一下：

    var version = parseFloat( /^(WebGL|OpenGL ES)\ ([0-9])/.exec( gl.getParameter( gl.VERSION ) )[ 1 ] );

再次发布预览试试看！

成功！

网友eastecho 写了一篇文章，更加详细的阐述了这方面的内容：https://indienova.com/indie-game-development/run-threejs-on-wechat-game-platform/

在微信小游戏中使用three.js显示3D图形相关推荐

解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题参考文章: (1)解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题 (2)https:// ...
在微信小游戏中实现语音互动
之前在unity里尝试用过语音控制,当时的想法是实时控制游戏角色的移动与攻击,这在通过在线api解析语义的方式下体验一般,不过也想到在实时性要求不那么高的互动场景应该可以用起来.这里就在微信小游戏中尝 ...
h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
在微信小游戏中开发一个贪食蛇
为什么80%的码农都做不了架构师?>>> 我自己也写过一个贪食蛇的小游戏,不过是对dom的操作,微信小游戏是采用js语法基于canvas的开发.为了省事在网上直接搜了一个基于c ...
egret引擎中使用tiled运行在微信小游戏中
egret的官方文档,对tiled的介绍不是很细致,很多东西都需要摸索.现在把踩的坑记录下来.作为一个备忘引用tiledmap的库在GitHub上下载egret的tiledmap支持库:https ...
微信3D小游戏系列一：在微信小游戏中使用threejs
文章目录环境配置下载开发者工具目录结构引入Three.js 在小程序中运行 threejs 目标效果小程序代码环境配置下载开发者工具下载地址: https://developers.w ...
threejs 微信小游戏中的离屏渲染做UI和排行榜
微信小游戏对threejs真的是一次桎酷啊...呵呵. 规定不能用html锁死了我们之前两个html标签的可能了... 不过微信还是允许了大家的离屏渲染,要不是我们在跳一跳之类的游戏中也看不到排行榜和 ...
Cocos Creator开发技术研究：微信小游戏中音效中断问题处理
转载自麒麟子博客:https://qilinzi.blog.csdn.net/article/details/89488323 音效可谓是一个小游戏的灵魂了. 某些玩法离开了音效更是不可能,比如别踩白 ...

在微信小游戏中使用three.js显示3D图形

开发环境搭建

引入three.js

成功！

在微信小游戏中使用three.js显示3D图形相关推荐

最新文章

热门文章