To create a WebGL sphere with Three.js, we can instantiate a SphereGeometry object by defining its radius, segmentsWidth, andsegmentsHeight parameters. Increasing the segmentsWidth and segmentsHeight will yield a more perfect sphere but may degrade rendering performance. Decreasing the segmentsWidth and segmentsHeight will yield a less perfect sphere and may help rendering performance.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js">
</script>
<script defer="defer">
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// sphere
// the first argument of THREE.SphereGeometry is the radius,
the second argument is
// the segmentsWidth, and the third argument is the segmentsHeight.
Increasing the
// segmentsWidth and segmentsHeight will yield a more perfect circle,
but will degrade
// rendering performance
var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100),
new THREE.MeshNormalMaterial());
sphere.overdraw = true;
scene.add(sphere);
renderer.render(scene, camera);
</script>
</body>
</html>
No comments:
Post a Comment