As a front-end developer, who doesn’t love a wySIWYG?

Build scene physics engine modeling model

WegGl’s pipe shader is basically like learning a new language, and ThreeJs doesn’t have that many tutorials.

Recently found foreign big guy’s class, share your own ThreeJs learning journey ~

The code used in this article is attached to the appendix

Then it’s dry time:

Start by creating an HTML file

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>03 - Basic Scene</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script src="./three.min.js"></script>
    <script src="./script.js"></script>
</body>
</html>
Copy the code

JS file

// // Canvas
// const canvas = document.querySelector('canvas.webgl')

// // Sizes
// const sizes = {
// width: 800,
// height: 600
// }

// // Scene
// const scene = new THREE.Scene()

// // Object
// const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
// const cubeMaterial = new THREE.MeshBasicMaterial({
// color: '#ff0000'
// })
// const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
// scene.add(cubeMesh)

// // Camera
// const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
// camera.position.z = 3
// scene.add(camera)

// // Renderer
// const renderer = new THREE.WebGLRenderer({
// canvas: canvas
// })
// renderer.setSize(sizes.width, sizes.height)
// renderer.render(scene, camera)


const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(1.1.1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

const mesh = new THREE.Mesh(geometry,material)
scene.add(mesh)

const sizes = {
  width: 800.height: 600
}
const camera = new THREE.PerspectiveCamera(75,sizes.width/sizes.height)
camera.position.z = 3
scene.add(camera)

const canvas = document.querySelector('.webgl')

const render = new THREE.WebGLRenderer({
canvas:canvas
})

render.setSize(sizes.width,sizes.height)

render.render(scene,camera)
Copy the code

Finally remember to download THREEJS file and introduce it!

Three Js Four elements

1. Scene containing some objects

2. Some objects

3. Camera Camera

4

Scene

const scene = new THREE.Scene()
Copy the code

Object

To create an object, we need to create a Mesh

Mesh

A Mesh is a combination of geometry (shape) and material (appearance).

So to create the Mesh we need to create the geometry Geomotry and the Material

const geometry = new THREE.BoxGeometry(1.1.1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
Copy the code

Small Tips:

The colors are represented in hexadecimal notation, R, G, B, red, green, and blue, with a depth from 0 to F

# ff0000

That’s red

Ff => red full

00 => No green

00 => No blue

So ff0000 is pure red

Create geometry and material to create a Mesh object using THREE.Mesh().

const mesh = new THREE.Mesh(geometry,material)
Copy the code

Add the object

After creating the Mesh, be sure to add it to Scen, otherwise the Camera will not see it

scene.add(mesh)
Copy the code

Camera

1. The camera is not visible

2. Multiple cameras can be set, but only one camera can render

Routinely we create an PerspectiveCamera that makes a close object look better than a distant one.

Setting up the camera needs to be like a parameter

The View Angle of View

Vision is how big your perspective is. If you use a very large Angle, you will be able to see all directions at once, but the distortion is great because the result will be drawn on a small rectangle. If you use small angles, things look bigger. The field of view (or FOV) is expressed in degrees, corresponding to the vertical Angle of view. In this exercise, we will use a 75 degree Angle.

The small Angle of view:

Big Angle of view:

The Size aspect ratio

In most cases, the aspect ratio is the width of the canvas divided by its height. We haven’t specified any width or height yet, but we’ll need it later. In the meantime, we will create an object with temporary values that we can reuse.

Don’t forget to add the camera to the scene. Everything should work without adding a camera to the scene, but it can cause errors later

The camera position

Be sure to set the camera’s position or rotation or scale

Otherwise the camera will be inside the whole object and will not be able to see anything

const camera = new THREE.PerspectiveCamera(75,sizes.width/sizes.height)
camera.position.z = 3
scene.add(camera)
Copy the code

Object

Manipulating objects in ThreeJS can help us achieve some animation effects later on

Before, we tried position to move the camera to different angles

We can then have a total of four properties that can transform objects in the scene

  • Position (Move object)

  • Scale (resizes objects)

  • Rotation

  • Quaternion (similar to a rotating object)

    Note that we must change the position of object before render. Renderer is called, otherwise it will not take effect.

Position

X is going to the right, y is going to the up, z is going to the back.

We can transform it by manipulating the Mesh

Because Mesh is rain object.3d and represents a concrete module consisting of shape and material.

mesh.position.x = 0.7
mesh.position.y = - 0.6
mesh.position.z = 1

/ / or

mesh.position.set(0.7, - 0.6.1)
Copy the code

Length

Position is set to a Vector3, so we can evaluate the exact value

mesh.position.length()
Copy the code

And that gives you the length of a specific vector.

Also, if we need to know the distance between two Vectore3’s, we can use the distanceTo function

// The distance between the current mesh and the camera vector
mesh.position.distanceTo(camera.position)

// distance from the vector (0,1,2)
mesh.positon.distanceTo(new THREE.Vector3(0.1.2))
Copy the code

5. Normalization.

To normalize the current vector to a standard vector, just use the normalize function.

mesh.position.distanceTo(camera.position)
// The mesh length is 1
Copy the code

Auxiliary line

/** * Axes Helper */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)
Copy the code

The parameter to AxesHelper represents the length of the helper line

Green minus y

The red X-axis

The blue z-axis

By default, the Camera is aligned with the Z-axis, which means that if we do not move the Camera’s X and y we will see something like this

Scale

Scale in a certain direction

mesh.scale.x = 2
mesh.scale.y = 0.25
mesh.scale.z = 0.5 

mesh.scale.set(2.0.5.0.5)
Copy the code

Rotation

1. The rotation

Rotation The number of degrees of rotation centered on the current axis

  • If you are in theySpinning on its axis, you can think of it as a carousel.
  • If you are in thexSpinning on the axle, you can imagine you are spinning the wheels of the car you are about to ride in.
  • If you are in thezSpinning on the axis, you can imagine you are spinning the propeller in front of the plane you are about to fly in.

By default, 2PI is a circle

mesh.rotation.x = Math.PI * 0.25
mesh.rotation.y = Math.PI * 0.25
Copy the code

Note that in normal rotation, no matter what the order of rotation in JS is, the rotation is x, y, and z. However, when we do the rotation on the X axis, the rotation on the y axis is not consistent with the original y axis, so we need to set it by locking

object.rotation.reorder('YXZ')
//1. XYZ is a string. 2
Copy the code

After setting, it means rotation according to the alignment of y axis, x axis, and z axis.

Look At

Camera.lookat(Vector3) represents the vector that points the Camera to the target

camera.lookAt(new THREE.Vector3(0, - 1.0))
Copy the code

That means pointing the camera at 0 minus 1, 0

Of course, we can also use camera.lookat (mesh.position) and our mesh will appear in the center of the screen.

Group

When we need to transform an object more than once, we can create a group and move the group directly.