CODEWITHSUNDEEP
javascriptthree.js
Hide
Hide

Reputation: 3317

three.js rendering text to scene

I'm new at three.js.

In my work, I have to made 3d graphical website.

So after searched in google, I found that three.js is suitable to manipulate WebGL conveniently.

In three.js document(https://threejs.org/docs/#api/en/geometries/TextGeometry),

TextGeometry is API for draw text in the scene.

[src.js]

init = () => {
  window.addEventListener('resize', resizeWindow);
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
  var controls = new THREE.OrbitControls( camera );
  controls.update();
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(0xdd3b56);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Set shadow
  renderer.shadowMap.enabled = true;
  // Show Axis
  var axes = new THREE.AxisHelper(5);
  scene.add(axes);

  // Text
  var loader = new THREE.FontLoader();
  loader.load( './helvetiker_regular.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,
          bevelSegments: 5
      } );
  } );
  var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;
  scene.add(text);

  // Light
  var spotLight = new THREE.SpotLight(0xFFFFFF);
  spotLight.position.set(-40, 60, 30);
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 5120;
  spotLight.shadow.mapSize.height = 5120;
  scene.add(spotLight);

  // Camera Setting
  camera.position.x = 0;
  camera.position.y = 30;
  camera.position.z = 30;
  camera.lookAt(scene.position);
  document.getElementById("threejs_scene").appendChild(renderer.domElement);

  renderScene();

  function renderScene() {
    requestAnimationFrame(renderScene);
    controls.update();
    renderer.render(scene, camera);
  }
}
window.onload = init();

[index.html]

<html>
<head>
  <script src="three.js"></script>
  <script src="OrbitControls.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="threejs_scene"></div>
  <script src="src.js"></script>
</body>
</html>

When I execute my code, it throws [.WebGL-0x7fb612852000]RENDER WARNING: Render count or primcount is 0. and WebGL: too many errors, no more errors will be reported to the console for this context. errors.

So I searched it at google, it occured when Three.js is trying to render an object that does not exist yet.

But in my code, I already defined it.

  var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;

How can I solve this issue?

My last goal is display text in the scene.

Thanks.

Upvotes: 0

Views: 3032

Answers (1)

manthrax
manthrax

Reputation: 5016

window.onload = function(params) {

  /*
   *
   * SET UP THE WORLD
   * 
   */



  //set up the ratio
  var gWidth = window.innerWidth;
  var gHeight = window.innerHeight;
  var ratio = gWidth / gHeight;
  var borders = [40, 24] //indicate where the ball needs to move in mirror position


  var light = new THREE.AmbientLight(0xffffff, 0.5);
  var light1 = new THREE.PointLight(0xffffff, 0.5);
  light1.position.set(0, 5, 0);
  light1.castShadow = true;

  //  set the renderer 
  var renderer = new THREE.WebGLRenderer();
  var camera = new THREE.PerspectiveCamera();
  camera.position.set(10, 10, 10);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  //properties for casting shadow
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  renderer.setSize(gWidth, gHeight);
  document.body.appendChild(renderer.domElement);

  var scene = new THREE.Scene();
  scene.add(light);
  scene.add(light1);

  var ground = new THREE.Mesh(new THREE.BoxGeometry(10, 0.5, 10), new THREE.MeshLambertMaterial())
  ground.receiveShadow = true;
  scene.add(ground)
  var geometry;


  var loader = new THREE.FontLoader();
  var mesh;

  requestAnimationFrame(render);

  function render() {
    if (mesh) {
      mesh.rotation.y += 0.01;
      mesh.rotation.z += 0.007;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  loader.load('https://cdn.rawgit.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.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,
      bevelSegments: 5
    });

    var material = new THREE.MeshLambertMaterial({
      color: 0xF3FFE2
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 2, 0);
    mesh.scale.multiplyScalar(0.01)
    mesh.castShadow = true;
    scene.add(mesh);


    var canv = document.createElement('canvas')
    canv.width = canv.height = 256;
    var ctx = canv.getContext('2d')
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canv.width, canv.height);
    ctx.fillStyle = 'black'
    ctx.fillText("HERE IS SOME 2D TEXT", 20, 20);
    var tex = new THREE.Texture(canv);
    tex.needsUpdate = true;
    var mat = new THREE.MeshBasicMaterial({
      map: tex
    });
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), mat);
    scene.add(plane)
  });



}
body {
  padding: 0;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<html>

<head>

</head>

<body>
</body>

</html>

Upvotes: 1

Related Questions