Vue2中，新手使用Three.js入门教程

开发准备

开发环境
开发工具：VsCode
node.js：18.16.0
vue/cli：5.0.8
npm：9.5.1
vue：2.6.14
less：4.0.0

项目搭建

• 网上均有vue2项目创建教程，此处省略，后续有空了作者会出一期教程

安装Three.js

• 1、打开three.js中文手册官网

• 2、在终端输入npm install three安装three.js

• 3、安装完成后，在项目的package.json -> dependencies中就能看到three.js及其版本号

使用Three.js

• 1、简单的使用官网示例创建一个场景，并添加一个物体，效果图如下：

• 2、完整代码，如下

<template>
    <div class="bodys"></div>
</template>

<script>
// 导入整个three.js核心库
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
    name: 'DemoOne',
    data() {
        return {
            // 页面标题
            title: 'ThreeJs演示页面一',
            // 场景
            scene: null,
            // 坐标辅助器
            axesHelper: null,
            // 相机
            camera: null,
            // WebGL渲染器
            renderer: null,
            // 轨道控制器
            control: null
        };
    },
    mounted() {
        // 加载场景
        this.init();
        // 动画渲染
        this.animat();
    },
    methods: {
        init() {
            // 1、创建一个场景
            this.scene = new THREE.Scene();

            // 2、创建场景物体
            // 创建一个立方缓冲几何体
            const geometry = new THREE.BoxGeometry(5, 5, 5);
            // 创建法线网格材质
            const material = new THREE.MeshNormalMaterial();
            // 创建网格
            const cube = new THREE.Mesh(geometry, material);
            // 添加到场景中
            this.scene.add(cube);

            // 3、创建坐标辅助器 - 模拟xyz坐标轴
            let axesHelper = new THREE.AxesHelper(70);
            // 添加到场景中
            this.scene.add(axesHelper);

            // 4、定义画布尺寸 - 高宽
            const width = window.innerWidth;
            const height = window.innerHeight;

            // 5、创建一个透视投影相机
            this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
            // 设置相机的位置
            this.camera.position.set(10, 10, 10);
            // 设置相机的观察点坐标
            this.camera.lookAt(0, 0, 0);

            // 6、创建一个WebGL渲染器 - 渲染你制作的场景
            this.renderer = new THREE.WebGLRenderer();
            // 设置渲染画布的尺寸
            this.renderer.setSize(width, height);
            // 把渲染结果添加到页面上
            document.body.appendChild(this.renderer.domElement);

            // 7、创建轨道控制器 - 方便操作场景物体
            this.control = new OrbitControls(this.camera, this.renderer.domElement);
        },
        animat() {
            // 渲染场景
            this.renderer.render(this.scene, this.camera);
            // requestAnimationFrame - 周期性执行，默认每秒60次
            // 渲染下一帧 - 再次执行渲染函数
            requestAnimationFrame(this.animat);
        }
    }
};
</script>

<style lang="less" scoped>
.bodys {
    overflow: hidden;
}
</style>

结语

至此，你已经学会了最基础、简单的ThreeJs了，后续还有很多知识点等着你去探索和学习，若有不懂之处，可以私信于我，看到必回
ThreeJs的应用之处有很多，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影