Three.js Learning text shape and custom shape _javascript class Library

1. Text shape

Speaking of 3d words, I remembered some of the words in the early days of Word:

Then TextGeometry you can use it to create three-dimensional text shapes.

Using text shapes requires downloading and referencing additional font libraries. Here, we take the helvetiker font as an example.

Reference:

<script type= "Text/javascript" src= "Your Path/helvetiker_regular.typeface.json" ></script>

　　The Textgeometry constructors are:

THREE. Textgeometry (text, parameters)

Text is a literal string;

Parameters is an object consisting of the following parameters:

　　　　Size: font size, generally the height of uppercase letters

　　　　Height: The thickness of the text

　　　　curvesegments: arcs the number of segments, making the text curve more smooth

　　　　font: font, default is ' Helvetiker ', need to correspond to the font file referenced

　　　　Weight: value is ' normal ' or ' bold ' to indicate whether bold

　　　　Style: The value is ' normal ' or ' italics ' to indicate whether the italic

　　　　bevelenabled: Boolean, whether to use chamfer, meaning to chamfered at the Edge

　　　　bevelthickness: chamfer thickness

　　　　bevelsize: chamfer width

Create a three-dimensional 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 colour as the color property, Will get another more metal-like material, which, if set to grey gray, looks like
  a plastic shininess:0    
  //Specifies the brightness of the highlight portion, the default value is
}.
        
Directional light
var light = new THREE. DirectionalLight (0XFFFFFF);
Light.position.set ( -5, 5);
Scene.add (light);

Source:

<! DOCTYPE html>  

2. Custom Shapes

For shapes that are not provided by three.js, you can provide custom shapes to create them.

Because custom shapes need to manually specify each vertex position, as well as the vertex connection, if the shape is very complex, the programmer will have a larger amount of computation. In this case, it is more efficient and convenient to create a model in a modeling software such as 3ds Max and then import it into the scene using Three.js.

A custom shape uses a Geometry class that is a CubeGeometry parent of other geometric shapes such as, and SphereGeometry its constructors are:

THREE.Geometry()

Initializes a geometric shape, and then sets the vertex position and vertex connection conditions:

Source:

<! DOCTYPE html>  

Note that you new THREE.Vector3(-1, 2, -1) create a vector that is appended to the array as the vertex position geometry.vertices .

Instead new THREE.Face3(0, 1, 2) , a surface consisting of three vertices is created and appended to the geometry.faces array. Three parameters are the ordinal number of the three vertices in each geometry.vertices . If you need to set up a four-vertex patch, you can use it similarly THREE.Face4 .

Top
Geometry.faces.push (new THREE. Face4 (0, 1, 2, 3));
Bottom
Geometry.faces.push (new THREE. Face4 (4, 5, 6, 7));
Four side
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));

The above is a small series for everyone three.js learning the text shape and custom shape of the entire content, before the small series also sorted out a few related articles on Three.js, there is a need for the following links to the relevant articles to see, hoping to help learn three.js everyone.