微信小游戏 with three.js

本文详细介绍如何使用腾讯小程序开发者账号注册并开发小游戏,包括选择服务类目、调整文件结构、使用three.js进行3D渲染及解决纹理贴图问题,对比微信与Web开发的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

AppID

小程序开发者账号注册好之后,默认AppID只能用于开发小程序,不能用于开发小游戏。

要开发小游戏,需要登录公众平台,填写小程序信息,在“服务类目”中选择“游戏”。

但这样一来,该AppID又只能开发小游戏了。

为什么要有这种设计,可能腾讯爸爸觉得小程序、小游戏的开发者应该是两种完全不同的人吧。

文件结构

用腾讯官方的小程序开发工具,新建一个小游戏项目,把里边东西全删掉,只保留如下内容:

| miniprogram

| -- | images (内容删掉,文件夹留着放自己的图片)

| -- | js

| -- | -- | libs

| -- | -- | -- | symbols.js、weapp-adapter.js

| game.js

| game.json

使用three.js

下载到three.js或者three.min.js,放到js/libs文件夹下。

three.js或和three.min.js功能相同,其中three.min.js体积比较小。

然后使用let THREE = require('./js/libs/three.js');就可以引用three.js了。

纹理贴图

做纹理贴图的时候,会报错createElementNS is not defined,解决方法如下:

在weapp-adapter.js里,搜索createElement,在同样的位置加上以下方法:

createElementNS: function createElementNS(nameSpace, tagName) {
      return this.createElement(tagName)
},

与web开发的不同

微信的适配

import './js/libs/weapp-adapter'
import './js/libs/symbol'

canvas

微信自带canvas,下面这句不需要。

var canvas = document.body.appendChild( renderer.domElement );

相应的,web开发对canvas的一些操作在这里用不了,微信作了限制。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值