three.js + vue3 (一) 基础封装拆解

three.js + vue3 (一) 基础封装拆解

由于大家都太卷了，导致行情发生了特大的变化，然后.所以，再我失望的时候突然看到了webgl诞生了好多岗位，最重要的是❗️,有些岗位招了好久还是没招到人，然后我就不知不觉的来了。

今天主要分享的是three.js 如何在vue3中的拆解代码封装实现,相信大家看过一遍就可以直接冲了。

一、创建项目

vue create three_project

相信大家都会创建项目，今天只是分享如何拆解three.js基础分解，所以怎么样安装都可以，大家随意! 并创建一个vue文件引入app.vue中

二、three.js 基础材质（小方块）

npm i three

先搭建一个3d的方块，官方的案例，我就直接敲出来了

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 引入场景
const scene = new THREE.Scene();
// 引入摄像机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight, 0.1, 1000);
camera.position.set(0,0,5)

scene.add(camera);

const container = ref(null);

// 初始化渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

// 创建材质 几何体
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function render () {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

// 页面更新变化，渲染页面
window.addEventListener('resize', () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像头的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器像素比
  renderer.setPixelRatio(window.devicePixelRatio);
})

onMounted(() => {
  const controls = new OrbitControls(camera, container.value);
  controls.enableDamping = true;
  controls.update();
  container.value.appendChild(renderer.domElement)
  render()
})

</script>


<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

三、分解拆分

终于到了主要的地方了，有没有发现这里光基础搭建就这么多行代码了，以后要是再慢慢的加东西就非常的臃肿，所以咱们就拆！ 再src目录下创建一个three文件夹,然后把各个步骤一步一步分装进去

1、scene.js

2、camera.js

3、renderer.js

4、render.js

5、resize.js

6、axesHelper.js

7、gui.js

8、objControls.js

9、boxgemery.js

拆分后的代码

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import gsap from "gsap";
// 场景
import scene from '@/three/common/scene'
// 相机
import camera from '@/three/common/camera'
import renderer from '@/three/common/renderer'
import createMesh from '@/three/boxgemery.js'
import resizePage from '@/three/common/resize'
import objControls from '@/three/common/objControls'
import render from '@/three/common/render'
import axesHelper from '@/three/common/axesHelper'
// 初始化渲染器

// 场景添加摄像机
scene.add(camera)

const container = ref(null);
// 辅助坐标
scene.add(axesHelper(3))

// 创建物体 材质
createMesh(0x00ff00);

// 页面伸缩
resizePage();

onMounted(() => {
  objControls(camera,container);
  container.value.appendChild(renderer.domElement)
  render()
})
</script>
<style>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #f0f0f0;
}
.label {
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size: 16px;
}
</style>

全部拆出来之后，scene主文件立马瘦了好几圈，然后要再加新的东西还可以创建新的文件加进去，这样的代码是不是特别的干净，也很好找有没有！