I recently created a simple example using Three.js, but my code was not organized into classes which caused some issues with displaying anything in the view. Here is an example of the code I used:
HTML file
<!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 () {
// Initialization code
};
CommonExperiment.prototype.animate = function () {
// Animation code
};
CommonExperiment.prototype.addTestCube = function () {
// Code to add test cube
};
CommonExperiment.prototype.render = function () {
// Rendering code
};
If anyone can offer advice or assistance, I would greatly appreciate it! 😊