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）

回答

相關問題