Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cara Membuat Animasi 3D Dengan JavaScript - dt06012020

    Diunggah oleh

    Mande
    33 tayangan4 halaman

    Judul Asli

    Cara Membuat Animasi 3D dengan JavaScript_dt06012020

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    33 tayangan4 halaman

    Cara Membuat Animasi 3D Dengan JavaScript - dt06012020

    Diunggah oleh

    Mande

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Cara Membuat Animasi 3D dengan JavaScript

    Creating My first three.js app

    1. Simpan HTML berikut ke file di komputer Anda misal diberi nama 3d.html,
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
    </style>
    </head>
    <body>
    <script src="js/three.js"></script>
    <script>
    // Our Javascript will go here.
    </script>
    </body>
    </html>
    2. Simpan file salinan three.js (https://threejs.org/build/three.js ) di direktori js /,

    3. Panggil file 3d.html dan buka di browser Anda

    Creating the scene

    Untuk benar-benar dapat menampilkan apa pun dengan three.js, kita memerlukan tiga hal:
    adegan, kamera dan penyaji, sehingga kita dapat membuat adegan dengan kamera.
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
    window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    Mari kita tambahkan sekarang.
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;

    Rendering the scene:


    Jika Anda menyalin kode dari atas ke file HTML yang kami buat sebelumnya, Anda tidak akan
    dapat melihat apa pun. Ini karena kita belum benar-benar merender apa pun. Untuk itu, kita
    membutuhkan apa yang disebut render atau animate loop.
    function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    }
    animate();
    Animating the cube:
    Jika Anda memasukkan semua kode di atas ke dalam file yang Anda buat sebelum kami mulai,
    Anda akan melihat kotak hijau. Mari kita buat semuanya sedikit lebih menarik dengan
    memutarnya.
    Tambahkan hak berikut di atas panggilan renderer.render dalam fungsi bernyawa Anda:

    Hasilnya:
    Daftar Pustaka:
    [1] Creating a scene, https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-
    scene

    Anda mungkin juga menyukai