three.js图像纹理呈现为颜色（装有ColladaLoader）

我是three.js的新手。 2天前开始学习。three.js图像纹理呈现为颜色（装有ColladaLoader）

我在SketchUp上画了一个盒子，导出为collada文件（.dae），加载到带有three.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); 
}

请帮助...

来源

2017-07-31 R. Canser Yanbakan

看起来你的几何图形的UV有些问题。 – prisoner849

请详细解释。 –

[UV映射]（https://en.wikipedia.org/wiki/UV_mapping）指示顶点映射到纹理中特定的基于百分比的位置。图像的左下角是“（0，0）”，右上角是“（1，1）”。如果几何体中的UV不能正确映射到图像（例如，所有零），则会得到不好的结果。检查您的Collada文件是否正确导出UV坐标。 – TheJim01

好吧，在我们讨论上述评论后，我决定添加自己的答案/解决方案。

我强烈建议您先阅读该问题的评论。

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

您必须使用3D建模程序（3ds max，Maya，Blender等）自己定义它或使用SketchUV插件。

来源

2017-08-06 11:59:03

three.js图像纹理呈现为颜色（装有ColladaLoader）

回答

相关问题