微信小游戏开发之四:使用three.js引擎
一、前言
微信小游戏中最魔性的‘跳一跳’就是基于three.js 引擎开发的
源码放到github上了:GitHub地址 请自行下载。
二、下载
three.min.js 打开页面,复制代码到本地
三、引用
使用如下方式在小游戏中引用three
- let THREE = require('three.min.js的路径')
四、开始
创建3dgame.js文件
需要注意的是,在微信小游戏中并没有‘ImageBitmap’这个全局对象,所以在加载纹理贴图时会报错,此时需要修改源码
let THREE = require('./three/three') export default class Game3d {
constructor() {
// 场景
this.scene = new THREE.Scene();
// 透视摄像头
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// webGL渲染器
// 同时指定canvas为小游戏暴露出来的canvas
this.renderer = new THREE.WebGLRenderer({
canvas: canvas
});
this.start()
}
start() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
var geometry = new THREE.CubeGeometry(1, 1, 1);
// 加载纹理贴图
var texture = new THREE.TextureLoader().load("images/metal.jpg");
var material = new THREE.MeshBasicMaterial({ map: texture });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
// 设置camera的高度,若是低于当前场景的高度则屁也看不到
this.camera.position.z = 2.5;
this.cube.castShadow = true
console.log(this.cube)
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
update() {
this.cube.rotation.x += 0.02;
this.cube.rotation.y += 0.04;
this.cube.rotation.z += 0.06;
}
loop() {
this.update()
this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
}
在game.js中调用
import './js/libs/weapp-adapter'
import './js/libs/symbol' import Game3d from './3dgame' new Game3d()
五、效果
您可能感兴趣的
原文链接:https://blog.csdn.net/Register_man/article/details/78950187
微信小游戏开发之四:使用three.js引擎的更多相关文章
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- 微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...
- 一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目
尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret ...
- 三、微信小游戏开发 --- 小游戏API调用Platform
微信小游戏API Platform主要是Egret用于来调用平台的SDK的. 在Egret中使用接口定义Platform. Egret项目中默认的platform值是DebugPlatform. 发布 ...
- 二、微信小游戏开发 多线程Worker
微信多线程Worker教程 微信多线程Worker API 一.创建Worker,并和当前线程通讯 多线程worker只能创建1个.能和当前线程互传数据. 创建worker 在微信开发者工具中,在当前 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- 微信小程序开发的游戏《拼图游戏》
微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({ /** * 页面的初始数据 */ data: { }, initGame: ...
- 使用Laya引擎开发微信小游戏(下)
本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{ ex ...
- 使用Laya引擎开发微信小游戏(上)
本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...
随机推荐
- 【重构】 代码的坏味道总结 Bad Smell (一) (重复代码 | 过长函数 | 过大的类 | 过长参数列 | 发散式变化 | 霰弹式修改)
膜拜下 Martin Fowler 大神 , 开始学习 圣经 重构-改善既有代码设计 . 代码的坏味道就意味着需要重构, 对代码的坏味道了然于心是重构的比要前提; . 作者 : 万境绝尘 转载请注明出 ...
- [前端]Emmet 基本语法快查
Emmet 是一种快速写html的语法,通过几个简单的缩写,就可以拓展成html标签,工作中写html多多少少会有一些,使用的语法都是基础语法,这里总结下最常用的几个,备查. 这个插件支持非常多的ID ...
- JNI动态注册native方法及JNI数据使用
前言 或许你知道了jni的简单调用,其实不算什么百度谷歌一大把,虽然这些jni绝大多数情况下都不会让我们安卓工程师来弄,毕竟还是有点难,但是我们还是得打破砂锅知道为什么这样干吧,至少也让我们知道调用流 ...
- 一步操作关闭iOS状态栏(电池栏)
状态栏某时也蛮碍眼的: 将其关闭很简单:打开项目的info.plist文件,添加新的属性为NO的一行 View controller-based status bar appearance : 最后结 ...
- TCP连接建立系列 — 服务端发送SYNACK段
本文主要分析:服务器端如何构造和发送SYNACK段. 内核版本:3.6 Author:zhangskd @ csdn blog 发送入口 tcp_v4_send_synack()用于发送SYNACK段 ...
- How tomcat works 读书笔记十五 Digester库 下
在这一节里我们说说ContextConfig这个类. 这个类在很早的时候我们就已经使用了(之前那个叫SimpleContextConfig),但是在之前它干的事情都很简单,就是吧context里的co ...
- VT控制码
VT100 是一个终端类型定义,VT100 控制码是用来在终端扩展显示的代码.比如果终端上任意坐标用 不同的颜色显示字符. 所有的控制符是 \033 打头(即 ESC 的 ASCII 码)用输出字符语 ...
- Leetcode_278_First Bad Version
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49719255 You are a product mana ...
- CUDA跟OpenCV的混合编程,注意OpenCV需要重新编译
1.注意事项 编译的办法参见: http://blog.csdn.net/wangyaninglm/article/details/39997113 以下是程序代码,网上搜的例子: 注意事项:32 ...
- error C4996: 'strcpy': This function or variable may be unsafe.
vs2012用strcpy遇到的错误. 错误描述:error C4996: 'strcpy': This function or variable may be unsafe. Consider us ...