CODEWITHSUNDEEP
javascriptthree.js
Laiqa Mohid
Laiqa Mohid

Reputation: 561

Can't seem to add text to scene in three.js

I'm new to three.js and im trying to make some basic code work. However I get this error everytime. I thought I was adding it to the scene after using loader.load so I'm confused why this is happening.

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

Upvotes: 0

Views: 1095

Answers (2)

user128511
user128511

Reputation:

2 problems:

  1. you don't add Geometry like TextGeometry to a Scene. You add things like Mesh which take a Geometry and a Material to Scene

  2. The camera being 6 units away from text that is 80 units tall means you basically won't see anything. Moved the camera 900 units away

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>

You might find these articles helpful.

Upvotes: 2

kman
kman

Reputation: 2257

I don't see where you're setting up your scene object.

Did you just not include that part? Otherwise try pasting this at the top:

const scene = new THREE.Scene();

Upvotes: 0

Related Questions