微信小游戏中如何用three.js绘制2D平面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YIDBoy/article/details/80143576

微信小游戏中如何用three.js绘制2D平面

上一篇文章已经介绍了如何在用three.js开发小游戏，并且简单的写了一些绘制平面的例子，本篇文章将具体的介绍下，如何在3D场景下绘制2D平面

一：绘制整体布局

实例化相机

GameGlobal是小游戏的一个全局变量

    let aspect = GameGlobal.innerWidth / GameGlobal.innerHeight
    let d = 20
    this.camera = new THREE.OrthographicCamera(
      -d * aspect,
      d * aspect,
      d,
      -d,
      -100,
      1000
    )
    this.camera.position.x = 2
    this.camera.position.y = 2
    this.camera.position.z = 2
    this.camera.lookAt(new THREE.Vector3(0, 0, 0))

实例化场景

    this.scene = new THREE.Scene()
    // 以下是辅助线
    var gridHelper = new THREE.GridHelper(50, 50, 0x808080, 0x808080)
    this.scene.add(gridHelper)
    this.scene.add(new THREE.AxesHelper(10))

实例化灯光

    this.light = new THREE.DirectionalLight("0xffffff")
    this.light.position.set(20, 10, 5)
    this.scene.add(this.light)

渲染

   const ctx = canvas.getContext("webgl")
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true,
      alpha: true
    })
    this.renderer.setSize(GameGlobal.innerWidth, GameGlobal.innerHeight)
    this.renderer.setClearColor("#eee", 1)
    this.renderer.render(this.scene, this.camera)

这样我们就将整体布局场景给绘制出来了：

绘制模块

    let geometry = new THREE.BoxGeometry(10, 10, 10)
    var material = new THREE.MeshLambertMaterial({ ambient: "#cecece" })
    this.startCube = new THREE.Mesh(geometry, material)
    this.startCube.position.set(0, 0, 0)
    this.scene.add(this.startCube)

在我们已绘制好的场景中，再将模块绘制出来，这样就更能体现3D效果了，就这样，我们完成了3D场景的初步绘制：

接下来开始绘制我们的2D平面

二：采用精灵材质（canvas作为纹理）绘制平面图形

    let offCanvas = wx.createCanvas()
    offCanvas.width = GameGlobal.innerWidth
    offCanvas.height = GameGlobal.innerHeight
    let ctx = offCanvas.getContext("2d")

    // 阴影背景
    ctx.fillStyle = "rgba(0,0,0, 0.5)"
    ctx.fillRect(0, 0, GameGlobal.innerWidth, GameGlobal.innerHeight)

    ctx.fillStyle = "#fff"
    ctx.font = "bold 40px Arial"
    ctx.textAlign = "center"
    ctx.fillText("我是蚂蚁", GameGlobal.innerWidth / 2, 200)

    ctx.fillStyle = "#fff"
    ctx.font = "bold 20px Arial"
    ctx.textAlign = "center"
    ctx.fillText("开始游戏", GameGlobal.innerWidth / 2, 500)

    let texture = new THREE.Texture(offCanvas)
    texture.needsUpdate = true

    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture
    })
    let sprite = new THREE.Sprite(spriteMaterial)
    sprite.position.set(12, 12, 12)
    sprite.scale.set(23, 40, 1)
    this.scene.add(sprite)

下图就是我们看到的最终效果了，这里canvas能绘制的东西基本都可以:

三：采用其他材质绘制平面图形,如THREE.PlaneGeometry

    var geometry = new THREE.PlaneGeometry(10, 10)
    var material = new THREE.MeshBasicMaterial({
      color: 'red'
    })
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(10, 2, 10)
    this.scene.add(plane);

这里绘制一个红色的平面，但是它初始化的时候是对着相机的，所以这里我们需要转下它的角度：

plane.rotation.y = 45 * Math.PI / 180;

这样我们就得到一个平面了，接着创建一个离屏的canvas,绘制所需要的图形，将它当成material的纹理嵌进去就好了。

代码我上传到我新的github账号上：https://github.com/YDMua/smallGame