微信小游戏开发之四:使用three.js引擎
2018-01-02 11:56
951 查看
一、前言
微信小游戏中最魔性的‘跳一跳’就是基于three.js 引擎开发的源码放到github上了:GitHub地址 请自行下载。
二、下载
three.min.js 打开页面,复制代码到本地三、引用
使用如下方式在小游戏中引用threelet 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()
五、效果
相关文章推荐
- 微信小游戏开发之五:为three.js添加物理引擎Physijs
- 在微信小游戏中使用three.js显示3D图形
- 利用 three.js 开发微信小游戏的尝试
- 微信企业号开发(八) -jssdk的使用(调用微信拍照)
- VR开发 入门 使用Three.js 开发的WebVR demo
- Three.js开发指南---使用three.js里的各种光源
- Node.js开发入门(六)——使用jade模板引擎
- Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序。。
- 01 使用three.js开发全景漫游 新的开始
- 深入理解使用白鹭引擎开发微信小游戏的构建机制
- linaCharts开发笔记:Three.js导入obj和使用中文
- 深入理解使用白鹭引擎开发微信小游戏的构建机制
- 在javascriptl中使用表格模板引擎template.js简化开发
- 白鹭引擎开发微信小游戏进阶教程文档
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- 使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
- KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库
- 使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架
- 微信小游戏开发之三:实现小游戏的简易引擎