VUE3使用three.js显示3D模型

使用3D模型作为自动化系统的界面已经成为潮流。尽管在AutomationML 中推荐COLLADA作为 3D 模型的标准。但是COLLADA的开发者khronos 集团却已经开发了COLLADA的后继者glTF 。glTF 2.0已经成为国际标准ISO/IEC 12113:2022。

Khronos声称-‘glTF是3D里的JPEG’。目前看来glTF 更加流行。

glTF 概述

glTF 的工业中的应用

CAD 软件的支持

solidworks 2020版开始支持glTF 的导出。

3D 查看器

windows 上有一个3D查看器，可以显示导出的glTF 3D模型

支持glTF 的3D软件

SketchUp

SketchUp，民间俗称“草图大师”，是全世界极受欢迎的三维建模与设计软件，在全球拥有4千万年度用户。SketchUp在建筑设计、家具设计、展陈设计、电影美术、舞台美术、产品设计、工程设计等领域有广泛的应用。SketchUp由于其简单、易学、灵活等特点，是目前新兴的原生的BIM正向设计工具，尤其在室内装饰、以及其它应用领域。

Blender

Blender 是一款永久开源免费的 3D 创作软件，支持整个 3D 创作流程：建模、雕刻、骨骼装配、动画、模拟、实时渲染、合成和运动跟踪，甚至可用作视频编辑及游戏创建。

Web 前端的支持

Web 前端有一个功能强大的3D 开源库Three.js 支持glTF 的导入。Three.JS 的背后是webGL 技术

WebGL可以为HTML5 Canvas提供硬件3D加速渲染（部分计算GPU），它借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。WebGL的本质 - JavaScript操作OpenGL接口。

Three.js 是一款 webGL（3D绘图标准，在此不赘述）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。

Three.js 支持glTF 文件的导入。

VUE3+Three.js实验

Step1 安装Three.js

 npm install three --save --force

Step2 代码

首先要对下列参数初始化:

相机 camera
场景 scene
渲染器renderer
控制 controls,
环境光 ambientLight,
方向光 directionalLight

渲染器设置事件处理，实现点击对象的操作（OnClick）
遇到的问题

物体显示不出来，主要是导入glTF 时model.scale.set(2500, 2500, 2500）缩放比例太小了
物体无法通过鼠标旋转，缩放。最后发现是没有设置相机的位置。

camera.position.set(20, 30, 20);

<script  setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { ref, onMounted } from "vue";
let screenDom = ref();
var camera,scene,renderer,controls,ambientLight,directionalLight
onMounted(() => {scene = new THREE.Scene();// 创建相机camera = new THREE.PerspectiveCamera(135,screenDom.value.clientWidth / screenDom.value.clientHeight,0.1,100);camera.position.set(20, 30, 20); //important// 添加环境光ambientLight = new THREE.AmbientLight(0xffffff, 0.9);scene.add(ambientLight);//directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); //光源，color:灯光颜色，intensity:光照强度directionalLight.position.set(400, 200, 300);scene.add(directionalLight);// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setClearColor(new THREE.Color("#000000"));renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);renderer.domElement.addEventListener("click", onClick, false);screenDom.value.appendChild(renderer.domElement);//controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.enablePan = true;controls.enableZoom = true;controls.autoRotate = true;controls.autoRotateSpeed = 9;controls.update(); //重新设置轨道，相当于刷新//添加模型const loader = new GLTFLoader();loader.load("../../../public/Glasses-v1.glb",(gltf) => {// 加载成功后的回调函数const model = gltf.scene;model.scale.set(2500, 2500, 2500); // 缩放模型const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(new THREE.Vector3());let axis = new THREE.Vector3(0, 1, 0);model.rotateOnAxis(axis, Math.PI * 2);model.position.sub(center); // 将模型位置移到原点处scene.add(model);},(xhr) => {// 加载过程中的回调函数console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// 加载失败的回调函数console.error("Failed to load model", error);});// 渲染场景const render = () => {renderer.render(scene, camera);controls.update();requestAnimationFrame(render);};render();
});
function onClick() {event.preventDefault();const mouse = new THREE.Vector2();const rect = screenDom.value.getBoundingClientRect()mouse.x = ((event.clientX+rect.left) / window.innerWidth) * 2 - 1;mouse.y = -((event.clientY+rect.top)/ window.innerHeight) * 2 + 1;console.log("x:"+mouse.x,"y:"+mouse.y);const raycaster = new THREE.Raycaster();raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects(scene.children); //arrayif (intersects.length > 0) {var selectedObject = intersects[0];alert(selectedObject.object.name);}
}
</script>
<template><div class="container"><h2>3D 模型</h2><div class="canvas-container" ref="screenDom"></div></div>
</template>
<style scoped>
.canvas-container {width: 800px;height: 400px;
}
body {overflow: hidden;margin: 0px;
}
</style>

最终的界面