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

前端大巫师

已于 2024-03-25 11:31:05 修改

阅读量1.4k

点赞数 26

分类专栏： webGL 文章标签： javascript 开发语言 ecmascript typescript

于 2024-03-25 11:23:26 首次发布

本文链接：https://blog.csdn.net/Awritethecodemonkey/article/details/137001307

版权

webGL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用three.js库创建3D场景，包括引入文件、创建渲染容器、设置场景、相机、光照及加载3D模型，同时展示了如何处理设备像素比和相机调整。

摘要由CSDN通过智能技术生成

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>