下载threejs在本地运行加载不出来的情况

最新推荐文章于 2024-07-27 10:20:41 发布
最新推荐文章于 2024-07-27 10:20:41 发布
阅读量2.7k 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44092085/article/details/107563456
版权

下载完threejs 之后 运行出现
three.js-master/three.js-master/examples/fonts/ttf/kenpixel.ttf net::ERR_FAILED
类似的报错 是跨域问题（但是再具体原因我就不知道了，有大神可以给我讲一讲呗）
看了别人的提示，要在本地起一个服务
在three.js-master下安装npm install -g http-server
命令行进入这个目录下，输入 http-server
然后命令行会出现
在这里插入图片描述
在浏览器中输入
http://127.0.0.1:8081/examples/xxxxxxxx.html
(xxxxxxxx 就是example下边的html的名字)
就能出现字体或者资源了

希望下次能记住
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Threejs 问题——模型引入后并未加载出来
虎康的博客
01-25 754
目前测试 在 public/static/ 引入时不会发生此错误并渲染成功。如果没有此报错且模型没渲染出来, 可以尝试刷新标签页或者异步请求模型方法。Threejs 模型引入后并未加载出来。该问题是由于引入OBJ模型路径报错。
本地预览html不加载js,Three.js跨域问题(无法预览)
weixin_42138376的博客
06-09 1338
Three.js跨域问题通过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过程，需要建立本地服务器来解决，如果不这样直接使用浏览器打开加载三维模型的.html文件，会出现报错无法模型文件无法加载，浏览器控制报错跨域问题的情况。浏览器控制台报错：three.js:30833 Access to XMLHttpRequest at 'file://....' fro...
three.js中文文档学习之如何本地运行详解
11-27
前言 本文属于系列问题，需要的朋友们开始之前可以参考以下的两篇文章： 1、three.js中文文档学习之创建场景 2、three.js中文文档学习之通过模块导入 如果你只是使用程序化的几何体，不需要加载任何材质，网页应该直接从文件系统加载，只需要双击文件管理器中 HTML 文件，应该在你的浏览器能够运行（地址栏长这样子：file:///yourFile.html） 从外部文件加载内容 如果你从外部文件下载模块和材质，由于浏览器的 同源政策 的安全限制，会引发安全异常而加载失败。 有两种解决办法： 在浏览器中对于本地文件修改安全性。你才能这样进入网页： file:///yourFile.h
three.js的编译器editor文件打开空白问题
最新发布
qq_69814495的博客
07-27 148
4.然后找到editor文件目录下的index.html文件，右键点击open with live server，就可以了。1.在run npm start的时候，通过快捷键ctr+单击：localhost:8080打开本地文件。3.解决方法：前提是下载了live server插件。
threeJs模型加载不出来
hairline_ball的博客
12-23 2289
threeJs外部模型加载不出来怎么办，多半是脚手架没用对 threeJs对模型路径有要求,vue-cli3 要存放在public下面，(vue-cli2我不管存放在哪里都不出来，不报错)。vue-cli3目录结构为: 边学边写中，以上个人理解或许有误，或许只讲对一部分 ...
使用three.js加载模型在本地有，放到线上就出不来
weixin_45960031的博客
01-03 574
使用three.js加载第三方模型，模型在本地有，放到线上就出不来
【three.js】本地搭建Threejs官方文档网站 解决threejs官方文档打开过慢得到问题
weixin_44079209的博客
02-03 1351
因为Three.js官网是国外的服务器，所以为了方便学习和快速的查阅文档，我们可以自己搭建Three.js官网和文档，方便随时查看案例和文档内容进行学习。可以通过网址，找到具体的案例代码，如此处的文件名称是：webgl_animation_keyframes。官方提供的可视化编辑器，可以直接导入模型，修改材质，添加光照效果等等。根据地址栏的信息 可以再源码中找到对应的源码位置。使用命令 npm i 或者使用yarn i。3、下载好项目之后解压缩。7、 查看官方提供的案例。4、安装项目需要的依赖。
three.js 3D模型的一些问题记录
hehe_CSDNALS的博客
01-27 548
1.首先在github下载好three.js工程后 直接打开是不可以的，有相关介绍，其实就是不能文件夹直接打开到那时可以用域名打开， 本地配置下iis环境即可，例如 http://127.0.0.1/three.js-dev/examples 这样可以直接打开index页面，然后浏览 2.打开之后你会发现有些场景打开后不正常，模型或者贴图没有加载出来 解决方法：在iis配置管理器里面设置mime类型，点击进入，然后右边会有一个添加 像我这样添加就行； 然后打开之后就可以正常显示了： 3：替换模型时
cesium整合tihreejs 在地球加载threejs 三维模型
03-12
确保Cesium加载完成后，再加载Three.js，因为Three.js的模型将在Cesium的场景中显示。 2. **创建Cesium Viewer**：使用Cesium的`Cesium.Viewer`构造函数初始化一个3D地球视图。设置容器ID，选择合适的导航和时间...
Vue使用Three.js加载glTF模型的方法详解
12-30
在本文中，我们将深入探讨如何在Vue.js应用中利用Three.js库来加载和展示glTF（GL Transmission Format）3D模型。glTF是一种开放标准格式，用于高效地传输和加载三维场景和模型，广泛应用于游戏开发、虚拟现实和增强...
在vue中使用three.js 1.0--本地搭建Threejs官方文档网站
m0_50207524的博客
03-30 372
threejs官方文档在使用threejs 会出现官网加载比较慢和白屏的情况，本地搭建threejs官网可以很好的解决这个问题。
three.js加载3d模型_ThreeJS:几何体相关(BufferGeometry)
weixin_39760389的博客
11-24 631
使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销可以自定义顶点位置, 面片索引, 法向量, 颜色值作者:随遇丿而安出处:https://www.cnblogs.com/xiaxiangx/p/13849204.html1. BufferGeometry使用初体验在之前的学习中, 我是已经了解到建立一个3d场景, 不知道屏幕前的你是否有了解到, threejs...
【Three.js】解决使用Three.js导入obj模型不可见问题详细记录
DJames23的博客
06-04 7534
问题描述： 近期在做三维重建项目，需要把最终生成的obj文件导入到web端浏览，这里使用的是three.js（另一个是babylon.js），但博主发现导入meshlab生成的obj时无法显示模型，但使用3dmax制作好的obj模型就可以正常加载。 分析问题： 1.首先怀疑是Three.js无法识别meshlab导出的obj模型 查看使用3dmax导出的obj模型和meshlab导出的obj模型的内容差异： 3dmax： mtllib .\hezi.mtl # # object Box001 # v -
three.js加载模型失败（跨域问题）
bcbobo21cn的专栏
06-22 1510
CORS，全称Cross-Origin Resource Sharing......；
使用npm安装three.js无法使用的问题
lyx灬的博客
11-24 751
之前在网上看见过这种方式，然后在本机上是无效的，之前在这里也是无效，但是把node卸了重新装且在管理员模式下，成功了，可能和步骤有关系，下面列出操作步骤。开始在公司的电脑（没有管理员权限），然后使用失败，后面回家用自己的电脑，有管理员权限还是会报这个问题，之后对于three进行了降版本安装，然后就解决了。的这个引用是无效的，问朋友说什么打包工具啥的关系，叫我用框架说不定就解决了，还没有去尝试，如果前面这两种都碰到问题的朋友可以尝试去试下这种方法。虽然解决了，但感觉还是没有从根本上解决为什么。
three出现状态200的报错
07-30 83
报错代码如下： {status: 200, data: {…}} "sa_SpringUserFindOneView_findPbUserByUserId"header.vue?1c65:163 {status: 200, data: {…}} "sa_SpringMsgUnreadNumView_unreadMsgNum"index.js?f446:60 原因：图片没加载。...
求助！three.js加载模型
m0_46567079的博客
03-26 161
求助！毕业设计用到three.js导入三维模型，网页打开一片黑，因为是刚刚接触没有经验，有没有大手子帮帮我，代码如下（用vs写的html）
npm运行没反应的问题
qwguo
06-19 2393
我们不管运行npm的什么命令都是一闪然后就没有任何输出，我们在经常切换node版的时候会遇到。文件然后把这个文件删除了，在运行。
新手刚接触three.js的一些报错问题及解决方法
QWY1285236058的博客
09-03 2624
three.js的报错
threejs 运行GLB 文件
07-09
three.js 是一个基于 JavaScript 的 3D 图形库，它允许你在 Web 浏览器上创建、交互和渲染复杂的三维场景。如果你想在 three.js 中运行 GLB 文件（GL Transmission Format），这是一种高效的压缩文件格式，包含了 3D 模型的数据、纹理和动画等信息，你可以按照以下步骤操作： 1. **加载库**：首先确保已经引入了 three.js 和它的 GLTFLoader（用于加载 GLB 等格式）。可以在项目中通过 CDN 或者本地引入相应的 JavaScript 文件。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; ``` 2. **创建场景和相机**：设置一个基本的 Three.js 场景和视角。 ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); ``` 3. **加载 GLB 文件**：创建 `GLTFLoader` 实例并使用 `.load()` 方法加载模型。 ```javascript const loader = new GLTFLoader(); loader.load('path_to_your_model.glb', function(gltf) { // gltf 是一个对象，包含着加载完成后的模型数据 const model = gltf.scene; scene.add(model); // 将模型添加到场景中 }, undefined, function(error) { console.error(error); }); ``` 4. **设置视口和渲染**：配置 WebGL 渲染器，然后在循环中更新渲染。 ```javascript const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值