Three.js代碼在場景中什麼也沒有顯示？

我已經使用Three.js創建了簡單的例子，我之前已經構建了一些代碼，但它並沒有組織成類，在mof =違背代碼之後，視圖中沒有顯示任何內容的問題。Three.js代碼在場景中什麼也沒有顯示？

HTML文件

<!DOCTYPE html> 
<html> 
<head> 
    <title> </title> 
</head> 
<body> 

<div id="scenecontainer"></div> 

<script src="../js/libs/three.js/three.js"></script> 
<script src="../js/libs/Detector.js"></script> 
<script src="../js/libs/stats.min.js"></script> 
<script src="../js/libs/RequestAnimationFrame.js"></script> 

<script src="../js/lab/common/CommonExperiment.js"></script> 
<script src="../js/lab/common/commonMain.js"></script> 
</body> 
</html>

main.js

var viewport; 
var commonExperiment; 

function main() { 
    viewport = document.getElementById("scenecontainer"); 
    commonExperiment = new CommonExperiment(viewport); 
    commonExperiment.addTestCube(); 
    commonExperiment.animate(); 
} 

main();

CommonExperiment.js

function CommonExperiment(domElement, renderStatistics) { 
    this.testMesh = undefined; 

    this.scene = undefined; 
    this.renderer = undefined; 
    this.stats = undefined; 
    this.camera = undefined; 
    this.renderStatistics = (renderStatistics != undefined) ? renderStatistics : true; 
    this.domElement = domElement; 

    this.init(); 
} 

CommonExperiment.prototype.init = function() { 
    if (Detector.webgl) { 
     this.renderer = new THREE.WebGLRenderer({ 
      antialias:true, // to get smoother output 
      preserveDrawingBuffer:true 
     }); 
    } else { 
     Detector.addGetWebGLMessage(); 
     return; 
    } 


    this.renderer.setSize(window.innerWidth, window.innerHeight); 
    this.domElement.appendChild(this.renderer.domElement); 

    if (this.renderStatistics) { 
     this.stats = new Stats(); 
     this.stats.domElement.style.position = 'absolute'; 
     this.stats.domElement.style.bottom = '0px'; 
     document.body.appendChild(this.stats.domElement); 
    } 

    // create a scene 
    this.scene = new THREE.Scene(); 

    // put a camera in the scene 
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    this.camera.position.z = 1000; 
    this.scene.add(this.camera); 



}; 

CommonExperiment.prototype.animate = function() { 
    requestAnimationFrame(this.animate.bind(this)); 

    this.render(); 
// console.log("ahmed"); 

    if (this.stats) { 
     this.stats.update(); 
    } 
}; 

// just test donot use 
CommonExperiment.prototype.addTestCube = function() { 
    var geometry = new THREE.CubeGeometry(200, 200, 200); 
    var material = new THREE.MeshBasicMaterial({ color:0xff0000, wireframe:true }); 
    this.testMesh = new THREE.Mesh(geometry, material); 
    this.scene.add(this.testMesh); 
}; 

// to be overide 
CommonExperiment.prototype.render = function() { 
    this.testMesh.rotation.x += 0.01; 
    this.testMesh.rotation.y += 0.02; 
};

任何幫助嗎？不好意思:) :)。

來源

2012-12-09 Ahmed Hussein

在控制檯中是否有任何javascript錯誤？ – jbabey

@ jbabey no sir，我已經檢查過渲染循環運行正常，iam卡住了簡單的例子:)。 –

我很抱歉我忘了在渲染循環的末尾添加

this.renderer.render(this.scene,this.camera);

。

謝謝:)。

來源

2012-12-09 13:32:45

Three.js代碼在場景中什麼也沒有顯示？

回答

相關問題