vue2如何导入three.js并创建一个3d模型场景

目录

导入three.js

导入three包

使用npm导入

使用yarn导入

应用到项目

创建初始3D场景

three.js场景以及模型构建思路

创建场景

创建网格

创建几何体geometry

创建材质material

创建视角相机 

创建透视相机（PerspectiveCamera）

创建正投影相机（OrthographicCamera）

创建渲染器

---

导入three.js

vue2项目导入three.js

导入three包

使用npm导入

npm install three

使用yarn导入

yarn add three

npm和yarn都是用于Node.js项目的包管理工具，根据自己的需求决定。

应用到项目

当我们使用npm或者是yarn导入three包时，他是保存在项目的node_modules下的。在项目里面还没被导入。

如果想在项目里面用three.js，那就在需要使用three.js的vue页面里面去导入就可以了。

//vue代码
<template>  
  
</template>  
  
<script>  
import * as THREE from 'three';  //在这里导入three.js为THREE
  
export default {  
  //JavaScript方法等
};  
</script>  
  
<style >  

</style>

创建初始3D场景

three.js场景以及模型构建思路

一整个3d的展示都是由渲染器来渲染到页面中的dom元素里面的。

渲染器通过对场景的加载就可以渲染出不一样的模型。

场景中包括了网格，以及灯光等其他东西，这次我们先介绍基本的网格构建。

网格中包括了想要加载的模型，它可以是内置的各种几何体，也可以是外部导入的模型文件。还有给模型设定颜色和外观的材质。

创建场景

const scene = new THREE.Scene();  

创建网格

因为创建一个网格需要一个几何体对象和一个材质对象，所以我们先创造几何体和材质，然后在使用这两个来创建一个网格。

创建几何体geometry

这里以正方体为例子。正方体在three.js是一个BoxGeomentry对象。

// 创建一个边长为10的正方体几何体  
const geometry = new THREE.BoxGeometry(10, 10, 10); 

创建材质material

这里以绿色为例子。

// 创建一个绿色的基本材质  
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 

然后将几何体和材质，创建为网格 

// 创建网格  
const mesh= new THREE.Mesh(geometry, material); // 使用几何体和材质创建一个网格 

 最后将所创建的网格 添加到场景中。

scene.add(mesh);//将网格添加到场景中

创建视角相机 

根据前面的步骤将网格添加到场景中之后，我们还不能看到模型，是因为少了双眼睛（视角相机）去观察模型。

接下来我们创建视角相机。

两种主要的相机类型：透视相机（PerspectiveCamera）和正投影相机（OrthographicCamera）

创建透视相机（PerspectiveCamera）

透视相机模拟了人眼或摄像机的视角，具有近大远小的透视效果。这是比较常用的方法。

// 创建一个透视相机  
const camera = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);  
  
// 参数解释  
// fov: 视野角度（Field of View），表示相机视野的角度大小，单位为角度。例如：75  
// aspectRatio: 长宽比（Aspect Ratio），表示渲染画布的宽高比。例如：window.innerWidth / window.innerHeight  
// near: 近截面（Near Plane），表示相机能够渲染的最近距离。一般设置为一个较小的正值，如0.1。  
// far: 远截面（Far Plane），表示相机能够渲染的最远距离。根据场景需求设置，如1000。  
  
// 设置相机位置  
camera.position.set(x, y, z); // 例如：camera.position.set(0, 0, 10);

接下来介绍第二种相机 

创建正投影相机（OrthographicCamera）

正投影相机渲染出来的物体的尺寸都一样，不会因为观察距离的远近而出现近大远小的情况。可能会在一定条件下影响展示效果。所以不太推荐。

// 创建一个正投影相机  
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);  
  
// 参数解释  
// left, right, top, bottom: 分别表示相机视锥体的左、右、上、下边界。  
// 例如，可以通过窗口宽度和高度来计算：  
// left = window.innerWidth / -2, right = window.innerWidth / 2,   
// top = window.innerHeight / 2, bottom = window.innerHeight / -2  
// near: 近截面（Near Plane），表示相机能够渲染的最近距离。一般设置为一个较小的正值，如-200。  
// far: 远截面（Far Plane），表示相机能够渲染的最远距离。根据场景需求设置，如500。  
  
// 设置相机位置  
camera.position.set(x, y, z); // 例如：camera.position.set(120, 60, 180);

创建渲染器

完成以上的准备后，最后一步就是用渲染器去将模型渲染到浏览器的页面中了。

让我们先创建一个渲染器

//创建渲染器  
const renderer = new THREE.WebGLRenderer();  
renderer.setSize(宽,高);  
document.body.appendChild(renderer.domElement); // 将渲染器添加到HTML文档中 

最后的最后 将场景和相机载入到渲染器里面就ok啦。

renderer.render(scene, camera);

希望这篇文章可以给大家带来帮助。有什么问题欢迎评论区提问。