vue3引入three.js渲染3D模型图

1.引入three.js文件

npm install three

2.组件内使用three

import * as THREE from 'three'

3.创建3D图渲染容器

<template>

    <canvas id="three"></canvas>

</template>

 4.创建场景对象Scene

const scene = new THREE.Scene()

 5.设置scene背景（根据自己的背景颜色设置，我这里是#eee）

  scene.background = new THREE.Color("#eee")

6. 根据id获取元素

const threeDemo = document.getElementById("three")

7. 创建渲染器对象

const renderer = new THREE.WebGLRenderer({canvas: threeDemo, antialias: true})

8.建立透视投影相机

    const camera = new THREE.PerspectiveCamera(

      30,

      window.innerWidth / window.innerHeight,

      0.1,

      1000

    )

    camera.position.z = 10

9. 引入OrbitControls 创建鼠标左中右操作和键盘方向键操作

 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

 function resizeDevicePixel(renderer) {

      const canvas = renderer.domElement

        let width = window.innerWidth

        let height = window.innerHeight

        let devicePixelWidth = canvas.width / window.devicePixelRatio

        let devicePixelHeight = canvas.height / window.devicePixelRatio

        const needResize = devicePixelWidth !== width || devicePixelHeight !== height

        if (needResize) {

          renderer.setSize(width, height, false)

        }

        return needResize

    }

    const controls = new OrbitControls(camera, renderer.domElement);

    function annimate() {

      renderer.render(scene, camera);

      requestAnimationFrame(annimate);

      // 添加以下代码

      if(resizeDevicePixel(renderer)) {

        const canvas = renderer.domElement;

        camera.aspect = canvas.clientWidth / canvas.clientHeight;

        camera.updateProjectionMatrix();

      }

      controls.update()

    }

    annimate()

10. 引入GLTFLoader，渲染3D.glb图，并设置光照

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

 const gltfLoader = new GLTFLoader();

  gltfLoader.load("3d.glb", (gltf) => {

    let model = gltf.scene;

    // 纹理

const ambientLight = new THREE.AmbientLight(0xffffff,1);

const directionalLight = new THREE.DirectionalLight(0xffffff, 3.5);//光源，color:灯光颜色，intensity:光照强度

directionalLight.position.set(400, 200, 300);

    scene.add(model,ambientLight,directionalLight);

  })

};

 11.3D存放位置public文件夹下面

渲染效果图

完整代码：

<template>

    <canvas id="three"></canvas>

</template>

 

<script setup>

import { onMounted, ref } from 'vue';

import * as THREE from 'three';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

  function initThree() {

    const scene = new THREE.Scene();

    scene.background = new THREE.Color("#eee");

    const threeDemo = document.getElementById("three");

    const renderer = new THREE.WebGLRenderer({canvas: threeDemo, antialias: true});

    const camera = new THREE.PerspectiveCamera(

      30,

      window.innerWidth / window.innerHeight,

      0.1,

      1000

    )

    camera.position.z = 10;

    function resizeDevicePixel(renderer) {

      const canvas = renderer.domElement

        let width = window.innerWidth

        let height = window.innerHeight

        let devicePixelWidth = canvas.width / window.devicePixelRatio

        let devicePixelHeight = canvas.height / window.devicePixelRatio

        const needResize = devicePixelWidth !== width || devicePixelHeight !== height

        if (needResize) {

          renderer.setSize(width, height, false)

        }

        return needResize

    }

    const controls = new OrbitControls(camera, renderer.domElement);

    function annimate() {

      renderer.render(scene, camera);

      requestAnimationFrame(annimate);

      // 添加以下代码

      if(resizeDevicePixel(renderer)) {

        const canvas = renderer.domElement;

        camera.aspect = canvas.clientWidth / canvas.clientHeight;

        camera.updateProjectionMatrix();

      }

      controls.update()

    }

    annimate()

  const gltfLoader = new GLTFLoader();

  gltfLoader.load("3d.glb", (gltf) => {

    let model = gltf.scene;

    // 纹理

const ambientLight = new THREE.AmbientLight(0xffffff,1);

const directionalLight = new THREE.DirectionalLight(0xffffff, 3.5);//光源，color:灯光颜色，intensity:光照强度

directionalLight.position.set(400, 200, 300);

    scene.add(model,ambientLight,directionalLight);

  })

};

onMounted(() => {

  initThree();

})

</script>

 

<style lang='less' scoped>

#three {

  width: 100vw;

  height: 100vh;

  // position: absolute;

  // top: 0;

  // left: 0;

}

</style>