Three.js 开发机房（一）

2024-03-18 17:46:22

说两句题外话，这两天之前的项目终于有阶段性的胜利了，终于能有点时间总结与下这个项目中用到的东西了，之前四月就准备将Three.js开发机房的案例记录一下，怎奈天不随人愿，刚准备开始写这块东西项目据开始了，然后就开始了昏天黑地的开发，一天天累的狗一样，废话少说，开工

----------------------------------------------------------------------------------------------------------------------------------------------------------

在用Three.js之前，我们需要知道啥东西是Three.js

　　Three.js是一套基于WebGL的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Three.js对WebGL提供的接

口进行了非常好的封装，简化了很多细节，大大降低了学习成本；

　　先从官网下载Three.js及一些工具js，然后通过script引入，我市将Three.js集成到Vue中进行开发，以下代码都以Vue开发环境为基础进行介绍。

1、安装Vue脚手架，不清楚的可以去看看我的Vue中的几篇博文；此处不做过多的介绍

2、安装Three.js，打开终端输入

npm install three.js --save-dev

　　等待安装完成就可以开搞了。

首先我们需要熟悉一下几个知识点：

　　a: Three.js所渲染的场景、相机、灯光都需要我们自己配置；

　　b: 我们在Three.js中看到我们创建的模型旋转其实并不是模型在旋转，而是我们的视角在旋转，就像我们围着看一盆花，当我们围着一盆花转时，当我们把自己的位置看作相对静止，看到的其实就是花盆在转；

　　c: 三角函数（手动狗头）

那就开搞吧，我们在Vue的脚手架内进行开发，所以可以美美哒使用ES6的一些特性，比如Class，

import * as THREE from 'three';   // 加载 Three.js 库文件
import * as TWEEN from 'tween';   // 加载Three.js 轨迹插件
import Detector from "/static/js/libs/Detector.js";   //  加载 WebGl 探测器
import { OrbitControls } from "/static/js/control/OrbitControls";   // 加载Three.jskognzhiq

import THREEBSP from "/static/js/libs/ThreeBSP";  // 加载模型裁切函数

class DrawHouse{

　　 /**
　　　　* 构造方法初始化
　　　　* @param { 绘制对象 } el
　　　　* @param { 绘制对象距离屏幕左边的距离 } canvas_left
　　　　* @param { 绘制对象距离屏幕顶部的距离 } canvas_top
　　　　* @param { 展现平台 } platform
　　　　* @param { 返回函数 } callback
　　　　*/

    constructor(el, canvas_left, canvas_top, platform, callback){

　　　　this.el = el　　　　

　　　　this.camear__x = 0 ； 
　　　　this.camear__y = 1500； 
　　　　this.camear__z = 0；
　　　　this.initLen = 1500;

} }

　　3、首先我们初始化场景：

/**
  * 初始化场景
  */
cerateScene() {
　　this.scene = new THREE.Scene();
}

　　4、然后初始化相机（也就是我们的眼睛）

 /**
   * 初始化相机
   */
createCamear() {
　　this.camera = new THREE.PerspectiveCamera(45, this.el.offsetWidth / this.el.offsetHeight, 1, 10000);
　　this.camera.position.set(this.camear__x, this.camear__y, this.camear__z);
　　var target = new THREE.Vector3();
　　this.camera.lookAt(target);
　　this.camera.fov = 50;
}

　　这里相机使用的是透视相机：PerspectiveCamera，该类型的相机使用透视矩阵；这个投影模式模拟人类视角。三维空间渲染中最常见的投影模式。

PerspectiveCamera有几个重要参数：fov, aspect, near, far;

Fov – 相机的视锥体的垂直视野角

Aspect – 相机视锥体的长宽比

Near – 相机视锥体的*面

Far – 相机视锥体的远平面

　其他参数后面的专题中在介绍；

5、初始化光源，这里我们用的平行光源（点光源不适合这种场景）

/**
  * 初始化光源
  */
createLight() {
    // 设置环境光
    var ambientLight = new THREE.AmbientLight(0x606060);
    this.scene.add(ambientLight);
    // 设置平行光
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 0.75, 0.5).normalize();
    this.scene.add(directionalLight);
}

　　6、初始化渲染器

createRenderer() {
    /**
       * WebGLRenderer
       * antialias 抗锯齿，平滑，默认false
       * alpha 画布是否包含透明缓冲区，默认false
       * gammaInput: Boolean 所有的纹理和颜色预乘伽马，默认false
       * gammaOutput: Boolean 需要以预乘的伽马输出，默认false
       * shadowMap: 属性有enabled(默认false)/autoUpdate(默认true)/needsUpdate(默认false)/type(默认 THREE.PCFShadowMap)
       * setPixelRatio(value) 设置设备像素比
       * setSize(width, height) 设置渲染器的范围
       * setClearColor(color,alpha) 设置渲染的环境的颜色
       */
    this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(this.el.offsetWidth, this.el.offsetHeight);

    this.renderer.setClearColor(0XFFFFFF, 0);

    this.el.innerHTML = "";
    this.el.appendChild(this.renderer.domElement);
    this.container__W = this.el.offsetWidth;
    this.container__H = this.el.offsetHeight;

    this.renderer.gammaInput = true;
    this.renderer.gammaOutput = true;

    this.renderer.shadowMap.enabled = true;
}

　　7、初始化FPS函数

/**
  * 初始化FPS函数
  */

animate() {
    let _self = this;
    requestAnimationFrame(_self.animate.bind(this));
    this.render();
    TWEEN.update();
}
/**
  * 定义FPS函数执行的内容
  */
render() {
　　 // 此处使用requestAnimationFrame 函数进行即时刷新，由于这个项目无需每秒60帧的刷新频率，所以我将刷新频率调整到20帧每秒
    if (this.renderer && this.controlRender % 3 == 0) {
        this.renderer.render(this.scene, this.camera);
        if (this.angleCallback != "") {
            var dir = new THREE.Vector3(-this.camera.position.x, 0, -this.camera.position.z).normalize();
             this.roteteAngle = (180 / Math.PI) * Math.atan2(-dir.x, -dir.z);
             this.angleCallback(this.roteteAngle);
         }
         this.controlRender = 0;
         this.controls.update();
    }
    this.controlRender++;
}

　　这篇文章没有什么技术点，全部都是底层配置，跟着步骤走就好了。

-------------------------------------------------------------------------------------------------------------

有什么优化意见还请各位大佬提出，小弟也是今年才接触Three.js,经验不足，望指正

码农公寓

相关文章