Three.js基础探寻六——文字形状和由定义形状

1.文字形状

  说由3d文字想起了往日word里之部分艺术字:

银河至尊游戏官网 1日子真快。

  那么TextGeometry可以就此来创造三维的字形状。

  使用文字形状需要下载和援额外的字体库。这里,我们盖
helvetiker字体为例。引用:

<script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script>

  TextGeometry的构造函数是:

THREE.TextGeometry(text, parameters)

  text是仿字符串;

  parameters是以下参数组成的目标:

    ·
size:字号大小,一般为非常写字母的可观

    ·
height:文字的薄厚

    ·
curveSegments:弧线分段数,使得文字的曲线更细腻

    ·
font:字体,默认是’helvetiker’,需对承诺引用的字文件

    ·
weight:值为’normal’或’bold’,表示是否加粗

    ·
style:值吗’normal’或’italics’,表示是否斜体

    ·
bevelEnabled:布尔值,是否以倒角,意呢在边缘处斜切

    · bevelThickness:倒角厚度

    ·
bevelSize:倒角宽度

  创建一个三维文字:new
THREE.TextGeometry(‘Hello’, {size: 1, height: 1}),其作用啊:

 银河至尊游戏官网 2

  可以确切调整材质与光照以高达梦想效果:

//金属发亮物体
var material = new THREE.MeshPhongMaterial({    
    color: 0xffff00,
    specular:0xffff00,    
    //指定该材质的光亮程度及其高光部分的颜色,如果设置成和color属性相同的颜色,则会得到另一个更加类似金属的材质,如果设置成grey灰色,则看起来像塑料
    shininess:0        
    //指定高光部分的亮度,默认值为30
});

//方向光
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(-5, 10, 5);
scene.add(light);

银河至尊游戏官网 3

  源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3.js测试六</title>
    </head>
    <body onload="init()">
        <canvas id="mainCanvas" 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
//              });
                //金属发亮物体
                var material = new THREE.MeshPhongMaterial({    
                    color: 0xffff00,
                    specular:0xffff00,    
                    //指定该材质的光亮程度及其高光部分的颜色,如果设置成和color属性相同的颜色,则会得到另一个更加类似金属的材质,如果设置成grey灰色,则看起来像塑料
                    shininess:0        
                    //指定高光部分的亮度,默认值为30
                });

                //方向光
                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.起定义形状

  对于Three.js没有提供的模样,可以提供由定义形状来创造。

  由于从定义形状需要手动指定每个终端位置,以及极连接情况,如果该形象非常复杂,程序员的计算量就会见比较特别。在这种状况下,建议以3ds
Max等等的建模软件面临创造模型,然后运Three.js导入到景被,这样会再快捷便民。

  自定义形状使用的是Geometry类,它是任何如CubeGeometry、SphereGeometry等几何样子银河至尊游戏官网的父类,其构造函数是:

THREE.Geometry()

  初始化一个几何样子,然后设置极端位置和极连接情况:

银河至尊游戏官网 4

  源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3.js测试六-二</title>
    </head>
    <body onload="init()">
        <canvas id="mainCanvas" 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
            });

            // 初始化几何形状
            var geometry = new THREE.Geometry();

            // 设置顶点位置
            // 顶部4顶点
            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));
            // 底部4顶点
            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));

            // 设置顶点连接情况
            // 顶面
            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));
            // 底面
            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));
            // 侧面
            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));
//            // 四个顶点组成的面
//            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>

  需要小心的是,new
THREE.Vector3(-1, 2,
-1)创建一个矢量,作为终点位置增加到geometry.vertices数组中。

  而由于new
THREE.Face3(0, 1,
2)创建一个老三只顶组成的照,追加到geometry.faces数组中。三独参数分别是三个终端在geometry.vertices中的序号。如果要设置由四只极点组成的面片,可以接近地行使THREE.Face4。

//顶面
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
//底面
geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
//四个侧面
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));

银河至尊游戏官网 5

 

整治起张雯莉《Three.js入门指南》

另外参考:THREE.JS中常用之3栽材料

 

上一篇:另几哪里样子

 

相关文章