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

background

On an article (threejs is used to implement the nuggets red envelope cover text – 3 d rotating ring) we implemented 3 d rotating ring, this article I’m going to realize 3 d rotation nuggets LOGO, first of all, we saw the nuggets LOGO is made up by three parts: a three pyramid, two hollow trapezoidal cube, then I will to do it.

technology

  • typescript
  • threejs

threejsknowledge

1. Group

Objects can be combined using the.add(object) method, which adds them as child objects and combines them into a whole.

2. ConeGeometry

A class for generating conic geometry.

Radius – The radius at the bottom of the cone. Default is 1

Height – The height of the cone. Default is 1.

RadialSegments – Number of segments around the side of the cone. Default is 8.

HeightSegments – The number of segments along the side of a cone with its height. Default is 1.

OpenEnded – A Boolean value that specifies whether the bottom of the cone is open or capped. The default value is false, meaning that the bottom is capped by default.

ThetaStart – The starting Angle of the first segment, which defaults to 0. (Three o’clock position)

ThetaLength — The central Angle of the circular sector on the underside of a cone, often called “θ” (west tower). The default is 2*Pi, which makes it a full cone.

3. Cylinderic Buffer Geometry

A class for generating cylindrical geometry.

RadiusTop – The top radius of the cylinder, default is 1.

RadiusBottom – The bottom radius of the cylinder. Default is 1.

Height – The height of the column. Default is 1.

RadialSegments – Number of segments around the side of a cylinder. Default is 8.

HeightSegments – The number of segments along the side of a cylinder at its height. Default is 1.

OpenEnded – A Boolean value that specifies whether the bottom of the cone is open or capped. The default value is false, meaning that the bottom is capped by default.

ThetaStart – The starting Angle of the first segment, which defaults to 0. (Three o’clock position).

ThetaLength — The central Angle of the circular sector on the underside of the cylinder, often called “θ” (west tower). The default is 2*Pi, which makes it a complete cylinder.

4. Lambert Mesh Material

A non – shiny surface material without specular highlights.

Implement 3 dlogo

1. Create a triangular cone

setCone(): THREE.Mesh {
    const geometry = new THREE.ConeGeometry(5.5.4.1.true.0.6.3);
    const material = new THREE.MeshLambertMaterial({
      color: new THREE.Color(0xffcea3),
      side: THREE.DoubleSide,
    });
    const cone = new THREE.Mesh(geometry, material);
    cone.position.set(0.20.0);
    cone.castShadow = true;
    return cone;
}
Copy the code

The effect is as follows:

2. Create a second layer of trapezoidal cubes

 setCylinder1(): THREE.Mesh {
    const geometry = new THREE.CylinderGeometry(10.14.5.4.1.true);
    const material = new THREE.MeshLambertMaterial({
      color: new THREE.Color(0xffcea3),
      side: THREE.DoubleSide,
    });
    const cylinder1 = new THREE.Mesh(geometry, material);
    cylinder1.position.set(0.10.0);
    cylinder1.castShadow = true;

    return cylinder1;
  }
Copy the code

The effect is as follows:

3. Create a third layer of trapezoidal cube

setCylinder2(): THREE.Mesh {
    const geometry = new THREE.CylinderGeometry(20.24.5.4.1.true);
    const material = new THREE.MeshLambertMaterial({
      color: new THREE.Color(0xffcea3),
      side: THREE.DoubleSide,
    });
    const cylinder2 = new THREE.Mesh(geometry, material);
    cylinder2.position.set(0.0.0);
    cylinder2.castShadow = true;
    return cylinder2;
  }
Copy the code

The effect is as follows:

4. The combination LOGO

setLogo(): void {
    const cone = this.setCone();
    const cylinder1 = this.setCylinder1();
    const cylinder2 = this.setCylinder2();
    this.logoGroup = new THREE.Group();
    this.logoGroup.add(cone);
    this.logoGroup.add(cylinder1);
    this.logoGroup.add(cylinder2);
    this.scene && this.scene.add(this.logoGroup);
  }
Copy the code

5. Increase the tilt

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

The effect is as follows:

6. Add rotation animations

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

The effect is as follows:

The overall effect

Combined with the rotating text ring from the previous post, the overall effect is as follows: