Scribd
Upload
20 views5 pages

Tugas Implementing WebXR API

The document summarizes steps to create a basic 3D scene using Three.js including: 1) Importing the three.js library files and creating an index.html and game.js file 2) Configuring the scene, camera, and renderer in game.js 3) Declaring a cube object with geometry and material properties and adding it to the scene 4) Using requestAnimationFrame to continuously render and rotate the cube 5) Viewing the output using the Live Server extension in Visual Studio Code.

Uploaded by

Xandre Ximenes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views5 pages

Tugas Implementing WebXR API

The document summarizes steps to create a basic 3D scene using Three.js including: 1) Importing the three.js library files and creating an index.html and game.js file 2) Configuring the scene, camera, and renderer in game.js 3) Declaring a cube object with geometry and material properties and adding it to the scene 4) Using requestAnimationFrame to continuously render and rotate the cube 5) Viewing the output using the Live Server extension in Visual Studio Code.

Uploaded by

Xandre Ximenes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

TUGAS I

Implementasi dari Buku AR & VR Using the WebXR API

Augmented, Virtual & Mixed Reality

Nama dan Nim:

Alexandre Ventura Ximenes. [Link].003

Dosen :

[Link] Setya Perdana, [Link], [Link]

Institute of Business
(IOB)
Program Master Teknik Informatik
2022
1. Visual Studio Code

a. Import folder [Link]-master setelah di download, ke dalam folder


(“TUGAS1)
b. Langkah berikut, Create file baru namanya “[Link]”. dibawah ini
adalah code di file [Link]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TUGAS #1_Alexandre THREE JS </title>
<style>
body{margin :0;}
canvas{width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="[Link]-master/build/[Link]"></script>
<script src="[Link]"></script>
</body>
</html>
c. Langkah berikut, Create file baru namanya “[Link]”. yang isinya set
scene, camera, render, objek, animet
Di bawah ini adalah code di file [Link]

//configure scene
const scene =new [Link]();
// configure CAMERA
const CAMERA= new [Link](75, [Link] /
[Link],0.1,1000);
//Rendering
const renderer= new [Link]();
// screen size
[Link]([Link], [Link]);
//linking Rendering
[Link]([Link]);
// declaring the cube that rotate
const geometry = new [Link](2,2,2);
//Declaring the material of cube
const material=new [Link]({color: 0x00ff00});
//applying the material
const cube= new [Link](geometry,material);
//adding the cube to the screen
[Link](cube);
//set the depth of field
[Link].z =5;

function animate(){
requestAnimationFrame(animate);
[Link].x +=0.1;
[Link](scene,CAMERA);
}
animate();
d. Pastikan bawah anda sudah mengdowload di extension “Live Server”. Lihat
gambar berikut ini

e. Untuk melihat hasil, klik kanan di file “[Link]”, lalu pilih “open with
live server”. Lihat hasil di gambar berikut ini.

You might also like