1.demo效果

如上图，该demo通过STLLoader加载了STL格式的模型，并添加了紫色材质

2.实现要点

2.1 STL模型放置路径

vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL

data() {return {publicPath: process.env.BASE_URL}
}

2.2 加载STL模型

这我们通过STLLoader导入模型，不过这里需要注意导入的路径，把我们创建的publicpath变量拼接到文件的路径上，在导入的回调函数中，需要创建材质，用创建的材质和导入的几何对象创建网格对象，并将网格对象添加到场景，具体如下：

// 加载STL模型
loadSTL() {const THIS = thisconst loader = new STLLoader()loader.load(`${THIS.publicPath}models/SolidHead_2_lowPoly_42k.stl`,geometry => {// 创建材质const material = new THREE.MeshLambertMaterial({ color: 0x7777ff })this.mesh = new THREE.Mesh(geometry, material)this.mesh.rotation.x = -0.5 * Math.PIthis.mesh.scale.set(0.6, 0.6, 0.6)this.scene.add(this.mesh)})
}

3.demo代码

<template><div><div id="container"></div></div>
</template><script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'export default {data() {return {publicPath: process.env.BASE_URL,mesh: null,camera: null,scene: null,renderer: null,controls: null}},mounted() {this.init()},methods: {// 初始化init() {this.createScene() // 创建场景this.loadSTL() // 加载STL模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene() {this.scene = new THREE.Scene()},// 加载STL模型loadSTL() {const THIS = thisconst loader = new STLLoader()loader.load(`${THIS.publicPath}models/SolidHead_2_lowPoly_42k.stl`,geometry => {// 创建材质const material = new THREE.MeshLambertMaterial({ color: 0x7777ff })this.mesh = new THREE.Mesh(geometry, material)this.mesh.rotation.x = -0.5 * Math.PIthis.mesh.scale.set(0.6, 0.6, 0.6)this.scene.add(this.mesh)})},// 创建光源createLight() {// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光this.scene.add(ambientLight) // 将环境光添加到场景const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯spotLight.position.set(150, 150, 150)spotLight.castShadow = truethis.scene.add(spotLight)},// 创建相机createCamera() {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比// PerspectiveCamera( fov, aspect, near, far )this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)this.camera.position.set(250, 250, 150) // 设置相机位置this.camera.lookAt(new THREE.Vector3(10, 40, 0)) // 设置相机方向this.scene.add(this.camera)},// 创建渲染器createRender() {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.shadowMap.enabled = true // 显示阴影this.renderer.shadowMap.type = THREE.PCFSoftShadowMapthis.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render() {if (this.mesh) {this.mesh.rotation.z += 0.006}this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)},// 创建控件对象createControls() {this.controls = new OrbitControls(this.camera, this.renderer.domElement)}}
}
</script>
<style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>

three.js加载STL格式模型(vue中使用three.js52)相关推荐

three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果如上图,该dem ...
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
cesium模型加载-加载fbx格式模型
整体思路: fbx格式→dae格式→gltf格式→cesium加载gltf格式模型具体方法: 1. fbx格式→dae格式工具:3dsMax, 3dsMax插件:OpenCOLLADA, 下载地址 ...
three.js 加载obj+mtl模型
本文提供了three.js中实现将obj+mtl模型加载到场景中的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
Three.js - 加载 TGA 格式的纹理
1.TGA格式 TGA(Targa)格式是计算机上应用最广泛的图象格式. 在兼顾了BMP的图象质量的同时又兼顾了JPEG的体积优势. 并且还有自身的特点:通道效果.方向性. 在CG领域常作为影视动画的 ...
three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
threejs封装加载 .glb 格式模型，修改贴图
组件 <template><div id="modelCreation"><slot></slot></div> < ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
超图桌面版加载obj 3D模型 - 2
在 https://blog.csdn.net/bcbobo21cn/article/details/109041525 里,加载obj格式模型没有出来效果: 下面来看一下其他方法:当前用的版本是10 ...
vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...

three.js加载STL格式模型(vue中使用three.js52)

加载STL格式模型