Question

我有一个GLTF格式的多维数据集模型，现在我试图通过更改纹理材料对其进行动画处理。

现在，有300张热图图像作为纹理材料，主管的要求是通过逐张加载热图图像来对立方体模型进行动画处理。 Texture materials set

关于动画，我尝试使用VectorKeyFrameTrack更改child.material。但这行不通。代码：

    if (WEBGL.isWebGLAvailable() === false) {
    document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var camera, scene, renderer;
init();

function init() {
    //init scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x999999);

    //add directional light and spotlight
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(3, 15.0, -29).normalize();

    scene.add(light);

    var light1 = new THREE.DirectionalLight(0xffffff);
    light.position.set(-20, 7.0, -2).normalize();
    scene.add(light1);
    var light2 = new THREE.DirectionalLight(0xffffff);
    light.position.set(-5, 15.0, 30).normalize();
    scene.add(light2);
    var light3 = new THREE.DirectionalLight(0xffffff);
    light.position.set(15, 5.0, -15).normalize();
    scene.add(light3);


    //add camera
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.y = 5;
    camera.position.z = 10;
    scene.add(camera);

    //add grid
    var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x555555);
    scene.add(grid);

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);


    //Generate textures array
    var loadedTexture = new THREE.TextureLoader().load("1.png");
    var material = new THREE.MeshBasicMaterial({map: loadedTexture});

    var loadedTexture2 = new THREE.TextureLoader().load("2.png");
    var material1 = new THREE.MeshBasicMaterial({map: loadedTexture2});

    //Load Collada file

    var path = "./image/"
    var format = ".png";
    var a = "Avg_Displacement_";
    var material_list = [];
    var times = [];
    for (var i = 0; i <= 314; i++) {


        var loadedTexture = new THREE.TextureLoader().load(path + a + i + format);

        var material = new THREE.MeshBasicMaterial({map: loadedTexture});

        material_list.push(material);
        times.push(i);

    }


    console.log(material_list);
    var loader = new THREE.GLTFLoader();
    loader.load('scene.gltf', function (gltf) {

        gltf.scene.scale.set(0.3, 0.3, 0.3);
        // console.log(gltf.scene.children[0].material);
        // var kf = new THREE.VectorKeyframeTrack( '.scene.material', times, material_list );
        // var clip = new THREE.AnimationClip('Action', 315, [kf]);
        //
        // mixer = new THREE.AnimationMixer(gltf);

        // var clipAction = mixer.clipAction(clip);
        // clipAction.play();

        gltf.scene.traverse(function (child) {
            if (child.isMesh) {

                var kf = new THREE.VectorKeyframeTrack('child.material', times, material_list);
                var clip = new THREE.AnimationClip('Action', 3, [kf]);

                mixer = new THREE.AnimationMixer(child);

                var clipAction = mixer.clipAction(clip);
                clipAction.play()

                // child.material = material;

            }

            scene.add(gltf.scene);
        });
    });


    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', render);
    controls.update();
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}

function render() {
    renderer.render(scene, camera);
}

// function animate() {
//
//     requestAnimationFrame( animate );
//
//     mesh.material.map.offset.x += 0.005;
//     mesh.material.map.offset.y += 0.005;
//
//     renderer.render( scene, camera );
//
// }

child.material

第二个问题是如何通过将每个图像作为纹理加载为材质来对模型进行动画处理。

如何使用ThreeJS为gltf模型制作动画

0 个答案: