three.js 图像纹理渲染为颜色（使用 ColladaLoader 加载）答案

【问题标题】：three.js image texture rendered as color (loaded with ColladaLoader)three.js 图像纹理渲染为颜色（使用 ColladaLoader 加载）
【发布时间】：2023-04-05 09:09:01
【问题描述】：

我是一个three.js 新手。 2 天前开始学习。

我在 SketchUp 上画了一个框，导出为 collada 文件 (.dae)，用三个.js 加载到场景中。

现在我正在尝试用纹理平铺对象，但失败了。

尝试平铺此纹理：

改为：

我的代码是：

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 500 );
    camera.position.set(-6,1,-3);
    scene = new THREE.Scene();
    // collada

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( 'kutu.dae', function(collada) {
        var object = collada.scene;
        //object.scale.set( 2, 2, 2 );
        object.position.set(.18, 0, -.70 );

        //var material = new THREE.MeshLambertMaterial({color: 0xff00ff});
        var texture = new THREE.TextureLoader().load( "desen.jpg" );
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 2, 2 );
        texture.minFilter = THREE.LinearFilter;

        var material = new THREE.MeshPhongMaterial( {
            map: texture,
            transparent: false
        });

        console.log(material);

        object.traverse( function (child) {

            if ( child instanceof THREE.Mesh ) {
                //if(Math.random() < 0.5)
                //    child.material = material;
                //else
                    child.material = material;
            }
        });

        scene.add( object );
    });

    //

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

    //

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

    //

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

    //

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

    //

    stats = new Stats();
    document.body.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 render() {
    renderer.render( scene, camera );
}

请帮忙...

【问题讨论】：

看起来你的几何体的 UV 有问题。
请多解释。
UV Mapping 告诉顶点映射到纹理中基于百分比的特定位置。图片的左下角是(0, 0)，右上角是(1, 1)。如果几何体中的 UV 未正确映射到图像（例如，全为零），您将得到不好的结果。检查您的 Collada 文件是否正确导出了 UV 坐标。
目前作为新手，我不知道如何检查 uv 映射值。所以我创建了一个 pastebin 网址。你能检查一下有没有问题吗？谢谢你。 pastebin.com/4Rq9xnYk
很高兴你把它整理好了。如果可能，请写下您的解决方案，将其作为答案发布，并接受您自己的答案。这将有助于未来可能遇到同样问题的读者。

标签： javascript three.js texture-mapping collada

【解决方案1】：

好吧，在我们在上面的 cmets 中讨论之后，我决定添加我自己的答案/解决方案。

我强烈建议你先阅读问题的 cmets。

问题是，导出的模型文件中没有给出/附加的 UV 信息。

您必须使用 3d 建模程序（3ds max、Maya、Blender 等）自行定义或使用 SketchUV 插件。

【讨论】：