Vue에서 ThreeJ’s FontLoader를 사용하는 방법

by

3.js로 텍스트를 만들고 싶다.그래서 폰트를 로딩하려고 하는데 안 돼요. 왜요?

const loader = new FontLoader();
loader.load(
'http://localhost:8080/src/store/fonts/noto_sans_kr_regular.json',
font => {
const color = 0x006699;
const matLite = new Three.MeshBasicMaterial({
color: color,
transparent: true,
opacity: 0.4,
side: Three.DoubleSide,
});
const message = '
Three.jsnSimple text.';
const shapes = font.generateShapes(message, 100);
const geometry = new Three.MeshBasicMaterial(shapes);
geometry.computeBoundingBox();
const xMid =
-0.5 *
(geometry.boundingBox.max.x - geometry.boundingBox.min.x);
geometry.translate(xMid, 0, 0);
// make shape ( N.B. edge view not visible )
const text = new Three.Mesh(geometry, matLite);
text.position.z = -150;
state.scene.add(text);
}, );

위는 나의 소스 코드이고 아래는 내가 시도한 방법이다.

loader.load('http://localhost:8080/src/store/fonts/noto_sans_kr_regular.json'
loader.load('http://localhost:8080/@/store/fonts/noto_sans_kr_regular.json'
loader.load('/noto_sans_kr_regular.json'
loader.load('@/store/fonts/noto_sans_kr_regular.json'
loader.load('/src/store/fonts/noto_sans_kr_regular.json'
loader.load('./fonts/noto_sans_kr_regular.json'

이것은 에러 코드입니다.

enter image description here

글꼴 파일의 경로입니다.

enter image description here

코드의 다른 부분이 필요한지 모르겠습니다.미안하다.



질문에 대한 답변



특정 디렉토리에서 로드하는 방법을 잘 모르겠습니다만,public다음 코드로 동작합니다.

<template>
<div id="app">
<canvas ref="canvas"></canvas>
</div> </template>
<script> import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'; import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'; import { Mesh, MeshNormalMaterial, WebGLRenderer, PerspectiveCamera, Scene } from 'three'
export default {
mounted() {
const loader = new FontLoader()
const scene = new Scene();
const camera = new PerspectiveCamera(75, 800 / 600)
camera.position.set(70, 0, 100)
const renderer = new WebGLRenderer({
canvas: this.$refs.canvas,
})
renderer.setSize(800, 600)
loader.load("/macondo_font.json", function (font) {
const textGeometry = new TextGeometry("Hello world!", {
font,
size: 20,
height: 5,
curveSegments: 12
});
const material = new MeshNormalMaterial();
const textMesh = new Mesh(textGeometry, material);
scene.add(textMesh);
renderer.render(scene, camera)
});
}, } </script>

생성된 JSON 파일의 글꼴도 factype.js로 전송해야 합니다(a)..ttf3D 영역에서는 실제로 이와 유사한 것을 사용할 수 없습니다.)

다음은 제 프로젝트의 구조 + 예시에 사용한 Macondo 글꼴입니다.

enter image description here