Question

我尝试以下面的三个js导入.dae格式的3D模型我能够正确导入它但我看不到该模型的纹理，即使我认为我有纹理文件夹并且没有与之相关的错误。所以我添加了一个函数使用我的函数（switchtexture（））通过传递子的对象和匹配孩子的名字，我可以给赋值纹理，但没有成功可以有人告诉我我做错了什么？这是正确的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - collada - skinning</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background: #777;
            padding: 0;
            margin: 0;
            font-weight: bold;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px;
            width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
        }

        a {
            color: #ffffff;
        }
    </style>
</head>
<body>

    <div id="container"></div>
    <div id="info">
        <a href="https://threejs.org" target="_blank">three.js</a> webgl - collada - skinning
    </div>

    <script src="js/three.js"></script>
    <script src="js/ColladaLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>

    <script>

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

            var container, stats, clock;
            var camera, scene, renderer, mixer;

            init();
            animate();

            function init() {

                container = document.getElementById( 'container' );

                camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( - 7, 4, 7 );

                scene = new THREE.Scene();

                clock = new THREE.Clock();

                // collada

                var loader = new THREE.ColladaLoader();
                loader.options.convertUpAxis = true;
                loader.load("./wolf/Wolf_dae.dae", function (collada) {

                    var object = collada.scene;

                    mixer = new THREE.AnimationMixer( object );

                    object.traverse( function ( child ) {
                        switchTexture(child);
                        if ( child instanceof THREE.SkinnedMesh ) {

                            var clip = THREE.AnimationClip.parseAnimation( child.geometry.animation, child.geometry.bones );
                            mixer.clipAction( clip, child ).play();

                        }

                    } );
                    object.scale.set(1,1,1);
                    object.position.set(0, 0, 0);
                    object.rotateX(- Math.PI/2);
                    scene.add( object );

                } );

                //

                var gridHelper = new THREE.GridHelper( 5, 20 );
                scene.add( gridHelper );

                //

                var ambientLight = new THREE.AmbientLight( 0xcccccc );
                scene.add( ambientLight );

                var directionalLight = new THREE.DirectionalLight( 0xffffff );
                directionalLight.position.set( -1, 0.5, -1 ).normalize();
                scene.add( directionalLight );

                //

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

                //

                controls = new THREE.OrbitControls( camera, renderer.domElement );

                //

                stats = new Stats();
                container.appendChild( stats.dom );

                //

                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();
                stats.update();

            }

            function switchTexture(obj) {
                // for Textures
                var imageDir = './wolf/textures/'; 
                var images = {
                    "Wolf_obj_fur": imageDir + 'Wolf_Fur.jpg'
                };
                for (var prop in images) {
                    if (obj.name == prop) {
                        obj.children[0].material.map = THREE.ImageUtils.loadTexture(images[prop], {}, function () {
                            // add callback here if you want
                        });
                    }
                }
            }


            function render() {

                var delta = clock.getDelta();

                if ( mixer !== undefined ) {

                    mixer.update( delta );

                }

                renderer.render( scene, camera );

            }

    </script>

</body>
</html>

这是查看代码的小提琴

https://jsfiddle.net/saisoft00/jv7rnos2/

我从这个

下载了3d模型

https://free3d.com/3d-model/wolf-rigged-and-game-ready-42808.html

Answer 1

尝试使用THREE.MeshStandardMaterial作为网格材质。

你的switchTexture看起来像这样：

function switchTexture(obj) {
            // for Textures
            var imageDir = './wolf/textures/'; 
            var images = {
                "Wolf_obj_fur": imageDir + 'Wolf_Fur.jpg'
            };
            for (var prop in images) {
                var material = new THREE.MeshStandardMaterial( {
                    map: new THREE.TextureLoader().load(images[prop])
                });
                if (obj.name == prop) {
                    obj.children[0].material = material;
                }
            }
        }

你也应该从ImageUtils转移到TextureLoader，不推荐使用ImageUtils。

在三个js中为动态三维模型添加纹理并想要了解三维模型的动画？

1 个答案: