ThreeJS —— 机房Demo（一）

最近对3D可视化这一块比较感兴趣，通过了解ThreeJS是用来实现3D可视化的一种常用方法，于是在自学ThreeJS的基础上，打算写一个机房Demo来练手

点这里预览项目
GitHub

目录结构

├── font // 字体文件
 |├──── font.ttf // 字体源文件
 |└──── font.json // 转换后的字体文件
├── img // 素材图片
 |├──── xx.png
 |├──── xxx.jpg
 |└──── …
├── js // 自己编写的js文件
 |├──── composer_fn.js // 后期处理
 |├──── create_fn.js // 创建各种几何
 |├──── init_fn.js // 初始化项目
 |└──── util_fn.js // 工具函数
├── lib // 需要引入的js文件
 |├──── three.js
 |├──── OrbitControls.js
 |├──── RenderPass.js
 |└──── …
├── model // 建模工具导出的模型
 |├──── computer.gltf
 |└──── …
└── index.html // 入口文件

初始化Three三大件：场景、相机、渲染器

首先我们应该对Three进行初始化，准备好我们的相机和渲染器，搭建好场景

• 初始化场景

const scene = new THREE.Scene();
// 设置场景背景图，三种类型：
// 1. 普通背景图，一个平面
scene.background = new THREE.Color("rgb(25, 35, 39)");
scene.background = new THREE.TextureLoader().load('img/back.jpg');

// 2. 立方体背景图
scene.background = new THREE.CubeTextureLoader().setPath('img/').load(new Array(6).fill('back.jpg'));

// 3. 球型全景(背景)图，通过建立球体，并反向放大100倍实现，其中x放大倍数为负数
const geometry = new THREE.SphereGeometry(5, 32, 32);
const material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load("img/back.jpg") });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
geometry.scale(- 100, 100, 100);

• 初始化相机

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(-20, 40, 90); // 设置相机的初始位置

• 初始化渲染器

const renderer = new THREE.WebGLRenderer({
    alpha: true, antialias: true }); // alpha：背景透明，antialias：抗锯齿
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 加入body中，也可以加入任意元素里

• 最终在 init_fn.js 中合并成一个函数 initThree

// init_fn.js
function initThree(selector) {
   
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("rgb(25, 35, 39)");
  
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(-20, 40, 90);

  const renderer = new THREE.WebGLRenderer({
    alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.querySelector(selector).appendChild(renderer.domElement);
  
  return {
    scene, camera, renderer };
}

添加轨道控制器

为了增加用户交互性，我们需要添加控制器，添加后就可以通过滚轮缩放控制模型大小，鼠标左键旋转，鼠标右键平移

• 首先在 index.html 中引入所需文件

<!-- index.html -->
<script src="lib/OrbitControls.js"></script>

• 然后创建轨道控制器

// init_fn.js
function initControls() {
   
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.addEventListener(