似乎无法在 three.js 中向场景添加文本

Question

我是three.js 的新手，我正在尝试制作一些基本代码。但是我每次都会收到这个错误。我以为我是在使用 loader.load 后将其添加到场景中，所以我很困惑为什么会发生这种情况。

• “three.js:5348 THREE.Object3D.add：对象不是 THREE.Object3D 的实例。”

JS-

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // add the renderer to html


camera.position.z = 6;

const loader = new THREE.FontLoader();

loader.load('font/UniversalSans-450_Regular.json', function (font) {
   // TextGeometry(String, Object)
   const textObj = new THREE.TextGeometry('Im trying', {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
   });
   scene.add(textObj);
});


function animate() {
   requestAnimationFrame(animate);
   renderer.render(scene, camera);

}

animate();

Answer 1

2 个问题：

1. 您不会像 TextGeometry 一样将 Geometry 添加到 Scene。您添加诸如Mesh 之类的内容，将Geometry 和Material 添加到Scene

2. 相机距离 80 单位高的文本 6 个单位意味着您基本上看不到任何东西。将相机移开 900 个单位

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // add the renderer to html


camera.position.z = 900;

const loader = new THREE.FontLoader();

loader.load('https://threejsfundamentals.org/threejs/resources/threejs/fonts/helvetiker_regular.typeface.json', function (font) {
   // TextGeometry(String, Object)
   const textObj = new THREE.TextGeometry('Im trying', {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
   });
   const material = new THREE.MeshBasicMaterial({color: 'red'});
   const mesh = new THREE.Mesh(textObj, material);
   scene.add(mesh);
   console.log('foo');
});


function animate() {
   requestAnimationFrame(animate);
   renderer.render(scene, camera);

}

animate();

body { margin: 0; }

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>

您可能会发现these articles 很有帮助。

Answer 2

我看不到您在哪里设置 场景 对象。

你只是没有包括那部分吗？否则尝试将其粘贴在顶部：

const scene = new THREE.Scene();