Pada postingan sebelumnya kita sudah membahas tentang pembuatan web 3d atau webgl dengan menggunakan three.js, bagi yang sudah mencobanya mungkin terpikir bagaimana bila kita memasukkan objek 3d yang kita buat dari software buat 3d seperti maya, 3dmax dan yang lain sebagainya kedalam web, disini kita akan membahasnya bersama-sama, tapi disini hanya akan membahas dari objek 3d menggunakan blender.
Apa itu blender? mau buat jus? bukan kita tidak sedang membahas tentang resep. Dari pada ngawur, lebih baik.ini pengertian menurut wikipedia,
Blender adalah perangkat lunak untuk grafis 3 dimensi yang gratis dan populer di kalangan desainer.
Blender dapat digunakan untuk membuat animasi 3 dimensi. Perangkat lunak ini juga memiliki fitur untuk membuat permainan. Blender tersedia untuk berbagai sistem operasi
Jadi intinya blender adalah software open source yang berguna untuk membuat model 3d ataupun animasi 3d. Meskipun gratis software ini tidak kalah dengan sotware yang berbayar dan ukuran yang ringan juga menjadi salah satu alasan software ini sangat populer.
Bagi yang ingin mendownload silahkan mengunjungi halaman ini
Berikut tampilan awal nya
silahkan di comot,,, cari yang format nya .blend . Baik setelah itu kita akan melanjutnya dan dibuka melalui software blender.
Bagaimana cara menghubungkan objek blender dengan three.js? Nah Jawabannya dengan menggunakan three.js blender exporter. Jadi ini merupakan sebuah plugin yang ditambahkan ke dalam aplikasi blender. Bagi yang sudah mendownload aplikasi three.js dari github, silahkan dibuka foldernya. di
utils\exporters\blender\addons\io_three
selanjutnya copy folder io_three ke dalam lokasi software blender yang diinstal. tepatnya di folder addons
scripts\addonsUntuk memeriksa apakah add ons sudah terdeteksi Kemudian buka kembali sotware blendernya dan buka
blender->user preferences->addonsKemudian ketikkan three di kotak pencarian, jika ketemu selanjutnya centang / ceklis seperti yang terlihat di pada gambar dibawah
dan klik save user settings. Lalu coba buka file->export maka akan terlihat three.js. Masih dalam keadaan objek 3d nya di blender, coba export three.js tadi, dan simpan dalam bentuk format three.js.
Baik sekarang kita langsung coba Kita akan mencoba objek memasuukkan model angry bird ke dalam web bisa di download modelnya disini . Setelah di download silahkan jalankan di blender, maka kira-kira tampilannya bakalan seperti ini...
Selanjutnya kita convert supaya bisa digunakan di three.js dengan cara buka
file->export->three.js(.js)
Catatan: Bagi yang tidak menemukan three.js, maka coba ulangi langkah penginstalan blender exporter
maka kita akan mendapatkan model 3d dalam bentuk format .js. Selanjutnya Lets coding ,
<!doctype html>
<html lang="en">
<head>
<title>Angry Bird</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(120, WIDTH / HEIGHT, 0.4, 3000);
camera.position.set(7,7,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "angry_bird.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
Perlu diperhatikan untuk baris ke-57 bisa dilihat angry_bird.js merupakan hasil convert kita menggunakan blender tadi.
untuk hasilnya kira-kira bakal seperti ini
Masih belajar, jadi bagi yang mempunyai model 3d sendiri yang ingin ditampilkan di web maka jawaban bisa menggunakan three.js ini,
Catatan: Kalau sudah mencoba tetapi tidak muncul di web, solusi bisa ditaruh di localhost,
Bagi yang ingin download source code bisa dilihat di Threeehouse
objectnya tidak bisa didownload..
ReplyDeletePost a Comment