three.js紋理貼圖不顯示


1、材質問題, 比如MeshNormalMaterial材質不可以

2、引入圖片問題

//這種引入方式不可以
loader.load('./ylj.jpg', function(texture) {}
//這種引入方式可以:
var ylj = require('./ylj.jpg')
loader.load(ylj, function(texture) {}

3、渲染方法在圖片加載之前調用了

這種錯誤最有可能,添加其他模型流程是同步的:

添加mesh----渲染

紋理圖片添加是異步的:

添加mesh-->加載紋理圖片--->渲染--->紋理圖片加載成功---->??(加載成功了沒有重新渲染一次)

//一種正確的寫法
var ylj = require('./ylj.jpg')
var loader = new THREE.TextureLoader()
loader.load(ylj, function(texture) {
    var planeGeometry = new THREE.PlaneGeometry(400, 200);
    var planeMaterial = new THREE.MeshLambertMaterial({
        map:texture,
        color: 0xaaaaaa
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = -5;
    plane.receiveShadow = true;
    scene.add(plane);
    //這行渲染的方法,必須保證要在load圖片成功后調用一次才可以,要么成功回調中調用一次,要么這里不調用但是渲染的方法是循環執行的
    renderer.render(scene,camera)
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM