three.js如何实现简易3D机房？（一）基础准备-上

// 引入three.js
import * as THREE from 'three';
export let scene, camera, renderer, width, height,

// 1.初始化三要素
export function init (dom) {
  scene = new THREE.Scene();
  // 设置场景颜色
  scene.background = new THREE.Color(0x001c55)
  camera = new THREE.PerspectiveCamera(25, width / height, 1, 1000);
  // 移动相机位置
  camera.position.set(0, 0, 80);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  // 添加抗锯齿效果
  renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, });
  // 给画布设置宽高
  renderer.setSize(width, height);
  // document.body.appendChild(renderer.domElement);
  dom.appendChild(renderer.domElement);
}

注意：

（1）当3D内容是全屏展示时

javascript 复制代码

  width = window.innerWidth;
  height = window.innerHeight;
  document.body.appendChild(renderer.domElement);

（2）当3D内容是局部div时

javascript 复制代码

  width = dom.offsetWidth;
  height = dom.offsetHeight;
  dom.appendChild(renderer.domElement);

3.创建轨道控制器

在threeD-init.js文件中：具体属性配置可参考文档根据实际开发要求调整

javascript 复制代码

// 导入附加组件-轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
export let controls

// 2.创建轨道控制器
export function createControls () {
  controls = new OrbitControls(camera, renderer.domElement);
  // 开启阻尼惯性
  controls.enableDamping = true;
  // 阻尼速度
  controls.dampingFactor = 0.1;
  // 开启旋转
  // controls.autoRotate = true;
  // 旋转的速度
  // controls.autoRotateSpeed = 1;
  // 视角最小距离
  // controls.minDistance = 20;
  // 视角最远距离
  // controls.maxDistance = 5000;
  // 最大角度
  controls.maxPolarAngle = Math.PI / 3;
}

4.初始化灯光

在threeD-init.js文件中：

javascript 复制代码

// 3.初始化灯光
export function initLight () {
  //模拟远处类似太阳的光源
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
  directionalLight.position.set(3, 500, 10).normalize();
  scene.add(directionalLight);
  //影响整个场景的光源
  const ambient = new THREE.AmbientLight(0xffffff, 1);
  ambient.position.set(0, 500, 10);
  scene.add(ambient);
}

5.适配

在threeD-init.js文件中：

官网其实只给了适配浏览器大小的示例，但在实际项目中适配效果还是差了一点儿，我自己又另外加了一个监听div尺寸变化的适配，大家可以根据实际情况自行取用

javascript 复制代码

// 5.1监听div的尺寸变化(是否全屏)
export const watchDom = (dom) => {
  let ro = new ResizeObserver(() => {
    updateRelatedProperties(dom)
  });
  ro.observe(dom);
};

// 5.2监听浏览器窗口的缩放
export function renderResize (dom) {
  window.addEventListener('resize', () => {
    updateRelatedProperties(dom)
  });
}

function updateRelatedProperties (dom) {
  getDomInfo(dom);
  // 更新画布宽高
  renderer.setSize(width, height);
  // 更新相机的宽高比
  camera.aspect = width / height;
  // 更新相机的近截面和远截面
  camera.updateProjectionMatrix();
}

6.循环渲染

在threeD-init.js文件中：

javascript 复制代码

// 6.循环渲染
export function renderLoop () {
  requestAnimationFrame(renderLoop);
  // 实时更新性能
  controls.update();
  css3DRenderer.render(scene, camera);
  renderer.render(scene, camera);
}

接下一篇：