在微信小游戏里用threejs

在这里插入图片描述

如何基础调用:

three.js官网地址threejs.org。去download下载回来three.min.js,我们就可以开工了。
我们先建一个标准的微信游戏项目,做好基本的配置。在我们游戏的主文件中:
import * as THREE from ‘./libs/three.min’
这样即可以在我们的项目中引用THREE;
代理weapp-adapter,可以用github这个,地址是https://github.com/finscn/weapp-adapter;

	//实例化场景容器
	this.scene =  new THREE.Scene();
	//摄像机
	this.camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
	this.camera.position.set( 30, 30, 100 );
    // 渲染器
    this.renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });
	//设定宽高以及分辩率;
	this.renderer.setSize(window.innerWidth, window.innerHeight);
	this.renderer.setPixelRatio( window.devicePixelRatio );

以上是基础的调用代码,建立好这些就能进行模型渲染显示;

webgl基础知识:
微信小游戏和以前的网页的h5有什么样的区别呢,在渲染方式有所变化。微信出于安全考虑重新设计了微信小游戏的渲染环境,它已经不是以前的DOM的调用,在微信小游戏里你需要调用的是微信自己的canvas。

以下是threejs官网在平时实例化渲染器的代码:

renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );

现在在微信小游戏里我们的实例化:

this.renderer = new THREE.WebGLRenderer({canvas: canvas,antialias: true});

其中的canvas就是微信的canvas了;

shader的写法:
shader最主要是两样的东西,顶点着色器vertexshader,片元着色器fragmentshader;
在以往网页中的vertexshader常规写是:

<script type="x-shader/x-vertex" id='vertexShader'>
	void main()
	{
		vec4 modelViewPosition = modelViewMatrix * vec4(position,1.0);
		gl_Position = projectionMatrix * modelViewPosition;
	}
</script>

fragmentshader:

<script type="x-shader/x-fragment" id="fragmentShader">
void main()
{
    gl_FragColor = vect(1.0,0.0,0.0,1.0);
}
而在微信小游戏中,你是不能再用dom,自然以上的写法不能用了,你可以以下这种写法:
vertexShader: [
		'void main() {',
		'	vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );',
		'	gl_Position = projectionMatrix * mvPosition;',

		'}'
	].join( '\n' ),
fragmentShader: [
       'void main() {',
        ‘gl_FragColor = vect(1.0,0.0,0.0,1.0);’,
        '}',
        ].join('\n')

关于第三方类的使用:
微信小游戏基本是一个ES6的环境,你看官方飞机实例可以看出来。用了大量的import/class…;
同样你也可以用以前ES5标准的类,即prototype扩展写出来的类;
用require(‘xxxx’)这种方式引用即可;
同时你的老的类如果也用到了three.js也可以用require(’./three.min’)来调threejs;
这样能够友好的处理好新老结合兼容;

源代码地址:
https://download.youkuaiyun.com/download/needspeedboy2017/10791576
——————————
html5游戏开发QQ群 639636145

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火炎神2018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值