如何使用threejs中的按钮更改Collada的颜色？答案

【问题标题】：How to change a color of Collada using a button in threejs?如何使用threejs中的按钮更改Collada的颜色？
【发布时间】：2019-06-10 16:51:04
【问题描述】：

我想创建一个带有交互式骨骼的骨架模型，这样如果您单击其中一个按钮，骨架的某些部分就会改变颜色。

我尝试在同一个位置添加两个相同的模型，但颜色不同，但这导致我的 collada 模型不在 y 轴上旋转。

<body>
    <script src="js/three.js"></script>                 
    <script src="js/loaders/ColladaLoader.js"></script> 
    <script src="js/Detector.js"></script>              

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container;
        var camera, scene, renderer, objects;           
        var dae;            
        var dae2;                   
        var loader = new THREE.ColladaLoader();

        loader.options.convertUpAxis = true;
        var url='obj/szkieletCube.dae';  

        loader.load( url, function ( collada ) {
            dae = collada.scene;
            dae.traverse( function ( child ) {
                if ( child instanceof THREE.SkinnedMesh ) {
                    var animation = new THREE.Animation( child, child.geometry.animation );
                    animation.play();
                }
            } );

            dae.scale.x = dae.scale.y = dae.scale.z = 100; 
            dae.rotation.y+=Math.PI/2;
            dae.position.y-=2048;
            dae.position.x-=0;
            dae.position.z+=0;
            dae.updateMatrix();

            dae.traverse( function ( child ) {  
                child.castShadow = true;
                child.receiveShadow = false;
            } );            

            init();
            animate();
        } );            

        function init() 
        {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 40000 );
            camera.position.set( Math.pow(2,13), 1024, 0);

            scene = new THREE.Scene();

            scene.add( dae );

            var light1  = new THREE.DirectionalLight( 0xffffff );
            light1.position.set(1, 1, 1);   
            scene.add( light1 );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight); 
            renderer.shadowMapEnabled=true;
            renderer.shadowMapType=THREE.PCFSoftShadowMap;

            container.appendChild( renderer.domElement );

            window.addEventListener( 'resize', onWindowResize, false );

        }


        function onWindowResize() {                 

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight);
        }

        function animate() {                
            requestAnimationFrame( animate );
            render();
        }
        var kat = 0;
        function render() {
            camera.position.y = 1024;
            kat -= -0.001;
            dae.rotation.y = Math.cos( kat ) * 10;
            camera.lookAt( scene.position );        
            renderer.render( scene, camera );
        }

    </script>
</body>

【问题讨论】：

您的代码似乎基于一个非常旧的ColladaLoader 版本。使用以下示例作为与最新版本的 three.js (R100) 一起使用的入门模板：threejs.org/examples/webgl_loader_collada_skinning

标签： three.js collada

【解决方案1】：

看，你在这里使用SkinnedMesh，它是Mesh的派生类 Mesh 本身有Mesh.material 属性。

所以你需要改变颜色的只是收集孩子，这样你就可以在按钮点击处理程序上单独访问它们。

这是你的代码调整：

    var daeChildren = {}; // map dae child name => child node
    var loader = new THREE.ColladaLoader();

    loader.options.convertUpAxis = true;
    var url='obj/szkieletCube.dae';  

    loader.load( url, function ( collada ) {
        dae = collada.scene;

        ...

        dae.traverse( function ( child ) {  
            child.castShadow = true;
            child.receiveShadow = false;

            // 1. Collect DAE children here
            daeChildren[child.name] = child;
        } );            

        ...

    } );

然后单击按钮可以更改材质颜色：

function handleButtonClick() {
    // 2. drop texture if you need the mesh to be just colored
    daeChildren[child.name].material.map = null;

    // 3. set mesh color red
    daeChildren[child.name].material.color = new THREE.Color( 0xff0000 );

    // 4. tell threejs that material must be updated
    daeChildren[child.name].material.needsUpdate = true;
}

【讨论】：