vite + vue3 引入 three.js时引入报错

已于 2023-12-29 15:05:18 修改
阅读量674 收藏 9
点赞数 10
分类专栏： 经验记载 vue 文章标签： javascript vue.js 前端
于 2023-12-27 14:19:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/notagoodwriter/article/details/135244657
版权

一. 事件起因

项目当中需要用到 three.js 来做 3D 模型渲染

npm install three@0.148.0 --save

安装完依赖之后  来到组件内

import * as THREE from 'three';

引入  发现报错

get http://localhost/../node_modules/.vite/three.js 504???

我进入 node_modules 文件夹下寻找 发现没有找到 three.js 这个依赖

二. 解决办法

手动删除 node_modules 文件夹   然后 npm i 重新拉取依赖即可

关忆北_
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
Vue3 是 Vue.js 框架的最新版本，引入了 Composition API 等重大改进，让代码更加模块化和易于管理。而 `import.meta.glob` 是 Vite 提供的一个强大特性，用于动态导入资源，尤其是适用于处理 Vue 组件的动态导入。 ...
vite+vue3使用模块化批量发布Mockjs接口
03-29
在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...
关于VUE中使用three.js的一些报错
Lph574的博客
05-27 2362
看了官方文档并没有说明关于gltf文件路径的问题，在网上也查询了很多，解决方法五花八门但是一个有用的都没有。有的说安装依赖包，有的说修改vue.config.js，有人说采用import引入等等之类的，但是均无作用。最终在和朋友的讨论后，得知gltf格式文件默认是在public文件下，随即去试了一下成功解决。今天在使用three.js进行渲染gltf格式三维模型时，控制台报错404。原来问题的解决是如此简单，所以发出来希望能避免大家重蹈覆辙 ，拒绝踩坑！
warnings (imported as 'THREE') was not found in 'three'
热门推荐
出埃及记
12-29 1万+
这个问题还没解决！ 用Vue.js 重构项目的时候，引入three.js和其他相关的东西的时候会出现上面的警告。今天就说一下这个解决办法，但是我觉得这个方法不一定适用所有的项目。 一、引入THREE 首先用 npm 安装了 three, 然后再项目里面引入了。如下代码所示。 import * as THREE from 'three' 这个时候还需要引入其他three.js 的方法。比...
threejs导入import报错
helloyangkl的博客
06-14 231
【代码】threejs导入import报错。
使用vite工具创建Vue.js 3.0项目，启动项目时报错js语法错误
m0_46829545的博客
05-20 2167
使用vite工具创建Vue.js 3.0项目，启动项目时报错js语法错误
# Vue3里引入three.js报错
OldStreet61的博客
05-17 1685
vue3引入three报错： property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value 原因：`在这里插入代码片 在vue.config.js 引入three，配置第三方插件 const ThreeExamples = require('three') // 第三方插件配置
vue3使用Threejs不生效找不到THREE，换个版本试试
最新发布
游九尘的博客
06-20 267
【代码】vue3使用Threejs不生效找不到THREE，换个版本试试。
vue3.0+ts+vite的项目安装three.js的项目发布遇到的坑
张先森的博客
05-25 1941
vue3.0+ts+vite的项目安装three.js的项目发布遇到的坑
通过vite3+Vue，以及ar.js实现webAR手机端展示。
06-23
本资源含报告及代码和模型。 可以通过自然图片（nft训练）实现视频和...使用方法，“npm run dev -- -- https” 启动Vue3并支持https协议。 然后手机连接电脑所在局域网，访问网址即可成功。 喜欢的话就直接下载吧。
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
最新完整Vite+Vue3+TypeScript项目实战.zip
05-10
最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新...
使用npm安装three.js无法使用的问题
lyx灬的博客
11-24 671
之前在网上看见过这种方式，然后在本机上是无效的，之前在这里也是无效，但是把node卸了重新装且在管理员模式下，成功了，可能和步骤有关系，下面列出操作步骤。开始在公司的电脑（没有管理员权限），然后使用失败，后面回家用自己的电脑，有管理员权限还是会报这个问题，之后对于three进行了降版本安装，然后就解决了。的这个引用是无效的，问朋友说什么打包工具啥的关系，叫我用框架说不定就解决了，还没有去尝试，如果前面这两种都碰到问题的朋友可以尝试去试下这种方法。虽然解决了，但感觉还是没有从根本上解决为什么。
Threejs进阶之一：基于vite+vue3+threejs构建三维场景
九仞山的专栏
04-19 2901
详细介绍了vite+vue3+threejs搭建三维场景的过程，并通过加载glft文件来实现在三维场景中模型加载的过程及注意事项
vue3+Three.js入门：创建第一个3D案例
qq4833221的博客
12-05 975
想要定义物体的外观就需要Material相关的API来实现，不同的材质所实现的效果也不同//创建一个材质对象Material并设置颜色 （漫反射材质）});
VUE3+ VITE 使用Three.js展示3D模型
Jayce_he的博客
05-11 2631
VUE3+ VITE 使用Three.js展示3D模型
Vue3+ts+vite+THREE项目示例
qq_41400354的博客
01-15 1682
THREE在vite中的一个示例 安装yarn add three 或者 npm/cnpm i three -S 1、创建canvas对象给three创建容器 <template> <canvas id="three" width="1200" height="900"></canvas> </template> tip:这里要是canvas标签，3D场景基于canvas构建的。 2、引入three <script lang="ts" se
vue3 + vite 中使用 three.js
ZengYue_D的博客
07-29 2643
cnpm install three --save 需要的页面 import * as THREE from “three” 引入即可开发，也可以按需引入 问题 引入 OrbitControls (相机轨道控制器) ： import OrbitControls from ‘three/examples/js/controls/OrbitControls’ 抛出异常 ReferenceError: THREE is not defined ，遂面向谷歌寻找方案 ，辗转腾挪最后在 这里 找到了问题 .
vite + vue3 + Vtk.js28版本+Itk.js14版本实现加载stl模型,并且进行四视图分割功能
06-09
好的，我会尽力回答你的问题。首先，你需要安装vite和vue3，可以在命令行中使用以下命令进行安装： ``` npm install -g vite npm install vue@next ``` 然后，你需要安装Vtk.js28版本和Itk.js14版本。你可以在以下链接中找到安装指南： - https://kitware.github.io/vtk-js/docs/installation.html - https://insightsoftwareconsortium.github.io/itk-js/docs/installation.html 接下来，你可以创建一个Vue3项目，并将Vtk.js和Itk.js添加到项目中。在`main.js`文件中，你可以添加以下代码： ```javascript import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow'; import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader'; import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'; import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'; import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer'; import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera'; import { readImageArrayBuffer } from 'itk'; // 加载STL模型 function loadSTLModel(renderer, filePath) { const reader = vtkSTLReader.newInstance(); reader.setUrl(filePath).then(() => { const mapper = vtkMapper.newInstance(); const actor = vtkActor.newInstance(); mapper.setInputData(reader.getOutputData()); actor.setMapper(mapper); renderer.addActor(actor); renderer.resetCamera(); }); } // 加载ITK图像 async function loadITKImage(renderer, filePath) { const arrayBuffer = await readImageArrayBuffer(filePath); // TODO: 在这里添加ITK图像的处理代码 } // 创建四个渲染器 function createRenderers(container) { const renderers = []; for (let i = 0; i < 4; i++) { const renderer = vtkRenderer.newInstance(); renderer.setViewport([(i % 2) * 0.5, Math.floor(i / 2) * 0.5, (i % 2) * 0.5 + 0.5, Math.floor(i / 2) * 0.5 + 0.5]); renderers.push(renderer); } const fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({ rootContainer: container, containerStyle: { height: '100%', display: 'flex', }, }); renderers.forEach((renderer) => { fullScreenRenderWindow.addRenderer(renderer); }); return renderers; } // 初始化交互器 function initInteractor(renderer) { const interactor = renderer.getRenderWindow().getInteractor(); const style = vtkInteractorStyleTrackballCamera.newInstance(); interactor.setInteractorStyle(style); } // 在四个渲染器中分别加载STL模型和ITK图像 function loadModels(container, stlFilePath, itkFilePath) { const renderers = createRenderers(container); renderers.forEach((renderer) => { initInteractor(renderer); loadSTLModel(renderer, stlFilePath); loadITKImage(renderer, itkFilePath); }); } // 加载模型 loadModels(document.getElementById('container'), 'path/to/stl/file.stl', 'path/to/itk/file.mha'); ``` 在上述代码中，我们首先导入了所需的Vtk.js和Itk.js模块。然后，我们定义了三个函数：`loadSTLModel`用于加载STL模型，`loadITKImage`用于加载ITK图像，`createRenderers`用于创建四个渲染器。接下来，我们定义了`initInteractor`函数来初始化交互器。最后，我们定义了`loadModels`函数来在四个渲染器中分别加载STL模型和ITK图像。 你可以将上述代码复制到你的项目中，并根据实际情况修改文件路径和其他参数。希望这可以帮助你实现加载STL模型并进行四视图分割功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值