在微信小程序中使用Three.js的尝试

 

在indienova上看到大佬发了这样的文章，于是学着也用了一下，结论是可以的。

因为懒，所以在WebGL中文网拷了一份代码下来。（这个网站学three.js还真的是挺好的，有条件的朋友可以过去买几节课，支持一下。）

 

好了，我们现在来开始：

1.首先你要注册，并创建一个小程序，要注意，类型要是游戏类型的，因为只有这个类型才有暴露出来的canvas

2.打开刚刚下的微信开发者工具，进入小游戏的开发，创建一个模板，简单的就行，不用那个云游戏的（或许可以，没有试过）。

3.删减掉其他部分，只剩下这样的。

    three.js是自己加上去的，你可以从github上面下一份。

 

4.我们大部分的代码都会在main.js里面写。

5    这句就是使用了微信的canvas。

let ctx = canvas.getContext('webgl')  

import * as THREE from 'three.js'

let ctx = canvas.getContext('webgl')  

let scene
let renderer
let camera

let scaledWidth
let scaledHeight

let cube

export default class Main {
  constructor() {
    this.threeStart()
  }

  threeStart() {
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer({ context: ctx });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.CubeGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material); scene.add(cube);
    camera.position.z = 5;
    function render() {
      requestAnimationFrame(render);
      cube.rotation.x += 0.1;
      cube.rotation.y += 0.1;
      renderer.render(scene, camera);
    }
    render();
  }
  
}

 

6.我在这里编译的时候出错了，于是按照indienova的文章所写，改写了weapp-adapter.js

    在document 的定义中添加 createElementNS

createElementNS: function createElementNS(nameSpace, tagName) {
  return this.createElement(tagName)
}

7.到这里应该就可以了