three.js obj轉js的詳細步驟 convert_obj_three.py的用法

three.js是最近非常流行的一個前端webgl庫。

js格式的模型文件是three.js中可以直接加載的文件。使用THREE.JSONLoader()直接加載，而不需要引用其它的loader插件。

obj格式轉js格式使用的是threejs.org官方提供的一個convert_obj_three.py的工具，這個工具的使用需要安裝python環境。

文件准備：

1. convert_obj_three.py 在官網的下載的包中./utils/converters/obj/目錄下可以找到。打開 three.js官網 ，點擊如下圖所示download鏈接，即可下載。下載好后解壓，然后進入utils/converters/obj/下的文件夾即可找到。

   也可以在github上面 https://github.com/mrdoob/three.js/tree/master/utils/converters/obj 這里可以找到，點擊conver_obj_three.py打開編輯頁面，然后你在自己電腦上新建一個convert_obj_three.py的文本文件，把github上面那個內容拷貝進去保存就可以使用，

1. 提示：convert_obj_three_for_python3.py 這個也是同樣的轉換工具，只不過是給python 3.X版本的環境使用的。convert_obj_three.py 這個是給python2.X 的版本使用的，建議使用python2.6以上的環境。

2. 准備python環境

進 https://www.python.org/  的官網

 點擊如圖所示，下載python-2.7.11.msi文件(我是windows系統)。然后按提示安裝。

 安裝過程中有一項記得勾選，那就是把python目錄添加到環境變量中。如果沒添加那就自己手動添加。

轉換過程

1. 將convert_obj_three.py和要轉換的obj格式的文件拷貝到一個目錄下。如果有mtl文件的話也要帶上。

    

2. 打開命令行工具，把目錄切換到剛剛所建的文件夾，我建的文件夾是test

   

     敲入命令dir可以列出當前文件夾中所包含的內容

3. 執行命令

    用文本編輯工具打開convert_obj_three.py，可在文件頂部發現這樣的注釋。這個是教我們怎么使用這個工具。我們可以參照它　

"""Convert Wavefront OBJ / MTL files into Three.js (JSON model version, to be used with ascii / binary loader)

-------------------------
How to use this converter
-------------------------

python convert_obj_three.py -i infile.obj -o outfile.js [-m "morphfiles*.obj"] [-c "morphcolors*.obj"] [-a center|centerxz|top|bottom|none] [-s smooth|flat] [-t ascii|binary] [-d invert|normal] [-b] [-e]

Notes:
    - flags
        -i infile.obj            input OBJ file
        -o outfile.js            output JS file
        -m "morphfiles*.obj"    morph OBJ files (can use wildcards, enclosed in quotes multiple patterns separate by space)
        -c "morphcolors*.obj"    morph colors OBJ files (can use wildcards, enclosed in quotes multiple patterns separate by space)
        -a center|centerxz|top|bottom|none model alignment
        -s smooth|flat            smooth = export vertex normals, flat = no normals (face normals computed in loader)
        -t ascii|binary            export ascii or binary format (ascii has more features, binary just supports vertices, faces, normals, uvs and materials)
        -d invert|normal        invert transparency
        -b                        bake material colors into face colors
        -x 10.0                 scale and truncate
        -f 2                    morph frame sampling step

    - by default:
        use smooth shading (if there were vertex normals in the original model)
        will be in ASCII format
        original model is assumed to use non-inverted transparency / dissolve (0.0 fully transparent, 1.0 fully opaque)
        no face colors baking
        no scale and truncate
        morph frame step = 1 (all files will be processed)

    - binary conversion will create two files:
        outfile.js  (materials)
        outfile.bin (binary buffers)

    參考上面的注釋，我們可以使用命令 

    python convert_obj_three.py -i keyboard.obj -o keyboard.js

     來處理我們的obj文件。我們敲入命令

 

     回車：

 

     如圖所示，我們的模型已經轉換成功了。

 

     我們在剛剛所建的文件夾中找到這個keyboard.js文件。 

使用js格式文件：

    在剛剛的convert_obj_three.py文件中，我們還會發現如下的注釋：

--------------------------------------------------
How to use generated JS file in your HTML document    
--------------------------------------------------

    <script type="text/javascript" src="Three.js"></script>

    ...

    <script type="text/javascript">
        ...

        // load ascii model

        var jsonLoader = new THREE.JSONLoader();
        jsonLoader.load( "Model_ascii.js", createScene );

        // load binary model

        var binLoader = new THREE.BinaryLoader();
        binLoader.load( "Model_bin.js", createScene );

        function createScene( geometry, materials ) {

            var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

        }

        ...
    </script>

我們就參照這注釋里邊的方式在網頁中加載這個模型吧。