Cut And
Paste Code For Lesson 20
This week we'll
look at rotating 3D objects.
Click here
to go back to our lessons page.
3D rotating JavaScript Sphere Code:
<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script
src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var
camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function
init() {
scene = new THREE.Scene();
var
aspect = window.innerWidth / window.innerHeight;
camera
= new THREE.PerspectiveCamera(75, aspect, 1, 1000);
camera.position.z
= 500;
scene.add(camera);
geometry
= new THREE.IcosahedronGeometry(200, 1);
material
= new THREE.MeshBasicMaterial({
color:
0x000000,
wireframe: true,
wireframeLinewidth:
2
});
mesh = new THREE.Mesh(geometry,
material);
scene.add(mesh);
renderer
= new THREE.CanvasRenderer();
renderer.setClearColorHex(0xffffff);
renderer.setSize(window.innerWidth,
window.innerHeight);
document.body.style.margin =
0;
document.body.style.overflow = 'hidden';
document.body.appendChild(renderer.domElement);
}
function
animate() {
requestAnimationFrame(animate);
mesh.rotation.x
= Date.now() * 0.0005;
mesh.rotation.y = Date.now()
* 0.001;
renderer.render(scene, camera);
}
</script>
Code To Add To Cover Ball:
// first lesson code added at line 33
var shape = new THREE.SphereGeometry(100);
var
cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape,
cover);
scene.add(ball);