资料来源:《黑马前端Web应用3D技术,Three.js实现3D汽车展厅_快速掌握Three.js基本概念》
一、背景
二、引入
- index.html 引入 js 文件
<script src="./three_exercise.js" type="module"></script>
- 下载 three.js
npm install three --s
- js 文件引入 three.js
import * as THREE from "three";
二、要素
(一)基础三要素
- 场景、像机、渲染器,三者结合才能渲染可见内容
1、scene
- 场景:3D 内容容器
import {
Scene } from "three";
// 初始化场景
let scene;
function initScene(){
scene = new Scene()
}
initScene()
2、camera
- 相机:人眼观察视角
// 初始化相机
let camera;
function initCamera(){
camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 透视相机
camera.position.z = 10 // 相机拉远
}
3、renderer
- 渲染器:3D 页面画布
// 初始化渲染器
let renderer;
function initRenderer(){
renderer = new WebGLRenderer({
antialias: true // 去锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight) // 画布大小
document.body.appendChild(renderer.domElement) // 挂载
}
initScene()
辅助条件
- 坐标轴
import {
AxesHelper } from "three";
// 初始化坐标轴
function initAxesHelper(){
const axesHelper = new AxesHelper(3) // 调整坐标轴长度
scene.add(axesHelper) // 将坐标轴添加到场景
}
initAxesHelper()
- 轨道控制器
import {
OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
// 初始化坐标轴
let controls;
function initOrbitControls(){
controls = new OrbitControls(camera, renderer.domElement)
}
initOrbitControls()
- 地面网格
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()
- 动画
// 动画
function render(time){
renderer.render(scene, camera) // 场景、相机、渲染器结合
requestAnimationFrame(render)
TWEEN.update(time)
}
render()
- 响应式
window.addEventListener('resize', function(){
// camera
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
// renderer
renderer.setSize(window.innerWidth, window.innerHeight)
})
(二)mesh
- 几何体:3D 对象
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()
(三)light
- 光源:灯光效果
// 光源
let spotLight;
spotLight = new SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight )