Question

我无法将图像纹理应用于从3D Studio Max导出的对象。正如您在图像中看到的那样，加载的纹理仅在面部中心应用一次。

enter image description here

我试图用

重复纹理

texture.wrapS = texture.wrapT =  THREE.RepeatWrapping;
texture.repeat.x = 2;
texture.repeat.y = 2;

但这是最糟糕的。

请参阅下面的代码

<html>
<head>
    <meta charset="utf8">
    <title>Demo customizer</title>
    <script src="lib/three.min.js"></script>
    <script src="lib/controls/TrackballControls.js"></script>
    <script src="lib/controls/OrbitControls.js"></script>
    <script src="lib/loaders/MTLLoader.js"></script>
    <script src="lib/loaders/OBJMTLLoader.js"></script>
    <script src="lib/loaders/OBJLoader.js"></script>
    <script src="lib/Detector.js"></script>
    <script src="lib/libs/stats.min.js"></script>

</head>
<body>
    <script>
    var renderer, scene, camera, mesh, controls, material;

    document.addEventListener("DOMContentLoaded", function() {

        var manager = new THREE.LoadingManager();
        manager.onProgress = function ( item, loaded, total ) {

            console.log( item, loaded, total );

        };

        var texture = new THREE.Texture();

        var loader = new THREE.ImageLoader( manager );
        loader.load( 'material/textures/granit1.jpg', function ( image ) {

            texture.image = image;
            texture.needsUpdate = true;

            //texture.wrapS = texture.wrapT =  THREE.RepeatWrapping;
            //texture.repeat.x = 2;
            //texture.repeat.y = 2;
        } );

        var loader = new THREE.OBJLoader( manager );



        loader.load( '3ds/test3.obj', function ( object ) { 

            object.position.x = 220;
            object.position.y = -8;

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {
                    console.log(child);
                    child.material.map = texture;

                }

            } );


            // on initialise le moteur de rendu
            renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            // on initialise la scène
            scene = new THREE.Scene();

            // on initialise la camera que l’on place ensuite sur la scène
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            //camera.position.z = 350;

            scene.add(camera);
            //camera.position.set(0,0,350);
            camera.position.set(0,150,400);
            camera.lookAt(scene.position);

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );

            // on ajoute une lumière blanche
            var lumiere = new THREE.DirectionalLight( 0xffffff, 1.0 );
            lumiere.position.set( 0, 0, 400 );
            scene.add( lumiere );
            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );
            //scene.add( mesh );
            scene.add( object );

            // FLOOR
            var floorTexture = new THREE.ImageUtils.loadTexture( 'material/textures/metal/metal001.jpg' );
            floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
            floorTexture.repeat.set( 10, 10 );
            var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
            var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
            var floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.y =0.1;
            floor.rotation.x = Math.PI / 2;
            scene.add(floor);

            animate();

        });

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );

        }
    });

    </script>
</body>
</html>

Answer 1

您需要将uvw坐标应用于模型。这就决定了纹理如何包裹到模型上。

在3ds max中，将uvw修改器应用于模型。你有几个可供选择。如果您的模型很简单，您可以使用简单的模型，例如＆＃34; uvw map＆＃34;否则，如果您的模型很复杂，您可能需要使用＆＃34; unwrap uvw＆＃34;修饰符和调整它相当多。网上有很多关于这样做的教程。

完成此操作后，将纹理添加到3ds max中材质编辑器中材质上的漫反射槽中，并将此材质应用于模型。这只是测试你的纹理是和uvw设置正确。

然后，一旦你的模型和纹理在Max中看起来很好，你就可以从max和load with threejs导出

三个js应用纹理

1 个答案: