ThreeJS环境搭建

清疚 2023-09-24 19:18 175阅读 0赞

## ThreeJS介绍 ##

ThreeJS是一款基于WebGL封装的在浏览器中运行的 3D 库，你可以用它来创造你所需要的一系列3D场景，如最近比较火的数字孪生、元宇宙可视化等等，如果你想深入学习Three.js，那么就跟着我的文章一起学习就好了。

## 如何搭建环境 ##

ThreeJS的官网是 [Three.js – JavaScript 3D Library][Three.js _ JavaScript 3D Library] ，上面提供了很多有用的文档和论坛连接，也提供了很多的demo案例，现在前端开发基本是基于框架，本文介绍使用VUE搭建ThreeJs环境，安装环境比较简单，使用npm直接安装threejs即可(本文使用的是128版本)。

npm install three@0.128.0

安装完之后就可以开发相应的功能了。

## 运行基本的场景 ##

运行ThreeJS需要提供摄像机，场景和渲染器三种基本元素，常用的还有OrbitControls镜头控制器，下面是一个基本的ThreeJS场景代码，里面包含一个立方体，同时可以使用鼠标对他进行旋转移动和放缩的操作。

<template>
      <div>
        <canvas id="gameContainer"> </canvas>
      </div>
    </template>
    <script>
    import * as THREE from "three";
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
    
    export default {
      data() {
        return {
          scene: null,
          camera: null,
          renderer: null,
          orbControl: null,
        };
      },
      mounted() {
        this.initScene();
      },
      methods: {
        initScene() {
          this.container = document.getElementById("gameContainer");
    
          let width = window.innerWidth, height = window.innerHeight;
          // 创建场景、摄像机和渲染器
          this.scene = new THREE.Scene();
          this.camera = new THREE.PerspectiveCamera();
          this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            canvas: this.container,
            alpha: true,
          });
          this.renderer.setPixelRatio(window.devicePixelRatio);
          this.renderer.setSize(width, height);
    
          // 环境光
          const light = new THREE.AmbientLight(0xffffff, 1.0);
          this.scene.add(light);
    
          this.camera = new THREE.PerspectiveCamera(
            75,
            width / height,
            0.1,
            1000
          );
          
          // 摄像机位置和角度
          this.camera.position.set(20, 20, 20);
          this.camera.lookAt(new THREE.Vector3(0, 0, 0));
    
          // 添加立方体
          const geometry = new THREE.BoxGeometry(2, 2, 2);
          const material = new THREE.MeshBasicMaterial({
            color: 0x00ffff,
            side: THREE.DoubleSide,
          });
          let box = new THREE.Mesh(geometry, material);
          box.receiveShadow = true;
          box.position.set(0, 0, 0);
          this.scene.add(box);
    
          // 添加控制器
          this.orbControl = new OrbitControls(
            this.camera,
            this.renderer.domElement
          );
        
          // 循环渲染
          window.requestAnimationFrame(() => {
            this._animate();
          });
        },
        _animate() {
          if (this.renderer) {
            this.renderer.render(this.scene, this.camera);
          }
          window.requestAnimationFrame(() => {
            this._animate();
          });
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    #gameContainer {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-color: #000000;
    }
    </style>

屏幕中间会出现一个蓝色的立方体，如下图：

![f6f53f4d93fc4fb5aba936442fff01ee.png][]

至此一个基本的ThreeJS场景已经搭建好了，后续将会在此基础上累加效果和基本功能。如果想了解基本概念的可以去官网或者其他博客中查看。

[Three.js _ JavaScript 3D Library]: https://threejs.org/
[f6f53f4d93fc4fb5aba936442fff01ee.png]: https://img-blog.csdnimg.cn/f6f53f4d93fc4fb5aba936442fff01ee.png