three.JS

Biblioteka JS używana do tworzenia i wyświetlania animowanej grafiki 3D w przeglądarce. Wykorzystamy ją do tworzenia obiektów 3D i gier

  1. Jak używać biblioteki three.JS

W google wyszukaj sobie coś takiego: three.js download. Potrzebujemy pliku, który się nazywa three.js [pobierz tutaj]. Znajdź plik o nazwie three.js i przekopiuj go do swojego foldery z aplikacją

Struktura folderu app

index.html – plik projektu
main.js – skrypt
style.css – style css
js/three.js – bilioteka w folderze js

plik index.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 src="main.js">
     
    </script>
</body>
</html>

plik main.js

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 );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 8;



function animate() {  
      requestAnimationFrame( animate );  
      renderer.render( scene, camera ); 
      cube.rotation.x += 0.01; 
      cube.rotation.y += 0.01;
} 
animate();

Aby zobaczyć efekty wystarczy w przeglądarce odpalić plik index.html