使用threejs選擇，更新和操作Obj文件

Question

我正在使用threejs構建3D可視化和交互式應用程序。
以下是我想在此應用程序中提供的主要功能：

在這個用戶應該能夠：

• 旋轉和縮放Obj。 - 完成
• 操縱Obj的某些部分，改變其顏色，用另一部分替換該部分。 - 等待

我正在關注巨大的threejs 文檔及其示例列表，這對我幫助很大，而且我能夠實現一點點。

此外，我遇到了一個有用的threejs檢查員Chrome Ext 。

這三個檢查員Chrome Ext全部完成了我想要實現的一切，但不幸的是我無法理解它是如何工作的以及它如何能夠選擇和操作Obj文件的各個部分。

我現在使用以下代碼使用threejs來顯示，旋轉和縮放Obj文件。

更新的代碼：

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, camera, controls, scene, renderer, mesh;
        var mtlObject = {};
        var strDownloadMime = "image/octet-stream";
        init();
        animate();
        function init() {
            var saveLink = document.createElement('div');
            saveLink.style.position = 'absolute';
            saveLink.style.top = '10px';
            saveLink.style.width = '100%';
            saveLink.style.color = 'white !important';
            saveLink.style.textAlign = 'center';
            saveLink.innerHTML ='<a href="#" id="saveLink">Save Frame</a>';
            document.body.appendChild(saveLink);
            document.getElementById("saveLink").addEventListener('click', saveAsImage);
            renderer = new THREE.WebGLRenderer({
                preserveDrawingBuffer: true
            });
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 500;
            controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 2.0;
            controls.zoomSpeed = 2.0;
            controls.panSpeed = 2.0;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
            controls.keys = [ 65, 83, 68 ];
            controls.addEventListener( 'change', render );

            // world
            scene = new THREE.Scene();
            var ambient = new THREE.AmbientLight( 0x444444 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 ).normalize();
            scene.add( directionalLight );

            // model
            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 ) { };

            //mtl loader
            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setPath( 'obj/' );
            mtlLoader.load( 'arm.mtl', function( materials ) {
                materials.preload();
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.setPath( 'obj/' );
                objLoader.load( 'arm.obj', function ( object ) {
                    object.name = "object_name";
                    object.position.y = - 95;
                    scene.add( object );
                    //As 'TheJim01' suggested 
                    //I have used an object variable.
                    //then traverse through the scene nodes 
                    //and target some particular parts of the obj as:
                    var nameToObject = {};
                    scene.traverse( function( node ) {
                        nameToObject[node.name] = node;
                        if (node.name == ("Pad01")) {
                            node.visible = false;
                        }
                        if (node.name == ("Arm_01")) {
                            node.visible = false;
                        }
                        if (node.name == ("Pad02")) {
                            node.visible = false;
                        }
                        if (node.name == ("Arm_02")) {
                            node.visible = false;
                        }
                    });

                }, onProgress, onError );
            });

            // lights
            var light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );
            var light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );
            var light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );

            // renderer
            renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );
            //
            render();
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            controls.handleResize();
            render();
        }
        function animate() {
            requestAnimationFrame( animate );
            controls.update();
        }
        function render() {
            renderer.render( scene, camera );
        }   
        //my next challenge is to save the canvas as image
        //after making all the changes to the obj file
        function saveAsImage() {
            var imgData, imgNode;

            try {
                var strMime = "image/jpeg";
                imgData = renderer.domElement.toDataURL(strMime);

                saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

            } catch (e) {
                console.log(e);
                return;
            }

        }
        var saveFile = function (strData, filename) {
            var link = document.createElement('a');
            if (typeof link.download === 'string') {
                document.body.appendChild(link); //Firefox requires the link to be in the body
                link.download = filename;
                link.href = strData;
                link.click();
                document.body.removeChild(link); //remove the link when done
            } else {
                location.replace(uri);
            }
        }

        $(document).ready(function() {
            //Set Color of the Obj parts accordingly
            $('#armblock').on('click', function(){
                $(this).children('ul').slideToggle(400);
                $(this).children('ul').children('li').on('click', function(){
                    $color = new THREE.Color($(this).css('backgroundColor'));
                    var selectedColor = '#' + $color.getHexString();
                    //As 'TheJim01' suggested 
                    //I have used and object variable.
                    //then traverse through the scene nodes 
                    //and target some perticular parts of the obj as:                        
                    var nameToObject = {};
                    scene.traverse( function( node ) {
                        nameToObject[node.name] = node;
                        if (node.name == ("Arm_01")) {
                            node.visible = true;
                            nameToObject["Arm_01"].material.color.set(selectedColor);
                        }
                        if (node.name == ("Arm_02")) {
                            node.visible = true;
                            nameToObject["Arm_02"].material.color.set(selectedColor);
                        }
                    });
                }); 
            }); 

            $('#padblock').on('click', function(){
                $(this).children('ul').slideToggle(400);
                $(this).children('ul').children('li').on('click', function(){
                    $color = new THREE.Color($(this).css('backgroundColor'));
                    var selectedColor = '#' + $color.getHexString();
                    //As 'TheJim01' suggested 
                    //I have used an object variable.
                    //then traverse through the scene nodes 
                    //and target some particular parts of the obj as:                          
                    var nameToObject = {};
                    scene.traverse( function( node ) {
                        nameToObject[node.name] = node;
                        if (node.name == ("Pad01")) {
                            node.visible = true;
                            nameToObject["Pad01"].material.color.set(selectedColor);
                        }
                        if (node.name == ("Pad02")) {
                            node.visible = true;
                            nameToObject["Pad02"].material.color.set(selectedColor);
                        }
                    });
                }); 
            });         
        });  

