Game Development Reference
In-Depth Information
This is the Hello, World program of Three.js—the minimum code required to get
a spinning shape rendering in the browser. The preview will automatically update
when you change any code, so go ahead and play with it and see what happens. For
example, try changing THREE.MeshBasicMaterial to THREE.MeshNormalMaterial .
What happens if you change IcosahedronGeometry to TorusKnotGeometry ? Try
fiddling with some numbers. Can you make the shape rotate faster or slower?
Been there, scene that
Let's dig deeper into our spinning-shape world and explain how it all works. You
can follow along with this section in the online editor or type the code into a new
HTML file.
First, there's the HTML template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://mrdoob.github.com/three.js/build/three.min.
js"></script>
<script> /* …your code here… */ </script>
</body>
</html>
Nothing surprising here. We're basically just including Three.js and removing the
browser's default page margins. The <canvas> element, onto which we'll render our
scene, will be added into the DOM by our JavaScript.
Instead of using the Three.js file from the GitHub CDN, you should
download the latest Three.js build and include the local copy in your
projects. The full Three.js script can be found in the build folder of
the project or can be downloaded from https://raw.github.com/
mrdoob/three.js/master/build/three.js . In production, you
will want to use the minified version ( three.min.js ).
 
Search WWH ::




Custom Search