vue3 + vite + threejs

本节课默认你threejs已经入门，同时对前端技术栈vue3、vite也比较熟悉。

本节课代码非常简单，在基础课程vue3+threejs可视化 (opens new window)章节1里面已经讲解过程，就不在一行一行重复，直接把代码文件结构在大家说下。

项目文件

项目文件是通过vite脚手架创建一个vue开发环境。

npm i three@0.164.0 -S// 比如安装164版本
npm i three@0.148.0 -S// 比如安装148版本

熟悉下下面三个文件就行,代码非常简单，后面会在本节课基础演示代码。

• twin/CreateTwin.js文件
• components/HelloWorld.js文件
• components/twin.js文件

你直接打开本节课课件源码，npm i安装依赖，npm run dev启动即可。

提醒：如果部分同学vue前端基础不太好，上面几个文件代码不太理解，建议去学习vue3+threejs可视化(收费站) (opens new window)课程章节1~5。

twin/CreateTwin.js文件

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default class CreateTwin {
    constructor() {
        // 场景
        this.scene = new THREE.Scene();
        // 相机
        const width = window.innerWidth;
        const height = window.innerHeight;
        this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 3000);
        this.camera.position.set(100, 100, 100);
        // 渲染器
        this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            logarithmicDepthBuffer: true,
        });
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(width, height);
        document.body.appendChild(this.renderer.domElement);

        // 渲染循环
        this.renderer.setAnimationLoop(() => {
            this.renderer.render(this.scene, this.camera)
        })

        // 相机控件
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.target.set(0, 0, 0);
        this.controls.update();
        // 画布尺寸随着窗口变化
        window.addEventListener('resize',()=>{
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
        });
    }
}

components/twin.js文件

import CreateTwin from "../twin/CreateTwin";
const twin = new CreateTwin();
export default twin;

components/HelloWorld.js文件

<script setup>
import twin from './twin';
import * as THREE from 'three';
// 三维场景中添加一个立方体
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff, 
});
const mesh = new THREE.Mesh(geometry, material);
twin.scene.add(mesh);  
</script>

<template>
    
</template>

<style scoped>

</style>