在微信小游戏里用 three.js - 文章教程

在微信小游戏里用 three.js

发布于 2021-10-02 字数 3087 浏览 990 评论 0

在微信小游戏里用 three.js

如何基础调用

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,这样能够友好的处理好新老结合兼容。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

泛泛之交

这个人比较懒,什么都没有填写!

20 文章
3 评论
21163 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0