如何基礎調用:
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.csdn.net/download/needspeedboy2017/10791576