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

Posted 2023-03-23

【中文标题】three.js 图像纹理渲染为颜色（使用 ColladaLoader 加载）

【英文标题】：three.js image texture rendered as color (loaded with ColladaLoader)

【发布时间】：2018-01-06 23:42:37

【问题描述】：

我是一个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

很高兴你把它整理好了。如果可能，请写下您的解决方案，将其作为答案发布，并接受您自己的答案。这将有助于未来可能遇到同样问题的读者。

【参考方案1】：

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

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

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

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