Vue3+Three.js(一)

使用Three记住一下五点就能成功渲染模型了。

1、场景：创建场景 new THREE.Scene()

2、模型：创建几何模型/引入glb模型之类和创建材质 new THREE.MeshBasicMaterial()

3、渲染：renderer渲染器，顾名思义其负责渲染模型和场景到页面中

4、相机：camera 根据需求创建自己所需的相机类型，填写好各种参数，一般的视野角度75就够用了。

5、控制：controls负责控制页面旋转缩放操作的。

代码如下：

<script setup lang="ts">
import * as THREE from 'three';
import {onMounted, ref} from "vue";
import { ArcballControls} from "three/examples/jsm/controls/ArcballControls";

const containerRef = ref(null)
const width = ref()
const height = ref()
const animateKey = ref(false)
let cube, camera, renderer,scene;
onMounted(() => {
  width.value = containerRef.value.offsetWidth;
  height.value = containerRef.value.offsetHeight;
  initContainer()
})


const initContainer = () => {
  scene = new THREE.Scene(); // 创建场景
  camera = new THREE.PerspectiveCamera( 75, width.value / height.value, 0.1, 1000 );
  // fov:视野角度, aspect:长宽比,near近截面,far:远截面
  renderer = new THREE.WebGLRenderer();// 创建渲染器
  renderer.setSize( width.value , height.value ); // 设置渲染器尺寸
  containerRef.value.appendChild( renderer.domElement);
  const geometry = new THREE.BoxGeometry( 50, 50, 10 ); // 模型
  const material = new THREE.MeshBasicMaterial( { color: 0xff0033 } ); // 材质
  cube = new THREE.Mesh( geometry, material ); // 网格 需包含模型和材质

  // 控制器
  const controls = new ArcballControls( camera, renderer.domElement, scene );
  controls.addEventListener( 'change', function () {
    renderer.render( scene, camera );
  } );

  scene.add( cube ); // 像场景中添加模型
  camera.position.set( 0, 20, 100 );// 设置相机的位置
  controls.update();// 控制器
  animateKey.value = true
  // 因为animate自启动时页面还没加完成，所以加了个变量，当animateKey为true时才执行animate内的方法
  animate()
}

function animate() {
  if(animateKey.value) {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
  }
}
animate()

</script>

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

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid red;
  .container_canvas {
    width: 80%;
    height: 80%;
  }
}
</style>