三.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) in THREE.js

Question

尝试在 THREE.js 中创建文本加载器，但出现错误，而不是我创建的文本

three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404（未找到）

这个错误来了，我尽力解决它，但我无法得到任何解决方案 这是我之前的问题链接Text Loader is not loading in THREE.js

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
import typefaceFont from "./fonts/helvetiker_regular.typeface.json";

/**
 * Fonts
 */
const fontLoader = new FontLoader();

fontLoader.load(typefaceFont, (font) => {
  const textMaterial = new THREE.MeshBasicMaterial();

  const textGeometry = new TextGeometry("Hello Three.js",
   {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        beveloffset: 0,
        bevelSegments: 5
    }
  );

  const text = new THREE.Mesh(textGeometry, textMaterial);
  scene.add(text);
});
/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader();

/**
 * Object
 */
// const cube = new THREE.Mesh(
//     new THREE.BoxGeometry(1, 1, 1),
//     new THREE.MeshBasicMaterial()
// )

//scene.add(cube)

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

Answer 1

你的问题就在你的错误中。

http://192.168.8.104:8080/[object%20Object]

这意味着您将对象作为 URL 传递。这可以从线条中看出...

import typefaceFont from "./fonts/helvetiker_regular.typeface.json";

fontLoader.load(typefaceFont, (font) => {
  //...
});

您正在 import 处理一个 JSON 文件，然后将导入的值传递给 load 函数。

假设您使用的是捆绑器（webpack、rollup、parcel 等），import 会以Object 的形式引入数据。

但是，load 期望 URL 为 String。

要正确使用字体加载器，请删除 import 并传递 URL 字符串：

fontLoader.load("./fonts/helvetiker_regular.typeface.json", (font) => {
  //...
});