Appearance
threejs
1.介绍
Three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和显示 3D 图形。
它简化了 WebGL 的复杂性，使开发者能够更轻松地创建复杂的 3D 场景、动画和交互式内容。
1.1.核心概念
场景（Scene） 场景是 Three.js 中所有对象的容器，类似于一个舞台。你可以在场景中添加模型、灯光、相机等。相机（Camera） 相机决定了场景的视角。常用的相机类型包括：透视相机（PerspectiveCamera）：模拟人眼的视角，具有近大远小的效果。正交相机（OrthographicCamera）：忽略距离，所有物体大小一致，常用于 2D 场景。
渲染器（Renderer） 渲染器负责将场景和相机的内容渲染到网页上。Three.js 默认使用 WebGLRenderer，基于 WebGL 技术。几何体（Geometry） 几何体定义了物体的形状。Three.js 提供了多种内置几何体，如立方体（BoxGeometry）、球体（SphereGeometry）、平面（PlaneGeometry）等。材质（Material） 材质定义了物体的外观，包括颜色、纹理、透明度等。常用的材质类型包括：基础材质（MeshBasicMaterial）：不受光照影响，适合简单物体。标准材质（MeshStandardMaterial）：支持光照和阴影，适合真实感渲染。
网格（Mesh） 网格是几何体和材质的结合体，代表场景中的一个可渲染对象。光照（Light） 光照用于照亮场景中的物体。Three.js 支持多种光源类型，如环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）等。动画（Animation） Three.js 支持通过更新对象属性（如位置、旋转、缩放）来创建动画效果。通常使用 requestAnimationFrame 实现平滑的动画循环。纹理（Texture） 纹理用于为物体表面添加细节，例如图片、视频或画布内容。加载器（Loader） Three.js 提供了多种加载器，用于加载外部资源，如模型（GLTFLoader）、纹理（TextureLoader）、字体（FontLoader）等。
1.2.网站
https://threejs.org/docs/#manual/zh/introduction/Creating-a-scene （官网）
https://discoverthreejs.com/zh/book/ （免费教程系列）
2.使用
2.1.安装
bash
npm install --save three或者
html
<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>2.2.基础使用
vue
<template>
<div ref="threeContainer" class="three-container0"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
// 获取容器的引用
const threeContainer = ref(null);
// 定义 Three.js 相关变量
let scene, // 场景 用于存放所有 3D 对象
camera, // 相机 使用透视相机（PerspectiveCamera），模拟人眼视角
renderer, // 渲染器 使用 WebGL 渲染器，将场景渲染到页面上
cube; // 立方体 使用 BoxGeometry 创建立方体，并为每个面设置不同的材质（颜色）
// 初始化 Three.js 场景
function initThree() {
// 创建场景
scene = new THREE.Scene();
// 创建相机（透视相机）
camera = new THREE.PerspectiveCamera(
75, // 视角
threeContainer.value.clientWidth / threeContainer.value.clientHeight, // 宽高比
0.1, // 近裁剪面
1000 // 远裁剪面
);
camera.position.z = 5; // 设置相机位置
// 创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
threeContainer.value.appendChild(renderer.domElement);
// 创建立方体
const geometry = new THREE.BoxGeometry();
const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 右面 - 红色
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 左面 - 绿色
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 上面 - 蓝色
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 下面 - 黄色
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 前面 - 紫色
new THREE.MeshBasicMaterial({ color: 0x00ffff }), // 后面 - 青色
];
cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
// 启动动画循环
animate();
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
// 组件挂载时初始化 Three.js
onMounted(() => {
initThree();
});
// 组件卸载时清理资源
onUnmounted(() => {
if (renderer) {
renderer.dispose();
}
});
</script>
<style scoped>
.three-container0 {
width: 100%;
height: 500px;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>