vue+three.js加载本地stl模型无法显示的解决办法

先放代码

<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(`../../static/disk.stl`,geometry => {// 创建材质// geometry = new THREE.BoxGeometry(100, 100, 100);const material = new THREE.MeshLambertMaterial({ color: 0x7777ff })this.mesh = new THREE.Mesh(geometry, material)this.mesh.position.set(0,0,0)this.mesh.rotation.x = -0.5 * Math.PIthis.mesh.scale.set(100, 100, 100)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>

网上找了段VUE+THREE.JS加载本地STL模型的代码，但是弄了半天也没法在网页中显示，但是console.log(geometry); 和console.log(geometry.attributes.position.count);都是有输出的，应该是成功加载了的，然后搜了半天终于解决了，下面说解决办法：

首先要在vue项目中安装three.js
```
cnpm i three --save-dev
```
模型文件要放在static目录下
加载文件路径要设置正确，在threestl.vue文件里加载模型路径为../../static/disk.stl
模型太小时是看不到的！！！（创建了控件对象的话可以鼠标滑轮缩放预览）
画面中模型的大小与相机的位置和模型的scale属性有关，调整合适就能看到啦

vue+three.js加载本地stl模型无法显示的解决办法相关推荐

webview 本地 html空白,WKWebView加载本地html遇到的坑与解决办法
1.字体变小解决办法 Swift let headerString = "" self.wkwebview.loadHTMLString(headerString.appendin ...
html js引用本地资源,【基本解决】js加载本地文件
[背景] 折腾: 期间,可以把问题转换为: 用js,去加载,读取本地的文件. [折腾过程] 1.搜: js load local file js read local file 参考: 试试:func ...
动卡空间服务器显示正在加载,绝地求生进不去游戏一直卡在加载画面是什么原因？附解决办法...
原标题:绝地求生进不去游戏一直卡在加载画面是什么原因?附解决办法要说玩<绝地求生>的时候最恼人的事情是什么,非加载页面那个一直在转的圈圈莫属了.不知道有多少玩家体验过一直等着那个圈圈转完 ...
VS2010未能加载 'VSTS for Database Professionals'包的解决办法
VS2010未能加载 'VSTS for Database Professionals'包的解决办法: 开始菜单->Microsoft Visual Studio 2010->Visual ...
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 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
uniapp 使用pdf.js 加载本地pdf文件报错问题
最近有在做一个移动端的应用,应用里涉及到大量的js游戏开发,使用Android原生做不太合适,就选择了uniapp,其中有一个功能是读取本地的pdf文件并展示.在网上查了点资料都是用pdf.js来开发 ...
three.js 加载obj+mtl模型
本文提供了three.js中实现将obj+mtl模型加载到场景中的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
VUE + tiff.js 加载 tiff，tif 图片
前段时间公司有个需求,就是前端要加载大量的tif 和 tiff 格式的图片瞬间觉得头大如牛,没有一点思路,于是一直问度娘,功夫不负苦心人,终于让我找到了一款比较好用的插件 tiff.js // 引入 ...

vue+three.js加载本地stl模型无法显示的解决办法

vue+three.js加载本地stl模型无法显示的解决办法相关推荐

最新文章

热门文章