在vue3中使用three.js的步骤

在正式撰写代码之前首先请大家带入到现实，带你在旅游或者出行时，碰到好看的风景会拍照，那么拍照满足什么条件呢？在我认为首先第一点一定要有一台可以拍照的设备相机或者手机都可以，我称它为 相机（camera）。其次需要一个好看的景色，这个景色我称之为 网格模型 （Mesh）。最后就是要有一个场景（scene），这个场景可以是夕阳或是清晨或是其他。 最后则是渲染，可以理解为滤镜，我称之为渲染器（renderer）。最后将这些拼凑到一起这样一张好看的照片就实现了。同样在three.js中一个场景的实现也需要满足一下几个条件，接下来用代码实现一下。

一、首先创建一个场景（scene）。我们所有的东西都将围绕这个场景组成，最后都需要插入到场景中。

// 创建场景 start
const scene = new THREE.Scene();
// 场景完成 end

// 这一步就是我刚刚所说的场景，之后创建的所有都要插入到这个场景中

二、创建网格模型（Mesh）。在three.js中网格模型的创建由几何体（geometry）加材质组成（material）

// 创建模型（几何体+材质）

// 创建几何体 
const geometry = new THREE.BoxGeometry( 10, 10, 10 );

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// 网格模型由几何体与材质组成
const cube = new THREE.Mesh( geometry, material );

// 将创建好的网格模型插入到场景中
scene.add( cube );

// 模型创建完成 end

 三、创建相机（camera） 

// 创建相机
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 6000);
// 相机观察位置 （0,0,0）表示观察坐标原点
camera.lookAt(0,0,0)
// 移动坐标位置 这个坐标位置包括三个坐标轴位置分辨是 x,y,z
camera.position.z = 100


// 注意这个相机位置一定要移动，因为物体是3D的，有长宽高，此时的相机位置位于原点也就是在物体里，如果不设置相机位置则观察不到物体
// 相机创建完成

 四、渲染器

// 创建渲染器 start
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 创建渲染器 end


// 最后将相机与场景插入到渲染器中
renderer.render( scene, camera );

 这样你的第一个页面就创建完成了

最后附上完整代码！ 

<template>
  <div> </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from "three";
// 创建场景 start
const scene = new THREE.Scene();
// 场景完成 end
// --------------------------------



// 创建模型（几何体+材质）
// 创建几何体 
const geometry = new THREE.BoxGeometry( 10, 10, 10 );
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 将几何体与材质添加到模型
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 模型创建完成 end
// -------------------------------------


// 创建相机
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 6000);
camera.lookAt(0,0,0)
camera.position.z = 100
camera.position.x = 20
camera.position.y = 20
// 相机创建完成
// -------------------------------


// 创建渲染器
// 创建渲染器 start
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 创建渲染器 end
const init = () => {
  renderer.render( scene, camera );
  // 循环方法
  // requestAnimationFrame( init );
  
}
onMounted(()=>{
  init()
})
</script>

<style scoped>

</style>