Three.js basic introductory learning tutorial

This article mainly introduces the Three.js basic learning tutorial in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Three.js official website and three necessary conditions for using Three.js

1.Three.js official website https://threejs.org/

2. Three necessary conditions for using Three.js

(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)

roughly means that anything displayed can be achieved using three.js, and three conditions must be met: a scene, a camera, a renderer. All three are indispensable.

2. The relationship between the three necessary conditions for using Three.js (a scene scene, a camera camera, a renderer renderer)　

As shown in the picture above, to illustrate the relationship between a scene, a camera, and a renderer renderer[/code]

1.Scene scene is a container of objects [popularly understood as holding things]. Developers can put the required characters into the scene, such as apples and grapes. At the same time, the character itself also manages its position in the scene.

2.The function of camera camera is to face the scene, pick a suitable scene in the scene, and take a photo of it. [You can imagine the eyes of an adult]

3.The function of renderer is to put the pictures taken by the camera into the browser to display

3. Use the above theory to practice the official website case

The rendering is as follows

##Official website case implementation source code

It is not difficult to find from the official website case that the default observation direction of the camera is the direction of the screen (negative z-axis direction). When the coordinates are changed, the camera must be pointed to the origin to observe the object

Negative direction of z-axis? ? ? Therefore, it is necessary to talk about the three-dimensional coordinates here (as shown below)

The camera points to the origin? ? ? Let’s talk about the camera camera (very important!! Imagine what it feels like when people can’t see things).

In the case, a perspective camera is used (objects that are closer from the viewpoint are larger, and objects that are far away are drawn A smaller way, consistent with the way we see objects in daily life)

##var camera = new THREE.PerspectiveCamera(fov, aspect, near,far)

new THREE.PerspectiveCamera(fov, aspect, near,far) Perspective camera

Viewing angle: fov Here viewing angle (some places (called shooting distance)), the smaller the objects in the scene, the smaller the field of view angle, the larger the objects in the scene
Aspect ratio: aspectThe closest distance between the camera and the viewing volume: near
The camera is away from the viewing volume The farthest distance of the volume: far

In summary, I believe that it should be very simple to understand the camera based on the above three-dimensional coordinates and camera diagram. Next, modify the above case (explain the mouse scrolling to zoom in and out in the following case) , three-dimensional rotation are all based on the camera)

Four. Modify the official website plan and set the camera orientation and camera position

Use the [lookAt] method to set the camera center of vision. The parameter of "lookAt()" is an object whose attributes include center coordinates "x", "y" and "z".

Set the upward direction of the camera to the positive y-axis camera.up.x = 0; camera.up.y = 1/*Camera orientation--The upper direction of the camera is the y-axis*/; camera. up.z = 0;

5. Implementation of rotating cube

Rotation animation principle The camera rotates around the y-axis and continuously modifies the camera's x and z-axis positions. And keep the objects in the scene in the camera's field of view, put the pictures taken by the camera in real time and display them in the browser

##

//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //设置相机视野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回调函数
}

The effect diagram is as follows

Rotating Cube - Case Source Code

This is complete, attached is a personal drawing flowchart

related suggestion:

JS library Three.js basic introduction

Three.js basic part learning

How to run three.js locally Detailed explanation

Three.js implements 3D model display

Three.js entry hello world and how to draw lines

The above is the detailed content of Three.js basic introductory learning tutorial. For more information, please follow other related articles on the PHP Chinese website!