Блог

Я новичок в three.js и я пытаюсь заставить работать какой-то базовый код. Однако я получаю эту ошибку каждый раз. Я думал, что добавляю его в сцену после использования loader.загрузка так что я в замешательстве, почему это происходит.

• «три.js: 5348 ТРИ.Object3D.add: объект не является экземпляром из ТРЕХ.Объект 3D».

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();
 

2 проблемы:

1. вы не добавляете Geometry » нравится TextGeometry » к Scene » а » . Вы добавляете такие вещи, как Mesh , которые принимают a Geometry и a Material в Scene
2. Камера, находящаяся на расстоянии 6 единиц от текста высотой 80 единиц, означает, что вы практически ничего не увидите. Переместил камеру на расстояние 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> 

Вы можете найти эти статьи полезными.

Я не вижу, где вы настраиваете свой объект сцены.

Вы просто не включили эту часть? В противном случае попробуйте вставить это вверху:

 const scene = new THREE.Scene();