三.JSL:加载Blender模型需要本地服务器吗?

2024-03-02

我正在使用 Three.js 开发基于 Web 的 3D WebGL 应用程序。我正在尝试使用以下代码加载“Blender”模型 JS 文件:

var loader = new THREE.JSONLoader();
    var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load( "../build/MySampleModel.js", addModelToScene );
    // addModelToScene function is called back after model has loaded

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);

    function addModelToScene( geometry, materials ) 
    {
        var material = new THREE.MeshFaceMaterial( materials );
        meshObj = new THREE.Mesh( geometry, material );
        meshObj.scale.set(10,10,10);
        meshObj.add( android );
    }      

当我在 Chrome 浏览器中对此进行测试时,它不会加载模型并给出以下错误:

THREE.WebGLRenderer 59dev three.min.js:417
XMLHttpRequest cannot load file:///Users/xxxx/Desktop//THREE_JS_3DWEB/Dev/three.js-dev/build/MySampleModel.js. Cross origin requests are only supported for HTTP. three.min.js:211
THREE.JSONLoader: [../build/HouseModel.js] seems to be unreachable or file there is empty three.min.js:210
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 three.min.js:211

我的机器上没有运行任何本地服务器。在基于 Three.js 的项目中是否需要运行本地服务器来加载 Blender 模型 JS 文件?

(当我尝试运行名为“webgl_loader_json_blender.html”的 Three.js 示例文件(该文件使用加载搅拌机模型)时,在运行本地 apache 服务器的 Eclipse 中,当我运行“webgl_loader_json_blender.html”时,它能够正确加载搅拌机文件“在 Chrome 浏览器中。)


我不是专家,但你的问题似乎是浏览器的“同源策略”安全限制的问题。检查 Three.js 存储库中的此链接:https://github.com/mrdoob/ Three.js/wiki/How-to-run-things-locally https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

根据我的经验,使用 Mozilla Firefox(而不是 Chrome)加载本地模型会更容易。

所以答案是no,服务器不需要加载模型。

祝你好运!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

三.JSL:加载Blender模型需要本地服务器吗? 的相关文章

  • Three.js - 从点缩放圆柱体

    是否可以从特定点开始增加 Y 轴上圆柱体的比例 与圆柱体从其原点向上和向下生长到新比例不同 它只是像条形图一样从顶部向上 向下生长 当前代码 function animate render cylinder scale y 0 1 requ
  • 使用 OrbitControls 时锁定 x 轴旋转 - Three.js

    使用 OrbitControls 时锁定 x 轴旋转是否可行 目前我有一个挂在绳子上的圣诞星的对象模型 我希望它仅水平旋转 对于您的 OrbitControls 实例集 controls minPolarAngle Math PI 2 co
  • 如何在 Three.js 中使用反射?

    我想在带有 Three js 的 WebGL 页面中拥有一个反射立方体表面 它应该类似于手机显示屏 反射一些光 但它仍然必须是黑色的 我创建了一个反射立方体 以及反射球体 的示例 并附有详细的注释 现场版本位于 http stemkoski
  • Material.alphaTest 是什么意思?

    在过去的几天里 我一直在非相交对象的透明度方面遇到重大问题 我遇到了设置的建议alphaTest将材料的值调整为0 5 从而解决了问题 太好了 但我想更好地理解它的含义以及它如何如此优雅地解决问题 有人可以建议吗 从一个简单的实验来看 这似
  • 绕局部轴旋转

    我正在尝试实现一个对象 围绕一个位置 POI 兴趣点 飞行并面向它 当您按 WASD 时 您可以更改 POI 的旋转 A 和 D gt 更改 y 轴 W 和 S 更改 x 轴 正如您在演示中看到的 http jsbin com yodusu
  • 将 A 框架与 Three.js 相结合

    我想知道 是否可以将 Three js 元素添加到 A 框架场景中 假设 A frame 是基于 Three js 构建的 并且 three Version 0 74 0 登录到你的控制台这不应该是一件奇怪的事情 对吧 我在我的 A 框架场
  • Three.js 中的文本几何

    我在 Three js r74 中的 TextGeometry 遇到一些问题 我该如何正确实施 这是我的代码笔 codepen io cheesyeyes pen eJqZxK 提前致谢 好吧 对于每个正在寻找简单答案而不是链接和其他超载示
  • Three.js 中几何图形的事件处理? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在寻找对 Three js 中的几何图形 相机 灯光 我们添加到场景中的东西 进行某种事件处理 我用谷歌搜索但找不到任何相关内容
  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation
  • FontLoader 和 TextGeometry 未在 Threejs 中正确导入

    我正在尝试在 BoxGeometry 侧面的前 右 左和顶部添加 3D 文本 我实现了这个代码如下 loadFont gt const loader new THREE FontLoader loader load https threej
  • 扩展 Three.js 类

    我想扩展 Three js Object3D 类 但不知道该怎么做 有一个 Stackoverflow 问题 我已经阅读 重新阅读和尝试过 但无法让它为我工作 有没有办法扩展 ThreeJS 对象 https stackoverflow c
  • 在 React 中渲染 Three.js 元素?

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac
  • 调试 Three.js 中的低 FPS

    我正在处理 Three js WebGL 场景 当我缩小时 我注意到 60 FPS 以便所有观察结果 约 20 000 个三角形 都在视图中 但当我放大时 FPS 非常低 因此只有一个小三角形的子集在视野中 我想弄清楚是什么导致了这种差异
  • 在 Three.js 中将贝塞尔曲线转换为平面道路

    我试图根据之前计算得到的一些贝塞尔曲线在 Three js 中绘制一条弯曲的道路 问题是我找不到转换曲线序列的方法 一条从上一条曲线的末尾开始 到一个曲面 我有一个 3D 场景 其中有一些汽车 一条用飞机创建的道路 并且绘制了即将到来的道路
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • Three.js 对象的“中心”是什么?

    当我使用 Blender 对对象进行建模时 我能够明确定义其发生平移和旋转的中心位置 当使用 Three js 对象时 我似乎没有找到等效的对象 Three js 对象是否具有定义其 中心 位置的属性 如果不是 物体的中心是如何确定的 在
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • 在 Three.js 中从 Web Worker 加载纹理

    当将大纹理图像应用到网格上一段明显的时间时 Three js 会锁定浏览器的主线程 让我们考虑以下示例 var texLoader new THREE TextureLoader texLoader load someLargeTextur
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 如何在 React Native 中渲染自定义 3D 对象

    我已经成功使用 Three js expo Three 和 expo gl 在 React Native 中配置了红色立方体的 3D 渲染 但我想让用户渲染他们自己可能拥有的自定义 3D 对象 obj 或 mtl 扩展名 但我不确定如何让他

随机推荐