时间戳

首页 > 解决方案 > 在TextGeometry的three.js中加载字体时出现CORS策略错误

javascript - 在TextGeometry的three.js中加载字体时出现CORS策略错误

问题描述

我正在学习three.js。我试图显示一些文本，但在加载字体文件时出现 CORS 策略访问被阻止错误。我检查了传递的路径是否正确，尝试将文件放在不同的位置，但仍然没有。这是我加载文本的代码：

var loader = new THREE.FontLoader();
loader.load('../Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json', function(font) {

  var geometry = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 80,
    height: 1,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });
});

我得到的错误是：

从原点“null”访问“file:///A:/Code/IIITH/computer-graphics-iiith/SRIP/Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json”处的 XMLHttpRequest被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

我可以请帮助解决此错误吗？我还在学习three.js，不详细了解。我犯了什么错误？

标签： javascriptthree.js

解决方案

此问题与 Three.js 无关。

这是浏览器实施的一种安全措施，旨在保护用户免受多种威胁。您可以在这篇文章中找到有关其工作原理的更多详细信息：

“仅 HTTP 支持跨源请求。” 加载本地文件时出错

这就是 Three.js 建议您处理此限制的方式：How to run things local

推荐阅读