Build a 3D Bing Dwen Dwen Mascot with Three.js and Deploy on Alibaba Cloud

Overview

When the 2022 Beijing Winter Olympics mascot "Bing Dwen Dwen" sold out, a developer created a web‑based 3D version using front‑end technologies and shared the source on GitHub. This guide explains how to reproduce the effect and deploy it with a cloud platform.

1. Import Resources

Load the required libraries and assets: OrbitControls for camera control, TWEEN for animation, and GLTFLoader for loading .glb/.gltf 3D models.

import React from 'react';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import bingdundunModel from './models/bingdundun.glb';
// ...

2. Page DOM Structure

The page contains a #container for the 3D canvas and a .olympic_loading element to show loading progress.

<div>
  <div id="container"></div>
  {this.state.loadingProcess === 100 ? '' : (
    <div className="olympic_loading">
      <div className="box">{this.state.loadingProcess} %</div>
    </div>
  )}
</div>

3. Scene Initialization

container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load(skyTexture);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

4. Add Lights

// Directional light (casts shadows)
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(16, 16, 8);
light.castShadow = true;
scene.add(light);
// Ambient light (environment)
const ambientLight = new THREE.AmbientLight(0xcfffff);
scene.add(ambientLight);

5. Loading Manager

Use THREE.LoadingManager to track model loading progress. When progress reaches 100 %, trigger a camera tween animation.

const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
  const percent = Math.floor(loaded / total * 100);
  this.setState({ loadingProcess: percent });
  if (percent === 100) {
    Animations.animateCamera(camera, controls, {x:0,y:-1,z:20}, {x:0,y:0,z:0}, 3600, () => {});
  }
};

6. Create Ground

The ground is a model exported from Blender as a .glb file, loaded with GLTFLoader. Alternatively, a simple plane with a normal map can be used.

var loader = new THREE.GLTFLoader(manager);
loader.load(landModel, function (mesh) {
  mesh.scene.traverse(function (child) {
    if (child.isMesh) {
      child.material.metalness = .1;
      child.material.roughness = .8;
      if (child.name === 'Mesh_2') {
        child.material.metalness = .5;
        child.receiveShadow = true;
      }
    }
  });
  mesh.scene.rotation.y = Math.PI / 4;
  mesh.scene.position.set(15, -20, 0);
  mesh.scene.scale.set(.9, .9, .9);
  scene.add(mesh.scene);
});

7. Add the "Bing Dwen Dwen" Model

Load the mascot model, set material properties for a semi‑transparent shell, and position it in the scene.

loader.load(bingdundunModel, mesh => {
  mesh.scene.traverse(child => {
    if (child.isMesh) {
      if (child.name === 'oldtiger001') {
        child.material.metalness = .5;
        child.material.roughness = .8;
      }
      if (child.name === 'oldtiger002') {
        child.material.transparent = true;
        child.material.opacity = .5;
        child.material.metalness = .2;
        child.material.roughness = 0;
        child.material.refractionRatio = 1;
        child.castShadow = true;
      }
    }
  });
  mesh.scene.rotation.y = Math.PI / 24;
  mesh.scene.position.set(-8, -12, 0);
  mesh.scene.scale.set(24, 24, 24);
  scene.add(mesh.scene);
});

One‑Click Cloud Deployment

1. Prepare Environment

GitHub account

Alibaba Cloud account with Cloud Development Platform (OSS enabled)

2. Create the Front‑End Application

Open the Alibaba Cloud Workbench quick‑start page and create a new front‑end app.

Authorize cloud resource access.

Bind your GitHub account and select the forked bingdundun repository.

Fill in basic information and finish creation.

3. Deploy

Click the “Deploy” button in the app details page to launch the one‑click deployment. After the status turns green, you can visit the live site to see the 3D mascot.

By following these steps, you can recreate the popular Bing Dwen Dwen mascot in a web page and host it instantly on Alibaba Cloud.