Three.js Wechat games of initial exploration

I've been playing drums recently Three.js Related knowledge, at the same time, I think wechat game is a good trial and error. Yes, this project exists for trial and error.

Let's take a picture of the scene,

Is this pattern familiar to you? It's a version change of web game 2048. At first glance, 2D and Three.js It's nothing to do with wool. Please look carefully, there are shadows, transparency, three-dimensional feeling, everything is in the details

Here, Tucao ha ha, WeChat 7.0.15 version and similar version may make complaints about the game, but the specific reasons are unknown.

summary Three.js To build a small game scene, the process is relatively simple, three steps.

  • Create a new scene, light up and set the camera position;
  • Combine geometry and materials to build different models
  • Render the model in the scene. A 3D interface will come out


  • In terms of browser, Google is right. Please check the specific compatibility
  • If you have some knowledge of JavaScript, you'd better have some knowledge of 3D graphics.

Basic concepts

Scene: provides a space with a 3D axis

Camera: it's equivalent to a person's eyes. It's the angle of view. There are two kinds of cameras: orthographic camera and perspective camera. Different projection methods are needed for different 3D scenes. For example, in the field of mechanical and industrial design, orthographic projection (parallel projection) is often used, and perspective projection (central projection) is often used for large game scenes.

Light source: threejs virtual light source is the simulation of natural light. The light sources are ambient light, directional light, hemisphere light, point light, RectAreaLight and SpotLight. When threejs builds a virtual scene, in order to better render the scene, it is often necessary to set up different light sources and different light intensity, just like a photographer needs to set up various auxiliary lights to take photos of you.

Geometry: the geometry of a model, such as a cube, cylinder, or custom geometry. three.js Some geometric models, such as BoxGeometry, cylinder geometry, are encapsulated.

Material: the appearance of the geometry. three.js It encapsulates some materials, such as the material with glossy surface of specular highlight (meshphong material), mesh material without specular highlight (MeshLambertMaterial), etc;

Texture: the map of the material surface, which can be a picture or a drawing drawn by canvas
The renderer is to combine and present the scene camera lighting and model in a certain way

It's enough to understand the above concepts.

Code instance

  • First, new scene. Here are two new scenes. The game interface needs a three-dimensional sense, using the center projection; score description text and other model objects, only need to be tiled on the interface, using the parallel projection. Add guides, lights, and background colors to the center projection scene.

createScene() {
    this.scene = new THREE.Scene();
    this.hudScene = new THREE.Scene();
    const axesHelper = new THREE.AxesHelper(1000);
    const lights = this.createLight();
    Object.keys(lights).forEach((value) => {
    this.scene.background = new THREE.Color(0x3498db);
  • In the new camera, there are also two cameras, a orthographic camera and a perspective camera. You need to set the orientation, camera position, and focus position.
createCamera() { = new THREE.PerspectiveCamera(
      screenWidth / screenHeight,
    );, 1, 0);,0,2000);;
  createHudCamera() {
    this.hudCamera = new THREE.OrthographicCamera(
      -screenWidth / 2,
      screenWidth / 2,
      screenHeight / 2,
      -screenHeight / 2,
    this.hudCamera.up.set(0, 1, 0);
    this.hudCamera.position.set(0, 0, 1000);
    this.hudCamera.lookAt(new THREE.Vector3(0, 0, 0));
  • Light source setting. According to the actual scene setting, I have set the ambient light and the horizontal light here. Where directional light can set shadows.
 createLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
    directionalLight.position.set(400, 100, 500);
    directionalLight.castShadow = true; = 0.5; = 1000; = -500; = 500; = 500; = -500;
    directionalLight.shadow.mapSize.width = 3024;
    directionalLight.shadow.mapSize.height = 3024;

    return {
      ambientLight: new THREE.AmbientLight(0xffffff, 0.7),
  • Renderer
 createRenderer() {
    let { devicePixelRatio, innerWidth, innerHeight } = window;
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      precision: "highp",

    this.renderer.setClearColor(0xffffff, 1);
    this.renderer.setSize(innerWidth, innerHeight);
    this.renderer.shadowMap.enabled = true;
    this.renderer.autoClear = false;
  • Rendering actions
animate() {
    this.renderer.render(this.hudScene, this.hudCamera);
    requestAnimationFrame(() => {

Since then, all preconditions have been set up, and the model can be established happily.

The second part is about how to build the model.

Swipe and play

See you next

Tags: Javascript Google

Posted on Wed, 17 Jun 2020 22:25:51 -0400 by becoolufull