threejs加载glb 跨域 小记

最新推荐文章于 2024-02-28 15:23:35 发布
最新推荐文章于 2024-02-28 15:23:35 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 小记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41164787/article/details/119762849
版权

threejs 读取 oss 路径的glb 文件 一直报跨域错误

解决方案：
上传到oss 的时候 给 Header 添加 2条属性

     objectMetadata.setHeader("Access-Control-Allow-Origin","*");
     objectMetadata.setHeader("Access-Control-Allow-Credentials","true");
饭酱
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ThreeJS加载glb模型实用案例
01-26
ThreeJS加载glb模型实用案例，抽取官网的例子。
简单谈一下解决前端跨域的方法
dhemz20268的专栏
12-26 88
首先说一下跨域，跨域只存在前端，浏览器端如果一个页面页面请求非同ip或端口的请求，就会产生跨域的问题。那怎么解决呢？ 1. 通过ngix的软代理。 2. 把请求改成 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");通...
如何解决跨域？
Asrty的博客
11-22 737
怎么解决跨域？
threejs加载glb模型变黑
weixin_42959900的博客
02-28 559
threejs加载模型变黑的解决办法。
我的计划
哈哈哈
09-09 140
计划
Threejs加载外部glb文件
qq_37772059的博客
04-19 3916
1.页面html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pb展示</title> <!--引入three.js三维引擎--> <scrip
ThreeJS 跨域
guzicheng1990的博客
05-22 1758
环境 ThreeJS 107版本 three.min.js 说明 给地球贴图片材质时，发现报错图片跨域了。 解决方案 方案一 网上找到方法修改threejs.module.js文件中的ImageLoader.prototype 参考原文地址：https://blog.csdn.net/qq_41923622/article/details/103756549 在return之前加上image.crossOrigin=’’ 方案二 方案一是用源码的情形下，我这是直接用的压缩包three.mi.
Vue+Three.js建造3D小房子
qq_57585993的博客
03-14 4133
Vue结合Three.js建造3D小房子，可拖拽可点击，超详细，有源代码。
VUE+Three.js(添加边框，改变颜色，切换模型，模型爆炸)
qq_29509389的博客
04-08 713
VUE+Three.js：添加边框，改变颜色，切换模型，模型爆炸VUE+Three.js模型原型效果单击模型部件着色单击模型部件添加边框双击模型部件放大，单独展示该部件右键模型部件添加文字标签模型切换模型爆炸效果实现 VUE+Three.js 模型原型效果 单击模型部件着色 单击模型部件添加边框 双击模型部件放大，单独展示该部件 右键模型部件添加文字标签 模型切换 模型爆炸效果实现
three.js加载模型失败（跨域问题）
bcbobo21cn的专栏
06-22 1309
CORS，全称Cross-Origin Resource Sharing......；
学习笔记（1):Web 3D机房，智能数字机房HTML5+Threejs(WebGL) 项目实战四-机房功能效果...
qq_33134459的博客
07-21 758
针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解，随着IT信息技术和移动端的发展，Html5+3D(Webgl)技术已经悄然崛起，3D机房数据中心可视化应用越来越广泛，主要包括3D机房搭建，机柜、服务器、机房功能效果、温度检测(动力环境监控)、机柜利用率(可用空间)、烟雾监控(粒子效果)、巡航导航(巡更路径)、设备报警。 threejs 98版本 开发环境（ID...
Three.js跨域问题Cross origin
u014291990的博客
06-13 5798
Three.js跨域问题 通过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过程，需要建立本地服务器来解决，如果不这样直接使用浏览器打开加载三维模型的.html文件，会出现报错无法模型文件无法加载，浏览器控制报错跨域问题的情况。 个人WebGL/Three.js技术博客 浏览器控制台报错： three.js:30833 Access to XMLHttpRequ...
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
Threejs显示glb模型线框效果
05-17
本例子加载glb文件，显示一个房子的模型的线框。 用traverse遍历模型里的所有子对象，如果是网格对象用child.material.wireframe = true;使其显示线框。 相关技术英文网站搜索关键字：three.js model wireframe
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
threejs测试文件格式汇总
12-05
threejs加载文件并不常见，现将threejs加载所需的文件（包括obj、gltf、glb、pcd、nrrd、3ds等多种格式文件）汇总
混合动力无人船上位机.zip
最新发布
05-05
无人机最强算法源码，易于部署和学习交流使用
Swing界面开发和游戏开发.docx
05-05
Swing界面开发和游戏开发.docx
xx国际集团母子管控诊断报告(宣讲)gl.ppt
05-05
xx国际集团母子管控诊断报告(宣讲)gl.ppt
threejs加载glb
10-20
three.js是一款用于创建和渲染3D图形的JavaScript库。要加载.glb文件（即包含3D模型和相关材质的文件），我们可以使用three.js提供的GLTFLoader加载器。 首先，我们需要在项目中引入three.js库以及GLTFLoader。通过在HTML文件中添加以下脚本标签，可以引入这两个资源： ``` <script src="https://threejs.org/build/three.js"></script> <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script> ``` 接下来，我们可以在项目中创建一个canvas元素，用于显示3D场景： ``` <canvas id="canvas"></canvas> ``` 然后，我们可以在JavaScript代码中使用以下方法来加载.glb文件并创建一个3D场景： ```javascript // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("canvas")}); renderer.setSize(window.innerWidth, window.innerHeight); // 创建光源 const ambientLight = new THREE.AmbientLight(0xffffff); scene.add(ambientLight); // 使用GLTFLoader加载.glb文件 const loader = new THREE.GLTFLoader(); loader.load( 'path/to/model.glb', function (gltf) { scene.add(gltf.scene); }, undefined, function (error) { console.error(error); } ); // 创建动画循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在上述代码中，我们首先创建了一个场景、相机和渲染器。然后，我们创建了一个环境光源，并使用GLTFLoader加载.glb文件。加载成功后，我们将模型添加到场景中。最后，我们创建一个动画循环，来实时渲染场景。 需要注意的是，你需要将路径`'path/to/model.glb'`替换为你实际的.glb文件路径。 通过上述步骤，你就可以使用three.js加载和展示.glb文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭酱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值