【threeJS + Vue3】导入glft模型

前言

3D前端深入“民心”，小编也不能落于人后~
🚀🚀🚀🚀🚀🚀🚀🚀
于是，小编也随波逐流地学了一把🚀Three.js🚀。
这一学不要紧，倒是学上瘾。
这东西真有趣😀😀😀😀😀😀

在vue中使用Three.js

1. 创建vue3项目(具体配置省略)

npm init vite@latest myThreePro -- --template vue

2.安装three.js用到的包

npm install three

npm install gsap

3.在页面引入相应的包

import * as THREE from 'three';
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 模型加载器 gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 导入 draco 解码器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
// 导入动画库
import gsap from 'gsap';
//通过 UI 来调试参数的gui库
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

4.创建一个3D场景

• 创建场景

const scene = new THREE.Scene()

• 创建相机

PerspectiveCamera： 透视相机，被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
PerspectiveCamera(fov,aspect,near,far)
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

// 透视相机
const camera = new THREE.PerspectiveCamera(fov,aspect,near,far)
scene.add(camera)

OrthographicCamera：正交相机，在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。
OrthographicCamera(left, right, top,bottom, near, far)
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

// 正交相机
 const camera = new THREE.OrthographicCamera(left, right, top,bottom, near, far)
 scene.add(camera)

• 创建渲染器&&定义渲染事件

创建渲染器
const renderer = new THREE.WebGLRenderer({
    // 抗锯齿
    antialias: true
})
renderer.setSize(wiidth, height)

渲染事件
const render = () => {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
}

• 添加轨道控制器
  通过相机控件OrbitControls实现旋转缩放预览效果。

// 添加轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.update();

• 导入模型

// 加载模型
    const gltfLoader = new GLTFLoader()
    // 实例化解析器draco
    const dracoLoader = new DRACOLoader()
    // 设置draco路径
    dracoLoader.setDecoderPath("./draco/")
    // 设置gltf加载器draco解码器
    gltfLoader.setDRACOLoader(dracoLoader)
    gltfLoader.load('./model/car.glb', (gltf) => {
        const car = gltf.scene
        scene.add(car)   // 加入场景
    })

此时模型在页面上可能是黑乎乎的一团！！！（原因：缺光）
方法1：我们可以通过设置模型自发光属性来调整

       gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.frustumCulled = false;
                //模型阴影
                child.castShadow = true;
                //模型自发光
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
      })

方法2：增加灯光

    const light1 = new THREE.DirectionalLight(0xffffff, 1)
    light1.position.set(0, 0, 10)
    scene.add(light1)
    const light2 = new THREE.DirectionalLight(0xffffff, 1)
    light2.position.set(0, 0, -10)
    scene.add(light2)
    const light3 = new THREE.DirectionalLight(0xffffff, 1)
    light3.position.set(0, 10, 0)
    scene.add(light3)
    const light4 = new THREE.DirectionalLight(0xffffff, 1)
    light4.position.set(0, -10, 0)
    scene.add(light4)
    const light5 = new THREE.DirectionalLight(0xffffff, 1)
    light5.position.set(10, 0, 0)
    scene.add(light5)
    const light6 = new THREE.DirectionalLight(0xffffff, 1)
    light6.position.set(-10, 0, 0)
    scene.add(light6)
    const light7 = new THREE.DirectionalLight(0xffffff, .3)
    light7.position.set(5, 10, 0)
    scene.add(light7)
    const light8 = new THREE.DirectionalLight(0xffffff, .3)
    light8.position.set(0, 10, -5)
    scene.add(light8)
    const light9 = new THREE.DirectionalLight(0xffffff, .3)
    light9.position.set(-5, 10, 0)
    scene.add(light9)

至此，简单的3d模型就在页面上展示出来了

模型是网上下载回来的~