Как изменить цвет коллады с помощью кнопки в 3js? - PullRequest
Новая
       44

Как изменить цвет коллады с помощью кнопки в 3js?

0 голосов
/ 16 января 2019

Я хочу создать модель скелета с интерактивными костями, чтобы при нажатии на одну из кнопок какая-то часть скелета меняла цвет.

Я попытался добавить две одинаковые модели в одном месте, но с другим цветом, но это привело к тому, что моя модель 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>

1 Ответ

0 голосов
/ 18 января 2019

Видите, вы используете SkinnedMesh здесь, который является производным от 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;
}
...