“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

background

A few days ago I wrote a teach you how to use 3 step code to achieve a 360 – degree panorama, super simple articles, views and thumb up lots of people, and some people want to see more threejs message, so I wrote an article teach you realize super cool light particles, super simple articles, but the traffic is not high, I think may be not practical, So I decided to use Threejs to achieve a 3D effect of digging gold red envelope cover, and step by step detailed explanation, and achieve the following effect:

technology

  • typescript
  • threejs

knowledge

  1. There is a Scene.
  2. TextGeometry
  3. FontLoader
  4. OrbitControls

To prepare

  1. threejs
  2. vue-cli
  3. Helvetiker_bold. Typeface. Json (font)

Red background implementation

Since the red envelope is red, we need a red background. The following

Principle 1.

The Scene property has background. The document description is as follows:

If not empty, the background is set when rendering the scene, and the background is always rendered first. You can set a Color for “clear”, a Texture to overlay the canvas, or a cubemap as a CubeTexture or an equirectangular as a Texture. The default value is null.

Code 2.

this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xe55439);
Copy the code

Text loop implementation

1. Load fonts

const loader = new FontLoader();
loader.load("/assets/fonts/helvetiker_bold.typeface.json".(res) = >{... });Copy the code

2. Create text

const text = "2022@JUEJIN@HAPPYNEWYEAR2022@JUEJIN@HAPPYNEWYEAR";
    for (let i = 0; i < text.length; i++) {
      const x = Math.floor(Math.cos((Math.PI / 24) * i) * -30);
      const y = 0;
      const z = Math.floor(Math.sin((Math.PI / 24) * i) * 30);
      const font = new TextGeometry(text[i], {
        font: res,
        size: 4.// Font size
        height: 1.// Squeeze the thickness of the text
        curveSegments: 12.// The number of points on the curve. The default value is 12
        bevelEnabled: true.// Whether to enable bevel. Default is false
        bevelThickness: 0.5.// The depth of the bevel on the text. The default is 20
        bevelSize: 0.03.// The extension distance between the bevel and the original text contour. The default value is 8
        bevelSegments: 3.// The number of bevel segments. The default value is 3
      });
      font.center();
      const material = new THREE.MeshBasicMaterial({
        color: 0xffcea3});const textMesh = new THREE.Mesh(font, material);
      textMesh.position.set(x, y, z);
      textMesh.rotateY((Math.PI / 24) * i - Math.PI / 2);
    }
Copy the code

3. Text grouping

this.textGroup = new THREE.Group();
this.textGroup && this.textGroup.add(textMesh);
this.scene.add(this.textGroup);
Copy the code

The effect is as follows:

4. Increase the cutting Angle

this.textGroup.rotateY(Math.PI * -0.2);
this.textGroup.rotateZ(Math.PI * -0.1);
Copy the code

The effect is as follows:

5. Add rotation animations

if (this.textGroup) {
  const axis = new THREE.Vector3(0.1.0); / / vector axis
  this.textGroup.rotateOnAxis(axis, -Math.PI / 200); // Rotate PI / 200 around the axis
}
Copy the code

The complete code

setText(): void {
    const loader = new FontLoader();
    loader.load("/assets/fonts/helvetiker_bold.typeface.json".(res) = > {
      if (this.scene) {
        this.textGroup = new THREE.Group();
        const text = "2022@JUEJIN@HAPPYNEWYEAR2022@JUEJIN@HAPPYNEWYEAR";
        for (let i = 0; i < text.length; i++) {
          const x = Math.floor(Math.cos((Math.PI / 24) * i) * -30);
          const y = 0;
          const z = Math.floor(Math.sin((Math.PI / 24) * i) * 30);
          const font = new TextGeometry(text[i], {
            font: res,
            size: 4.// Font size
            height: 1.// Squeeze the thickness of the text
            curveSegments: 12.// The number of points on the curve. The default value is 12
            bevelEnabled: true.// Whether to enable bevel. Default is false
            bevelThickness: 0.5.// The depth of the bevel on the text. The default is 20
            bevelSize: 0.03.// The extension distance between the bevel and the original text contour. The default value is 8
            bevelSegments: 3.// The number of bevel segments. The default value is 3
          });
          font.center();
          const material = new THREE.MeshBasicMaterial({
            color: 0xffcea3});const textMesh = new THREE.Mesh(font, material);
          textMesh.position.set(x, y, z);
          textMesh.rotateY((Math.PI / 24) * i - Math.PI / 2);
          this.textGroup && this.textGroup.add(textMesh);
        }
        this.textGroup.rotateY(Math.PI * -0.2);
        this.textGroup.rotateZ(Math.PI * -0.1);
        this.scene.add(this.textGroup); }}); }Copy the code

The effect

conclusion

Because the red envelope structure is complex, I am also an amateur creation, so it is difficult to complete, I will be divided into several phases to realize the gold digging red envelope, you can also pay attention to my future articles, thank you.

Related articles

Teach you to use 3 steps code to achieve 360 degree panorama, super easy

Vue3.0 + TS + Threejs 3D text (Hello Juejin) and demo details

Rotate the Nuggets logo with Threejs

Vue3.0 + TS + Threejs implements simple demo