linaCharts開發筆記:Three.js導入obj和使用中文

直接進入主題，首先是導入中文字型，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再導出