TextGeometry failing to render

Currently experimenting with TextGeometry. Successfully implemented BoxGeometry, but encountering issues with TextGeometry.

Experimenting with different material options like MeshNormalMeterial, however, still unable to resolve the issue

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("banner").appendChild( renderer.domElement );
var loader = new THREE.FontLoader();
loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json', function ( font ) {
    var geometry = new THREE.TextGeometry( 'Hello three.js!', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelOffset: 0,
        bevelSegments: 5
    } );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var txt = new THREE.Mesh( geometry, material );
  scene.add( txt );
  function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    txt.rotation.x += 0.01;
    txt.rotation.y +=0.01;
  }
  animate();

} );

camera.position.z = 5;

No specific error message is being displayed

javascriptthree.js

Answer №1

Adjust the camera position and text geometry parameters to a more suitable setting.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 75;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.FontLoader();
loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json', function(font) {

  var geometry = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 10,
    height: 1,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: 0.25,
    bevelOffset: 0,
    bevelSegments: 5
  });
  geometry.center();

  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  
  var txt = new THREE.Mesh(geometry, material);
  scene.add(txt);

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    txt.rotation.x += 0.01;
    txt.rotation.y += 0.01;
  }
  animate();

});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to activate internet access on the Samsung Gear S2

When I press a toggle on a web application for the gear s2 (javascript), I send out an http request: ( function () { var led001Button = document.getElementById("Led001"), led002Button = document.getElementById("Led002"); function http ...

javascripthttprequesttizentizen-wearable-sdktizen-web-app

Is there a way to trigger a function with the onclick event in NextJs?

Working on my NestJS project, I am still a beginner in the field. My current task involves creating a web application that displays a leaflet map with clickable tiles. Each tile should have a button that triggers a specific function when clicked. However, ...

javascriptfunctionnext.jsleafletreact-leaflet

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

I have recently updated the typescript definitions in HunterLarco/twitter-v2, which now follows this structure: package.json src/ twitter.js twitter.d.ts Credentials.js Credentials.d.ts My goal is to verify that the .js files correspond correctly ...

javascriptnode.jstypescript

At what point in time does the LoadingFrameComplete event in Awesomium typically happen?

According to the documentation from Awesomium, the event WebView.LoadingFrameComplete is triggered when a frame finishes loading. This description seems somewhat ambiguous. Does this event coincide with the JavaScript load event of the window? Or perhap ...

javascriptdom-eventsawesomium

What is the best way to determine if two external values are equal within a mongodb criteria object?

Consider the following collection: {id: 1, name:"abc"}, {id: 2, name:null} When testing a property, I typically use this method: db.collecton.find({name:"abc"}, {name:1}); // This will return the first document. Now, I want to incorporate two external ...

javascriptnode.jsmongodb

The Module Design Pattern in Jquery

In my project, there is a jQuery module pattern that I am having trouble understanding its purpose. There is also a custom plugin called jquery.skInit.js (function($) { $.fn.skInit = function() { return this.each(function(i,element) { var e = ...

javascriptjquerygruntjspagespeedgrunt-contrib-uglify

A guide on utilizing nodejs to automatically open the default browser and direct it to a specific web address

I am currently developing a program using Node.js. One of the features I aim to implement is the ability to launch the default web browser and direct it to a particular URL. I want this functionality to be compatible across Windows, Mac, and Linux operat ...

javascriptnode.js

The suspense fallback function seems to be missing in NextJS 13

I'm in the process of creating an application to demonstrate the functionality of Suspense in Nextjs 13. However, I'm encountering an issue where the Suspense fallback is not appearing during loading. Below is the code for page.js import React, ...

javascriptreactjsnext.jsnext.js13react-suspense

Avoid the expansion of line decorations in Monaco editor

I am looking to create a Monaco editor line decoration that remains contained within its original position when I press enter after the decoration. For instance, in a React environment, if I set up a Monaco editor and add a line decoration using the code ...

javascripthtmlreactjstypescriptmonaco-editor

There seems to be an issue with Vue JS slots[name$1].every function as it is

I attempted to implement a custom isEmpty function for the Object prototype as follows: Object.prototype.isEmpty = function() { for (var key in this) { if (this.hasOwnProperty(key)) { return false } } return true } However, when tryin ...

javascriptvue.js

Memory Match: Picture Edition

In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...

javascripthtmlcss

Likelihood of triggering a function based on percentage

Hey everyone, I'm looking to add some randomness to the buttons on my website. I have a Button that could activate function one, function two or function three. However, I want to make it so there is a 60% chance that function one gets called from the ...

javascriptjquery

Is there a way to automatically update the URL to include $_GET['data'] (media.php?data=123) when a selection is made from a dropdown list?

I'm currently working on a project that involves a website in PHP and a MySQL database. I have successfully linked the two together, and now I have a combobox filled with data from the database. Below is my script for handling the selection: <scr ...

javascriptphpjquerymysqlajax

Questions on how to utilize ES6 Express and static methods

Recently, I've been working with Express and wanted to incorporate ES6 using babel in my project. One question that has been on my mind is related to the use of static methods for handling requests, as shown below: class MyCtrl { static index (r ...

javascriptnode.jsexpressbabeljs

Next.js app experiencing issues with Chakra UI not transitioning to dark mode

After attempting to incorporate Chakra UI into my Next.js application, I carefully followed every step outlined in their documentation: Despite setting the initialColorMode to "dark" for the ColorModeScript prop, it seems that the dark mode is not being a ...

javascriptreactjsnext.jschakra-ui

A streamlined method for generating an array containing all numerical string values

I'm looking to generate an array of digits in JavaScript. Currently, I have hard-coded it like this: const digitGeneration = ['0', '1', '2', '3', '4', '5', '6', '7', &apo ...

javascriptnode.jsarraysstring

What causes my useEffect hook to trigger twice in React?

I'm currently utilizing @preact/signals-react in my react project for integration purposes. Encountered a challenge that requires resolution. Interestingly, I discovered that by removing import { signal } from '@preact/signals-react', the ...

javascriptreactjspreact

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

I am working on a VueJS application where I need to fetch a list of articles in one of my components. The logic is such that if the user is logged in, a specific request is made, and if not, another request is executed. Below is the snippet of code: <s ...

javascriptvue.jshook

The `this` value is null within an onClick function of a ReactJS component

The issue occurs with the onClick method of <span className="nav-toggle">. The specific error message is: cannot read property setState of null. It seems to be related to the scoping of this or due to the asynchronous nature of the setState method. ...

javascriptreactjsonclick

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js