Three.js adalah mesin 3D ringan dengan tingkat yang sangat rendah abstraksi. Three.js dapat dibuat menggunakan <canvas>, <svg> dan WebGL
Cara Membuat Balok
Buat file html beserta body dan stlylenya
| <html> <head> <title>balok</title> <style type="text/css"> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> </body> </html> |
Pada body include library
| <body> type="text/javascript" src="../build/Three.js"></script> <script type="text/javascript" src="js/RequestAnimationFrame.js"></script> <script type="text/javascript" src="js/Stats.js"></script> </body> |
Dan pada body tambahan java scrib untuk membuat balok
| <script> var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.addObject( mesh ); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility. requestAnimationFrame( animate ); render(); } function render() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } </script> |