如果有人可以幫我解決這個問題。 在此先感謝，如果我遺漏了任何內容，請發表評論。

更新

下一個挑戰

• 我能夠改變特定節點的顏色（obj的一部分），但它不是自發​​的，因為我必須再次點擊canvas / obj來查看更改。
• 我能夠隱藏/顯示特定節點（obj的一部分），但我想用另一個節點替換該特定節點（obj的一部分）。
• 我想在將所有更改作為圖像后保存最終的obj文件，但將來作為gif或視頻保存，以便用戶可以直觀顯示最終產品的360deg視圖。

PS

TheJim01幫助我理解了遍歷obj文件及其部分的基本但非常重要的概念。 這導致我至少建立更接近我想要的東西。

Answer 1

所有three.js檢查員正在做的是解析場景，並在交互式UI中顯示對象的各種屬性。

假設你有一個像這樣排列的OBJ文件：

bike
  frame
  seat
  drive
    pedals
    frontSprocket
    chain
    rearSprocket
    rearWheel
  steering
    handlebars
    fork
    frontWheel

OBJLoader會創建一個這樣的場景層次結構：

bike // THREE.Group
  frame // THREE.Mesh
  seat // THREE.Mesh
  drive // THREE.Group
    pedals // THREE.Mesh
    frontSprocket // THREE.Mesh
    chain // THREE.Mesh
    rearSprocket // THREE.Mesh
    rearWheel // THREE.Mesh
  steering // THREE.Group
    handlebars // THREE.Mesh
    fork // THREE.Mesh
    frontWheel // THREE.Mesh

three.js檢查器使用對象的名稱顯示相同的層次結構。 當您單擊其樹中的對象時，它會引用場景中的對象，並抓取/顯示其屬性，例如其position ， rotation ， visible狀態等。當您在three.js檢查器 UI中進行更改時，它設置場景中對象的值，從而產生您看到的更改。

你可以自己做所有這些，而你甚至不需要如此籠統。 假設您要為場景對象創建對象名稱的地圖以便於參考（搜索場景足夠快，但它是遞歸的）。 所以你可以這樣做：

var nameToObject = {};
scene.traverse(function(node){
    // watch out for duplicate empty names!
    nameToObject[node.name] = node;
});

（這不會給你層次結構，但這只是一個例子。）

現在，您可以按名稱獲取和更新任何對象：

// enlarge the rear tire
nameToObject["rearTire"].scale.addScalar(0.1);

您可以讀取和設置對象的所有屬性。 例如，如果MTLLoader為框架創建了基本材質，您可以執行以下操作：

// make the frame red
nameToObject["frame"].material.color.setRGB(1.0, 0.0, 0.0);

或者你可以直接替換整個材料。

對於替換對象的示例，假設您已經加載了一個名為newRearTire的新Mesh ...

// replace the rear tire
var drive = nameToObject["drive"]; // the parent of rearTire
drive.remove(nameToObject["rearTire"]);
drive.add(newRearTire);

（當然，此時您需要重新構建您的名稱地圖。）

這些只是非常一般的例子，但應該讓你開始。 如果您在訪問數據時遇到任何問題，請發表評論，我會盡力澄清。