threejs加载STL模型问题

最新推荐文章于 2024-06-20 10:26:12 发布
最新推荐文章于 2024-06-20 10:26:12 发布
阅读量814 收藏 1
点赞数
分类专栏： threejs 文章标签： vue vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42419603/article/details/125663960
版权

环境：

我是用的框架是vue2，vue3，在vue3中使用并未出现问题，在vue2中引入出来了这个问题

 解决思路:

1. 在vue2中里面会把文件路径重新编译，public下面的不会编译，你在load里面写的../**/这个路径不会被编译,他最后加载的时候就是按这个路径去找文件,就没有文件,然后会返回index.html给你

2. 将文件还是放入public中，在引入文件时直接’/文件名‘，不需要带上public即可

elongpaox
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Threejs 展示——各种模型导入
虎康的博客
07-09 587
这些仅是一些常见的模型文件格式后缀，Three.js还支持其他格式。需要注意的是，在使用这些格式导入模型之前，你需要确保Three.js库中包含对应的加载器。在Three.js中，你可以导入多种格式的模型文件。Three.js 中导入模型的时候可以导入哪些格式的数据。
html的stl模板,threejs 加载stl 或 obj 模型的代码模板
weixin_34712106的博客
06-30 699
加载threejs的stl 和obj模型 可以用一个模板加载stl模型我们假设你有一个名为”test.stl“的stl模型var loader = new THREE.STLLoader();loader.addEventListener( 'load', function ( event ) {var geometry = event.content;var material = new THR...
three.js的stl文件
05-24
用于three.js的stl文件，用于three.js的stl文件，用于three.js的stl文件
`STLLoader` 是 Three.js 中的一个类，用于加载 STL (Stereolithography) 文件。这些文件通常用于 3D 打印和计算机辅助设计 (CAD) 应用程序。
最新发布
qq_37030315的博客
06-20 472
demo案例 是 Three.js 中的一个类，用于加载 STL (Stereolithography) 文件。这些文件通常用于 3D 打印和计算机辅助设计 (CAD) 应用程序。以下是 的详细讲解，包括它的构造函数、方法和属性。 方法 入参： ：要加载的 STL 文件的路径。 ：加载完成后调用的回调函数。回调函数接收一个参数 ，它是加载的 STL 文件生成的 对象。 （可选）：加载过程中调用的回调函数。回调函数接收一个参数 ，它是 对象，可以用于检查加载进度。 （可选）：加载失败时调用的回调
Three.js加载.stl格式模型
u014291990的博客
12-03 4608
.stl格式模型加载 本文是Three.js电子书的14.2节 基本所有的三维软件都支持导出.stl格式的三维模型文件，.stl格式的三维模型不包含材质Material信息，只包含几何体顶点数据的信息，你可以简单地把stl文件理解为几何体对象Geometry，本节课素材box.STL是一个立方体， 你可以用记事本或代码编辑器打开文件box.STL查看stl的数据结构。 stl文件数据结构 .stl...
three.js 加载stl文件并解析
yinge0508的博客
03-08 3608
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
使用three.js 简单加载STL格式3D模型
weixin_43666952的博客
09-02 2333
上述是简单版本。
three.js加载STL格式模型(vue中使用three.js52)
点燃火柴的博客
02-02 5376
加载OBJ格式模型1.demo效果2.实现要点2.1 STL模型放置路径2.2 加载STL模型3.demo代码 1.demo效果 如上图，该demo通过STLLoader加载了STL格式的模型，并添加了紫色材质 2.实现要点 2.1 STL模型放置路径 vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL data() { return {
threeJs 画stl 3D模型
qq_34491588的博客
07-01 249
const that = this; let container: any = document.getElementById('three3D'); let width = container.getBoundingClientRect().width; let height = container.getBoundingClientRect().height; try { init(); animate()..
three.js 加载STL模型补充遇到的问题
weixin_43666952的博客
10-26 209
three.js在开发的时候找到的指导文档提到的都是场景相机渲染初始化，相机控制器默认是轨道控制器OrbitControls。在之前的模型加载中有个功能是测量模型距离，只实现了模型点与点的距离测量，两个点必须是在一个平面上，跨平面的话，生成的线会有部分展示不出来，采用的是点击的点与模型射线相交确定在这个点在平面上。将代码的这部分进行调整，判断以点击的点生成的一个平面是否为准，这样的有点就是不会因为视角的关系看到点击的点在模型上了，换一个视角看却还有一段距离，避免这种现象的出现。
three.js的demo例子-STL加载对象组件
苦瓜_小学生的博客
03-11 2020
three.js的demo例子-STL加载对象组件、gsap动画库、dat.gui、three.js监听鼠标给mesh材质改变颜色
threestl:使用Threejs渲染STL文件
05-14
threestl 使用Threejs渲染STL文件 跑步 python -m SimpleHTTPServer
threejs-stl-demo:用于显示 STL 3D 模型的演示
05-30
Threejs-stl-演示 用于解析和呈现 STL（ascii 和二进制）文件的纯 Javascript 演示代码。 谢谢 用于通过 Javascript 在 WebGL/Canvas 中渲染 3D 模型的能力 灵感来自 执照 Threejs-stl-demo 是在下。
把threejs的STLLoader封装成React组件
08-10
把threejs的STLLoader封装成React组件
vue+three.js加载本地stl模型无法显示的解决办法
mmmlc的博客
04-09 3724
先放代码 <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 }
70 Three.js 导入STL格式的模型
现在学习也不晚
03-20 1万+
简介 STL是STLereoLithography（立体成型术）的缩写，广泛用于快速成型。例如三维打印机的模型文件通常是STL文件。 Three.js还有一个可定制的STL导出器，叫作OBJExporter.js，可以用来将Three.js中的模型导出到一个OBJ文件。 实现案例 案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/1...
vue集成three.js加载外部模型
一路从容
05-13 6025
版本号： vue:2.6.10 vue-cli3.x three.js:0.115.0 引入方式： import * as THREE from 'three' import Stats from 'stats.js' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { STLLoader } from 'three/examples/jsm/loaders/STLLoader' import { Orbi
threejs 显示stl模型的vue代码 经过我摸索的 每一条代码都有注释 复制粘贴就能用
04-28 1381
线图： 点图： 面图： 点、线、面 （下面的代码被的改了 点、线、面只能显示一个） 第一步： 安装three.js npm i three 第二步 粘贴下面的代码 里面很多代码都有注释 <template> <div> <div id="container"></div> </div> </template> <script> .........
threejs加载三维模型
热门推荐
biyusr的专栏
02-20 4万+
直接使用three.js编程建模比较麻烦，实际开发的时候往往会借助一些可视化的3D建模工具，比如SolidWorks、Blender、C4D、3Dmax。不同领域的三维软件支持导出的文件有所差异，比如工业设计、机械设计类的三维软件往往支持导入静态的3D模型，游戏开发常常使用的Blender等三维软件，除了静态的三维模型，还可以导出含有动画信息的三维模型。three.js针对不同的文件格式，提供了许...
使用vue2的threejs加载stl模型
06-08
加载STL模型可以使用Three.js库中的STLLoader。而在Vue2中使用Three.js需要先安装Three.js和STLLoader库。 安装Three.js和STLLoader： ``` npm install three stl-loader ``` 在Vue组件中引入Three.js和STLLoader： ```javascript import * as THREE from 'three' import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js' ``` 然后在Vue组件的mounted钩子函数中加载STL模型： ```javascript mounted() { // 初始化场景、相机、渲染器 this.init() // 加载STL模型 const loader = new STLLoader() loader.load('/path/to/model.stl', (geometry) => { // 创建网格模型 const material = new THREE.MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 200 }) const mesh = new THREE.Mesh(geometry, material) // 将模型添加到场景中 this.scene.add(mesh) }) }, ``` 其中init函数可以参考Three.js的官方文档进行初始化。需要注意的是，Vue组件中的this.scene、this.camera、this.renderer等变量需要在data中进行定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值