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) })