Currently, I am stuck while creating a wireframe sphere object and defining vertices for it. Additionally, I need help with applying back-face culling to the created sphere. Can anyone assist me with this task?
In my HTML file, I have been using the three.js library as I am relatively new to WebGL. Unfortunately, I haven't been able to solve this problem on my own.
<html>
<head>
<title> Creating a Sphere Model in WebGL </title>
<script src ="./three.js-master/three.js-master/build/three.js"></script>
<script src ="./three.js-master/three.js-master/build/three.min.js"></script>
<script type="text/javascript" src="Three.js"></script>
</head>
<body onload="createsphere()">
<canvas id="glcanvas" width="840" height="620"></canvas>
</body>
</html>
My linked JavaScript file is named 'Three.js'.
function createsphere() {
var pos = function(d) { return document.getElementById(d); };
// Define scene, camera, renderer
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);
// Create a wireframe sphere object
var spheregeometry = new THREE.SphereGeometry(1.0, 30, 30);
var texture = THREE.ImageUtils.loadTexture('earth.jpg', {}, function() { alert('texture loaded');}, function(){ alert('error loading texture');});
var spherematerial = new THREE.MeshBasicMaterial({wireframe: true, map: texture});
var sphere = new THREE.Mesh(spheregeometry, spherematerial);
scene.add(sphere);
camera.position.z = 5;
// Render the scene
var render = function(e) {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
}