鍍金池/ 問答/HTML5  HTML/ Three.js較復(fù)雜的貼圖的UV映射有較成熟的獲取方案嗎?

Three.js較復(fù)雜的貼圖的UV映射有較成熟的獲取方案嗎?

我想用 3dmax 做一個模型,使用 ThreeJS 加載,給定貼圖規(guī)則,貼圖圖片資源是后來加載的image或者canvas,可以一鍵替換貼圖并重新渲染。
因為模型不是簡單地正方形或者其他規(guī)則圖形,而且不規(guī)則的圖形,我查找的資料上說可以通過 UV映射 描述貼圖與模型的映射關(guān)系。但是如果用手寫感覺很不現(xiàn)實。請問3D工具如 3d Max 可以做貼圖然后將 UV映射 導(dǎo)出加載到 ThreeJS 嗎?
我的思路是這樣的:

  1. 3dmax 里做貼圖
  2. 導(dǎo)出 objmtl 文件
  3. ThreeJS 調(diào)用接口修改貼圖

請問下這個方向是否可行,在這個方案下 ThreeJs 是否可以修改貼圖。
如果不可行的話,希望有大神能指條明路

回答
編輯回答
蝶戀花

同問,mark

2018年8月16日 13:09
編輯回答
夕顏

在學(xué)習(xí)ThreeJS的過程中,常常會有這樣的疑惑,為什么做一個模型這么復(fù)雜,復(fù)雜的UV映射完全無從下手,Demo里那些看起來很厲害的模型是怎么做出來的
其實大多數(shù)的模型都是使用桌面軟件制作出來的,包括建模、貼圖、動畫等,使用ThreeJS也可以完成部分作品,但是費(fèi)事費(fèi)力,在我看來不能作為成熟方案用作商業(yè)用途


使用3D max建模(各類建模軟件都可以),制作UV展開,導(dǎo)出帶貼圖信息的obj格式文件(以obj為例)
使用ThreeJS加載即可,在這里ThreeJS的作用僅類似于視頻播放器,僅完成模型加載渲染的工作,建模貼圖等工作交給3D max等桌面軟件即可

    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };
    manager.onLoad = function ( item, loaded, total ) {
        console.log( 'load finish' );
    };
    // 加載材質(zhì)
    var textureLoader = new THREE.TextureLoader( manager );
    var texture = textureLoader.load( '/obj/caizhi.png' );
    
    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
        }
    };

    var onError = function ( xhr ) {
    };
    // 加載模型
    var loader = new THREE.OBJLoader( manager );
    loader.load( '/obj/C-BOX.obj', function ( obj ) {

        obj.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                // 為模型賦予材質(zhì)
                child.material.map = texture;
            }
        } );
        // 模型加載完后向場景中添加模型
        scene.add( obj );
    }, onProgress, onError );
2018年5月4日 00:20