一、前言

微信小游戏中最魔性的‘跳一跳’就是基于three.js 引擎开发的

源码放到github上了:GitHub地址   请自行下载。

二、下载

three.min.js 打开页面,复制代码到本地

三、引用

使用如下方式在小游戏中引用three

  1. 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引擎的更多相关文章

  1. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  2. 微信小游戏开发Canvas资源汇总

    Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...

  3. 一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目

    尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret ...

  4. 三、微信小游戏开发 --- 小游戏API调用Platform

    微信小游戏API Platform主要是Egret用于来调用平台的SDK的. 在Egret中使用接口定义Platform. Egret项目中默认的platform值是DebugPlatform. 发布 ...

  5. 二、微信小游戏开发 多线程Worker

    微信多线程Worker教程 微信多线程Worker API 一.创建Worker,并和当前线程通讯 多线程worker只能创建1个.能和当前线程互传数据. 创建worker 在微信开发者工具中,在当前 ...

  6. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  7. 微信小程序开发的游戏《拼图游戏》

    微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({ /** * 页面的初始数据 */ data: { }, initGame: ...

  8. 使用Laya引擎开发微信小游戏(下)

    本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{ ex ...

  9. 使用Laya引擎开发微信小游戏(上)

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

随机推荐

  1. python函数参数是值传递还是引用传递(以及变量间复制后是否保持一致):取决于对象内容可变不可变

    函数参数传递本质上和变量整体复制一样,只是两个变量分别为形参a和实参b.那么,a=b后,a变了,b值是否跟着变呢?这取决于对象内容可变不可变 首先解释一下,什么是python对象的内容可变不可变? p ...

  2. shell的字符串和数字的转化(数字自动做字符串处理,变量名做字符串输出用单引号)

    shell里面怎么样把字符串转换为数字? 例如:a="024" 1,用${{a}} 2,用let达到(()) 运算效果. let num=0123; echo $num; 83 3 ...

  3. Android listView异步下载和convertView复用产生的错位问题

    1:Item图片显示重复 这个显示重复是指当前行Item显示了之前某行Item的图片. 比如ListView滑动到第2行会异步加载某个图片,但是加载很慢,加载过程中ListView已经滑动到了第14行 ...

  4. 《java入门第一季》之面向对象面试题(继承中构造方法的关系)

    /* 继承中构造方法的关系 A:子类中所有(子类的有参和无参)的构造方法(默认都会访问父类)中(空参数)的构造方法,默认访问父类空参数构造,不默认访问有参数构造 B:为什么呢? 因为子类会继承父类中的 ...

  5. 学习C++模板,类模板

    当我们使用向量时,会经常使用形如:vector<int> a的式子.这个表达式就是一个类模板实例化的例子,vector是一个类模板,我们给他传递模板参数(见<>里),然后创建一 ...

  6. linux服务搭建----NFS服务搭建

    nfs  服务     //配置脚本         /etc/exports     //服务器  发布目录     1> 确定需要发布的目录(想要共享的目录)     例如:      想发 ...

  7. C语言之linux内核实现位数高低位互换

    linux内核实在是博大精深,有很多优秀的算法,我之前在工作中就遇到过位数高低位交换的问题,那时候对于C语言还不是很熟练,想了很久才写出来.最近在看内核的时候看到有内核的工程师实现了这样的算法,和我之 ...

  8. javascript函数式编程一例分析

    js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程 ...

  9. 恶补web之五:dhtml学习

    dhtml是一种使html页面具有动态特性的艺术.对于多数人来说dhtml意味着html(html DOM),样式表和javascript的组合. dhtml不是w3c标准.dhtml指动态html, ...

  10. asp.net 调试与iis部署的问题

    第一个问题:编译器错误信息: CS0016: 未能写入输出文件"c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET ...