ThreeJS from creating scenes to using feature instances

Preface

Recently, the company wanted to make a 2.5D plug-in, and then learn the rotation angle by yourself, and then use THREEJS. It is quite complicated to use, and the overall support is not good. The overall study is done by yourself. Don’t blame me if I see the bad writing.

Create scenes and cameras

First, create a scene, and a camera (camera is divided into perspective cameras and orthogonal cameras, the difference will be explained later), the code is as follows

export default class ThreeComponent extends &lt;any, any&gt; {
  private mount: any
  private camera: any
  private scene: any
  private renderer: any
  
  componentDidMount() {
    ()
    ()
  }
  
  init = () =&gt; {
    // camera     = new (30,  / , 1, 2500)
    (500, 800, 1300)
    (30, 0, 0)
    // Scene     = new ()
     = new (0x000000)

     = new ({ antialias: true, alpha: true })
    (0xEEEEEE, 0.0)
    ()
    (, )
    ()
    ('resize', () =&gt; (this))
  }

  onWindowResize = () =&gt; {
     =  / 
    ()

    (, )

    ()
  }
  
  renders = () =&gt; {
    (, )
  }

  render() {
    return (
      &lt;div id='canvas'
           style={{ width: '100%', height: '100%' }}
           ref={(mount) =&gt; {
              = mount
           }}/&gt;
    )
  }
}

Create a plane

The camera and plane creation are completed. Next, I will create a plane directly into the scene. The code is as follows

    const geometry = new (800, 400)
    // Set transparency and color    const material = new ({ color: 0x091A20, transparent: true, opacity: 0.8 })
    const plane = new (geometry, material)
    // Is it rotation or position operation here     = 300.1
     = 0
     = 49.8
     = 0
     = 120
     = 200
    (plane)

Add a picture

    const image = require('../../assets/images/').default
    // Because adding image loading is asynchronous, it is necessary to operate in the load method. After each load, the renders method must be executed to re-render the scene    new ().load(image, (texture) =&gt; {
      // Set transparency and map of basic material      const mat = new ({ map: texture, transparent: true })
      const geom = new (100, 100)
      const mesh = new (geom, mat)
       = true
       = 19.7
       = 0
       = -30
      // Add to the plane plane so that you can directly put it in the plane, the position is the position of the plane      (mesh)
      ()
    })

Create a line

First of all, because the line width of normal ThreeJs cannot be set, the MeshLine and github address to be used are:MeshLine

// MeshLine is introduced hereimport { MeshLine, MeshLineMaterial, MeshLineRaycast } from ''

      const mat = new ({ map: texture1, transparent: true })
      const boxGeom = new (60, 150)
      const mesh = new (boxGeom, mat)
      const mat1 = new ({ map: texture2, transparent: true })
      const boxGeom1 = new (60, 150)
      const mesh1 = new (boxGeom1, mat1)
      const point = []
      () // Mesh's location      ()  // Mesh1's location      // Point-to-point line      const line = new MeshLine()
      (point)
      const lineMaterial = new MeshLineMaterial({
        color: new (0xffffff),
        lineWidth: 10,
        transparent: true,
        opacity: 0.5
      })
      // Add line      const lineMesh = new (, lineMaterial)
      (mesh)
      (mesh1)
      (lineMesh)
      // After the update is completed, execute render and render the thing into the canvas      ()

Add an axis

    const axesHelper = new (800)
    (axesHelper)

Scaling, positioning, and rotation

    // The scaling function scales the corresponding mesh. Each mesh has fixed position, rotation, and scale attributes after adding each mesh.    (x, y, z)
    (x, y, z)
    (x, y, z)
    // This is also possible, scale and rotation can be set in this way     = 0 
     = 0
     = 0

Add text

Adding text to threeJS official text needs to be imported into json files, and also requires Chinese configuration, so it takes up a lot of memory to use, so the current project is using Canvas to import text pictures

    //Create canvas    const canvas = ('text-canvas') as HTMLCanvasElement
    const ctx = canvas?.getContext('2d') as any
     = 100
     = 100
     = 'transparent'
    (0, 0, 100, 100)
     = '#FFFFFF'
     = `normal ${ ?? 14}px "Kai Style"`
    ( &gt; 5 ? (0, 5) + '...' : text, 0, 40)
    // Export the image path    const url = ('image/png')
    // Set image location and other information    new ().load(url, (texture: any) =&gt; {
      const textGeom = new (200, 200)
      const mat1 = new ({
        map: texture,
        transparent: true
      })
      const mesh1 = new (textGeom, mat1)
      (, , )
      if ( !== undefined) {
        (, , )
      }
      (0.8, 0.8, 0.8)
      if ( !== undefined) {
        (mesh1)
        ()
      } else {
        (mesh1)
      }
      ()
    })

The difference between an orthogonal camera and a perspective camera

If I draw pictures here, I won’t draw them. This is just a little explanation. For details, you can look at the articles I found:Application of orthogonal cameras

Simply put

The characteristic of an orthogonal camera is that the objects in the scene are as big as those in the nearest.
The characteristic of perspective camera is that in the scene, objects follow the arrangement of the nearest, far and small, and if the object is closest, the object will be relatively large.

Here are how to use these two cameras:

    // Perspective camera     = new (30,  / , 1, 2500)

    // Orthogonal camera     = new (width / -4, width / 4, height / 4, height / -4, -100, 10000)

Perspective cameraPerspectiveCameraAttribute introduction (the following are personal understandings, please point them out if you have any unclear):

fov vertical field of view of the camera cone (that is, how big is the angle from the camera)
aspect camera view cone aspect ratio (usually the aspect ratio of your entire scene)
near the camera's cone near the nearest end face (that is the distance the camera sees most recently)
far end face of the camera's cone (the distance the farthest viewed by the camera and the near combination is equivalent to the entire view of the camera from a certain position to a certain position)

Orthogonal cameraOrthographicCameraAttribute introduction:

left The left side of the camera view cone.
right camera view cone right side.
top camera view cone upper side.
bottom side of the camera view cone.
The above four attributes are recommended to configure as the length ratio of the scene, as shown in the code (making this equation true: | left/right | = 1, | top/buttom | = 1). If it does not work, the results may be different.
near
far
The principle of the above two attributes perspective camera

Angle calculation:

If the design just shows you a graph indicating the position of 3d, etc., this piece requires an angle calculation, and you need to change the position of the camera and lookAt attributes:

    (x, y, z)
    (x, y, z)

The setting of this attribute needs to be set by yourself (the algorithm is not very clear at the moment, and I may update it after understanding it). Think of yourself as a camera, wherever you place it, the effect you see is different, and then lookAt is where your eyes look at, and you can see it a little offset.

Summarize

This is the article about ThreeJS from creating scenes to using functions. For more related ThreeJS scenes to creating scenes to using content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!