【3D】Introduction to three.js

Source: "Dark Horse Front-end Web Application 3D Technology, Three.js Realizes 3D Car Showroom_Quickly Master the Basic Concepts of Three.js"

1. Background

• Three.js is an API library based on WebGL, using Three.js in javascript and implement 3D scenes

2. Introduction

• index.html introduces js files

<script src="./three_exercise.js" type="module"></script>

• Download three.js

npm install three --s

• js file imports three.js

import * as THREE from "three";

2. Elements

(1) Three basic elements

• Scene, camera, renderer, the combination of the three can render visible content

1、scene

• Scene: 3D content container

import {
    
     Scene } from "three";

// 初始化场景
let scene;
function initScene(){
    
    
    scene = new Scene()
}
initScene()

2、camera

• Camera: human eye viewing angle

// 初始化相机
let camera;
function initCamera(){
    
    
    camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)	// 透视相机
    camera.position.z = 10	// 相机拉远
}

3、renderer

• Renderer: 3D Page Canvas

// 初始化渲染器
let renderer;
function initRenderer(){
    
    
    renderer = new WebGLRenderer({
    
    
        antialias: true	// 去锯齿					
    })
    renderer.setSize(window.innerWidth, window.innerHeight)	// 画布大小
    document.body.appendChild(renderer.domElement)	// 挂载
}
initScene()

auxiliary conditions

• Axis

import {
    
     AxesHelper } from "three";

// 初始化坐标轴
function initAxesHelper(){
    
    
    const axesHelper = new AxesHelper(3)	// 调整坐标轴长度
    scene.add(axesHelper)	// 将坐标轴添加到场景
}
initAxesHelper()

• track controller

import {
    
    OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

// 初始化坐标轴
let controls;
function initOrbitControls(){
    
    
    controls = new OrbitControls(camera, renderer.domElement)
}
initOrbitControls()

• ground grid

import {
    
     GridHelper } from "three";

// 绘制地面网格
let grid;
function initGridHelper(){
    
    
    grid = new GridHelper(20, 40, 'red', '0xffffff')
    grid.material.opacity = 0.2
    grid.material.transparent = true
    scene.add(grid)
}
initGridHelper()

• animation

// 动画
function render(time){
    
    
    renderer.render(scene, camera)	// 场景、相机、渲染器结合
    requestAnimationFrame(render)
    TWEEN.update(time)
}
render()

• Responsive

window.addEventListener('resize', function(){
    
    
    // camera
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    // renderer
    renderer.setSize(window.innerWidth, window.innerHeight)
})

(2) mesh

• Geometry: 3D objects

import {
    
     Mesh } from "three";

// 创建网格/几何体
let mesh;
function initMesh(){
    
    
    // 形状
    const geometry = new BoxGeometry(1, 1, 1)
    // 纹理
    const texture = new TextureLoader().load(dream)
    // 材质
    const materal = new MeshBasicMaterial({
    
    
        color: 'white',
        map: texture
    })
    // 网格
    mesh = new Mesh(geometry, materal)
    scene.add(mesh)
}
initMesh()

(3) light

• Light source: light effect

// 光源
let spotLight;
spotLight = new SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight )