在前一篇博客中，我將3D文件導入到了Rviz中做機器人的模型展示，今天嘗試下將3D文件放在Web瀏覽器中展示。在Web端渲染3D模型是比較麻煩的，但是好在有three.js等這樣的Web3D引擎，才使得我們網頁端渲染3D模型變為可能。
首先我們需要使用CAD Exchanger這個軟件把stl或者stp文件轉換成mtl或者obj文件，然后按照下面的操作即可。
話不多說，直接上代碼，理解起來也不是很難，注意下面的stl文件路徑改成你自己的路徑。
值得注意的是object.scale.set(0.08, 0.08, 0.08);這個地方的參數控制模型大小的，有的時候你轉換過來的文件尺寸比例不對，太大太小web網頁都無法顯示，所以要著重注意這里。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>JUJON: 讓做機器人變得簡單！
</title><style type="text/css">html,body {margin: 0;height: 100%;}canvas {display: block;}</style></head><body onload="draw();"></body>
<script src="../static/js/three.js"></script>
<script src="../static/js/OBJLoader.js"></script>
<script src="../static/js/MTLLoader.js"></script>
<script src="../static/js/OrbitControls.js"></script>
<script src="../static/js/stats.min.js"></script>
<script src="../static/js/dat.gui.min.js"></script><script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xffffff);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 40, 50);camera.lookAt(new THREE.Vector3(0, 0, 0));}var scene;function initScene() {scene = new THREE.Scene();}var gui;function initGui() {gui = {};var datGui = new dat.GUI();}var light;function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.PointLight(0xffffff);light.position.set(0, 50, 0);light.castShadow = true;scene.add(light);}function initModel() {var helper = new THREE.AxesHelper(50);scene.add(helper);var mtlLoader = new THREE.MTLLoader();mtlLoader.setPath('../static/stl/');mtlLoader.load('lv.mtl', function (material) {var objLoader = new THREE.OBJLoader();objLoader.setMaterials(material);objLoader.setPath('../static/stl/');objLoader.load('lv.obj', function (object) {var jujon2 = object.children[5];var jujon1 = object.children[4];jujon1.material.opacity = 0.6;jujon1.material.transparent = true;jujon1.material.depthTest = false;jujon1.material.side = THREE.DoubleSide;jujon2.material.opacity = 0.6;jujon2.material.depthTest = false;jujon2.material.transparent = true;jujon2.material.side = THREE.DoubleSide;object.scale.set(0.08, 0.08, 0.08);scene.add(object);})});}var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}var controls;function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.enableZoom = true;controls.autoRotate = true;controls.minDistance = 1;controls.maxDistance = 200;controls.enablePan = true;}function render() {renderer.render(scene, camera);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {render();stats.update();controls.update();requestAnimationFrame(animate);}function draw() {initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}
</script></html>
轉換正常加載后，web網頁顯示很完美。
真實網站連接：
https://www.jujon.cn/model/ravelle-model.html
總結
以上是生活随笔為你收集整理的如何将3D文件（solidworks等工具导出的STL/DAE文件）在Web浏览器中加载展示的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
