I have been working on loading a JSON model and displaying it on the canvas, but I am encountering an issue where nothing is being drawn on the screen. Even when I try to use an alert inside the loader.load callback, the alert never shows up because the callback is not being called. I am starting to suspect that there might be something wrong with the JSON file itself, which I downloaded from this source:
Here is the code snippet I am using:
<head>
<title> Teapot </title>
<style>
canvas {width:100%; height:100%; background-color: black}
body {background-color: white};
</style>
</head>
<body>
<h1 align="center"> Teapot </h1>
<script src="/Users/ramy/Documents/HTML/mrdoob-three.js-58e4622/build/three.min.js"></script>
<script type="text/javascript">
// Scene initialization
var scene= new THREE.Scene();
var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z= 50;
// Teapot creation
var teapot;
var loader= new THREE.JSONLoader();
loader.load("/Users/ramy/Documents/HTML/teapot.json",
function(geometry) {
var material= new THREE.MeshBasicMaterial({color:0x00ff00});
teapot= new THREE.Mesh(geometry,material);
scene.add(teapot);
render();
});
// Rendering
var render= function() {
requestAnimationFrame(render);
renderer.render(scene,camera);
}
</script>
</body>
</html>