Teach you to use three.js from simple to complex. Here’s what you can learn from reading this article

  • Basic concepts of three.js (renderer, scene, camera, lighting)
  • Loading 3d model
  • Control 3d model rotation

1. First we generate a renderer

const renderer = new WebGLRenderer() 

renderer.setSize(window.innerWidth, window.innerHeight)

renderer.setPixelRatio(window.devicePixelRatio)

Copy the code

  • The new WebGLRenderer will generate a Canvas tag in the body. Of course, if you want to insert the Canvas somewhere, you can do so in the specified DOM element appendChild(renderer.domElement).

  • SetPixelRatio is designed to be compatible with HD screens. If you draw on hd screens, you will not draw clearly, so set setPixelRatio

2. Generate a scene, our objects need to be added to the scene

const scene  = new Scene()
scene.background = new Color(0x333333)
Copy the code

3. Generate a camera

First, let’s understand the coordinates of three.js

In the center of the screen, that’s the coordinate 0,0,0.

Users can see the scene, need through the camera to present, equivalent to the eye, the camera is divided into two orthogonal projection is a camera, is a kind of perspective projection camera, the biggest difference between them is the perspective projection camera according to the camera position, an object will change the size, closer to the human eye, Here we use a PerspectiveCamera.

const camera  = new PerspectiveCamera(70, this.options.width/this.options.height, 1, 10000)
camera.position.set(150, 250, 300)
camera.lookAt(new Vector3(0, 0, 0))
this.scene.add(camera)
Copy the code
  • LookAt is where is the camera lens focused, pointing at 0,0,0

4. Set the light source

Just as we need light in nature, we need a light source in order to see objects. Here we use parallel light, which is a reference to sunlight.

const light  = new DirectionalLight()
light.position.set(0, 20, 20)
this.camera.add(light)
Copy the code
  • Position means where does the light go
  • We want to add light to the camera so that when we rotate the object, it doesn’t appear that one side of the object is dim

5. Now enter the main point of this chapter: loading 3D models

First, install a loader for fetching models

npm i three-obj-loader
Copy the code

Just load in a.obj 3d model

const loader = new THREE.OBJLoader()
    loader.load('assets/chair.obj', obj => {
      obj.traverse(child=> {
        if (child instanceof Mesh) {
          child.material.side = THREE.DoubleSide
          this.scene.add(obj)
        }
      })
})
Copy the code
  • Add the model to the scene after loading it (this.scene.add(obj))

6. After this step, we are almost finished. The last step is to realize that the model will rotate with the movement of the finger.

First install the library

npm i three-orbit-controls
Copy the code

then

Const controls = this. Controls = New OrbitControls(this.camera) controls. MaxPolarAngle = 1.5 controls RotateSpeed = 5.0 controls. ZoomSpeed = 5 controls. PanSpeed = 2 controlsfalse
controls.noPan = false
controls.staticMoving = trueControls. The dynamicDampingFactor = 0.3 controls. The minDistance = 10. Controls maxDistance = 800Copy the code
  • MaxPolarAngle and minPolarAngle can limit the Angle of rotation

7. Finally, update when the camera rotates

window.requestAnimationFrame(this.animate)
this.controls.update()
this.render()
Copy the code

And we’re done!

The code is on Github, please run this project on mobile and click Jump:The complete code

Postscript:

The original address

Later I will write an advanced application of three.js, such as

  • Effect of particle
  • shader
  • halo
  • Click event handling

Interested students can also get a first look at the code:

Advanced application

Original hard, feel good please point a star oh