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:倒角宽度

  成立3个三维文字: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
马克斯等等的建模软件中开创模型,然后利用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种材质

 

上一篇:其它几何样子

 

相关文章