Home>

Text shape

Speaking of 3d text, I remembered some artistic words in the early word:

Sotextgeometry can be used to create three-dimensional text shapes.

Using text shapes requires downloading and referencing additional font libraries.Here, we start withhelvetiker font as an example.

Quote:

<script type="text/javascript" src="your path/helvetiker_regular.typeface.json"</script>

The constructor of textgeometry is:

three.textgeometry (text, parameters)

Text is a text string;

Parameters is an object composed of the following parameters:

· Size:font size,Height of capital letters

· Height:The thickness of the text

· Curvesegments:number of arc segments,Make the text's curve more smooth

· Font:Font, default is "helvetiker", need to correspond to the font file referenced

· Weight:The value is "normal" or "bold", indicating whether it is bold

· Style:The value is "normal" or "italics", indicating whether it is italic

Bevelenabled:Boolean, whether to use chamfers,Beveled

· Bevelthickness:Chamfer thickness

· Bevelsize:Chamfer width

Create a 3D text:new three.textgeometry ("hello", {size:1, height:1}),The effect is:

You can adjust the material and lighting appropriately to achieve the desired effect:

//Metal shiny object
var material=new three.meshphongmaterial ({
  color:0xffff00,  specular:0xffff00,  //Specify the brightness of the material and the color of its highlights,If set to the same color as the color property,You get another more metal-like material,If set to grey, it looks like plastic
  shininess:0
  //Specify the brightness of the highlight part,The default value is 30
});
//Direction light
var light=new three.directionallight (0xffffff);
light.position.set (-5, 10, 5);
scene.add (light);

Source:

<! Doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3.js test six</title>
  </head>
  <body onload="init ()">
    <canvas width="400px" height="300px"></canvas>
  </body>
  <script type="text/javascript" src="js/three.min.js"></script>
    <!-Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts->
    <script type="text/javascript">
      function init () {
        var renderer=new three.webglrenderer ({
          canvas:document.getelementbyid ("maincanvas")
        });
        renderer.setclearcolor (0x000000);
        var scene=new three.scene ();
        //camera
        var camera=new three.orthographiccamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100);
        camera.position.set (5, 5, 20);
        camera.lookat (new three.vector3 (1, 0, 0));
        scene.add (camera);
//var material=new three.meshbasicmaterial ({
//color:0xffff00,//wireframe:true
//});
        //Metal shiny object
        var material=new three.meshphongmaterial ({
          color:0xffff00,          specular:0xffff00,          //Specify the brightness of the material and the color of its highlights,If set to the same color as the color property,You get another more metal-like material,If set to grey, it looks like plastic
          shininess:0
          //Specify the brightness of the highlight part,The default value is 30
        });
        //Direction light
        var light=new three.directionallight (0xffffff);
        light.position.set (-5, 10, 5);
        scene.add (light);
        //load font
        var loader=new three.fontloader ();
        loader.load ("./helvetiker_regular.typeface.json", function (font) {
          var mesh=new three.mesh (new three.textgeometry ("hello", {
            font:font,            size:1,            height:1
          }), material);
          scene.add (mesh);
          //render
          renderer.render (scene, camera);
        });
      }
    </script>
</html>

2.Custom shape

For shapes not provided by three.js,Custom shapes can be provided to create.

Since custom shapes need to manually specify each vertex position,And vertex connection,If the shape is very complex,The programmer's calculations will be relatively large.under these circumstances,It is recommended to create models in modeling software like 3ds max,Then use three.js to import into the scene,This will be more efficient and convenient.

Custom shape is usinggeometry class, it is other such ascubegeometry ,spheregeometry and other geometric shapes.Its constructor is:

three.geometry ()

Initialize a geometry,Then set the vertex position and vertex connection:

Source:

<! Doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3.js test six-two</title>
  </head>
  <body onload="init ()">
    <canvas width="400px" height="300px"></canvas>
  </body>
  <script type="text/javascript" src="js/three.js"></script>
  <script type="text/javascript">
    function init () {
      var renderer=new three.webglrenderer ({
        canvas:document.getelementbyid ("maincanvas")
      });
      renderer.setclearcolor (0x000000);
      var scene=new three.scene ();
      //camera
      var camera=new three.orthographiccamera (-5, 5, 3.75, -3.75, 0.1, 100);
      camera.position.set (25, 25, 25);
      camera.lookat (new three.vector3 (0, 0, 0));
      scene.add (camera);
      var material=new three.meshbasicmaterial ({
        color:0xffff00,        wireframe:true
      });
      //initialize the geometry
      var geometry=new three.geometry ();
      //set vertex position
      //top 4 vertices
      geometry.vertices.push (new three.vector3 (-1, 2, -1));
      geometry.vertices.push (new three.vector3 (1, 2, -1));
      geometry.vertices.push (new three.vector3 (1, 2, 1));
      geometry.vertices.push (new three.vector3 (-1, 2, 1));
      //bottom 4 vertices
      geometry.vertices.push (new three.vector3 (-2, 0, -2));
      geometry.vertices.push (new three.vector3 (2, 0, -2));
      geometry.vertices.push (new three.vector3 (2, 0, 2));
      geometry.vertices.push (new three.vector3 (-2, 0, 2));
      //Set the vertex connection
      //top surface
      geometry.faces.push (new three.face3 (0, 1, 3));
      geometry.faces.push (new three.face3 (1, 2, 3));
//geometry.faces.push (new three.face4 (0, 1, 2, 3));
      //underside
      geometry.faces.push (new three.face3 (4, 5, 6));
      geometry.faces.push (new three.face3 (5, 6, 7));
//geometry.faces.push (new three.face4 (4, 5, 6, 7));
      //side
      geometry.faces.push (new three.face3 (1, 5, 6));
      geometry.faces.push (new three.face3 (6, 2, 1));
      geometry.faces.push (new three.face3 (2, 6, 7));
      geometry.faces.push (new three.face3 (7, 3, 2));
      geometry.faces.push (new three.face3 (3, 7, 0));
      geometry.faces.push (new three.face3 (7, 4, 0));
      geometry.faces.push (new three.face3 (0, 4, 5));
      geometry.faces.push (new three.face3 (0, 5, 1));
////face of four vertices
//geometry.faces.push (new three.face4 (0, 1, 5, 4));
//geometry.faces.push (new three.face4 (1, 2, 6, 5));
//geometry.faces.push (new three.face4 (2, 3, 7, 6));
//geometry.faces.push (new three.face4 (3, 0, 4, 7));
      var mesh=new three.mesh (geometry, material);
      scene.add (mesh);
      //render
      renderer.render (scene, camera);
    }
  </script>
</html>

have to be aware of is,new three.vector3 (-1, 2, -1) Create a vector,Append toas vertex position geometry.vertices array.

And bynew three.face3 (0, 1, 2) Create a three-vertex face,Append togeometry.faces array. The three parameters are the three vertices in thegeometry.vertices .If you need to set a patch consisting of four vertices,You can usesimilarly three.face4 .

//top surface
geometry.faces.push (new three.face4 (0, 1, 2, 3));
//bottom
geometry.faces.push (new three.face4 (4, 5, 6, 7));
//Four sides
geometry.faces.push (new three.face4 (0, 1, 5, 4));
geometry.faces.push (new three.face4 (1, 2, 6, 5));
geometry.faces.push (new three.face4 (2, 3, 7, 6));
geometry.faces.push (new three.face4 (3, 0, 4, 7));
  • Previous MySQL improves paging efficiency
  • Next JS implements a super streamlined link list scrolling effect code in a fixed area