使用vue3创建一个简单的threeJS实例（学习笔记）

1、前言

threeJS官方文档，更多详细api请自行查询。

2、实例代码如下

<template>
  <div ref="threeBox"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  Scene,
  BoxGeometry,
  MeshLambertMaterial,
  Mesh,
  PerspectiveCamera,
  WebGLRenderer,
  AmbientLight,
  PointLight,
  AxesHelper,
  PointLightHelper,
  Clock,
} from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const threeBox = ref();
// 创建一个三维场景
const scene = new Scene();
// 生成一个几何形状
const geometry = new BoxGeometry(100, 100, 100);
// 材质选择
const meterial = new MeshLambertMaterial({
  color: 0x0000ff, //设置材质的颜色
  transparent: true,//允许设置物体透明度
  opacity: 0.5,//物体透明度
});
// 光源选择
const light = new AmbientLight(0xffffff, 0.6);
scene.add(light);
// 添加点光源
const pointLight = new PointLight(0xffffff, 0.8);
pointLight.position.set(200, 100, 90);
scene.add(pointLight);

// 创建一个辅助视图（XYZ坐标轴）
const axesHelper = new AxesHelper(150);
scene.add(axesHelper);
// 创建一个辅助可视点光源
const pointLightHelper = new PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

// 创建一个网格模型对象
const mesh = new Mesh(geometry, meterial);
// 把网格模型添加到三维场景中
scene.add(mesh);

// 创建相机投影
const width = innerWidth;
const height = innerHeight;
const camera = new PerspectiveCamera(45, width / height, 1, 2000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0); //相机视角位置
// 创建渲染器
const renderer = new WebGLRenderer();
renderer.setSize(width, height); //渲染的宽高度  像素
// 执行渲染操作
// renderer.render(scene,camera)

// 添加相机控制
const controls = new OrbitControls(camera, renderer.domElement);

// 跟踪事件
const clock = new Clock();

// 创建动画函数
const animationFunc = () => {
  const spt = clock.getDelta() * 1000;
  console.log('帧率FPS', 1000/spt);

  renderer.render(scene, camera); //执行渲染操作
  mesh.rotateY(0.01); //每次绕y轴旋转0.01弧度
  window.requestAnimationFrame(animationFunc); //请求再次执行渲染函数render，渲染下一帧
};

onMounted(() => {
  threeBox.value.appendChild(renderer.domElement);
  animationFunc();
});
</script>

<style scoped></style>

• 如果在引入threeJS相关模块时出现ts模块声明报错，请自行在xxx.d.ts文件中使用 declare module 'xxx’即可