linaCharts开发笔记:Three.js导入obj和使用中文

来源：互联网发布：中国移动流量监控软件编辑：程序博客网时间：2024/06/01 08:12

直接进入主题，首先是导入中文字体，Three.js自带只支持显示3D的英文，如果需要使用中文，需要自己导入。

一、选一个你喜欢的字体，也就是ttf文件，尽量选小一点的，不然转换成的js文件也会非常大。

二、下载facetype.js，地址：

https://github.com/gero3/facetype.js

然后运行index.html,界面如下:

直接将ttf文件转换为js文件，比如我生成的 FZYaoTi_Regular.js

三、直接使用代码如下:

        var loader = new THREE.FontLoader();        loader.load( 'lib/font/FZYaoTi_Regular.js', function ( font ) {            var text_style = {                font: font,                size: 4,                height: 1,                curveSegments: 12,//曲线上点的数量                bevelThickness: 0.1, //文本斜面深度                bevelSize: 0.1, //斜面离轮廓的距离                bevelEnabled: true //是否打开曲面            }            var textGeo = new THREE.TextGeometry( "莉娜酱", text_style );            var textMaterial = new THREE.MeshPhongMaterial( {color: 0xB3B3B3} );             var mesh = new THREE.Mesh( textGeo, textMaterial );            //对于文字，先设置lookat和先设置position是不一样的            mesh.lookAt(new THREE.Vector3(100, 0, 150));            mesh.position.set( 20, -4, 30 );             scene.add( mesh );        });

特别说明，一定要先设置文字的lookAt再设置position,如果反过来的话，文字出现和你想象不一样的结果（比如会自旋转一个角度）

然后，使用obj和mtl：

一、首先用3dmax生成模型的.obj和.mtl文件，我是放在model/下的，后面会设置路径

二、导入相关js

        <script type="text/javascript" src="lib/MTLLoader.js"></script>        <script type="text/javascript" src="lib/OBJLoader.js"></script>

三、代码如下：

                var mtlLoader = new THREE.MTLLoader();                   mtlLoader.setPath( 'model/' );                  mtlLoader.load( 'test8.mtl', function( materials ) {                      materials.preload();                        var objLoader = new THREE.OBJLoader();                      objLoader.setMaterials( materials );                      objLoader.setPath( 'model/' );                      objLoader.load( 'test8.obj', function ( object ) {                          object.position.set(0,0,0);                        object.scale.set(2,2,2);                        scene.add( object );                                            });                    });

需要注意，有时候导入的模型并不在中心，这时候需要在3dmax中将模型的位置调到0,0,0再导出

阅读全文

0 0