Mamy w naszych przeglądarkach możliwości, o których nie śniłoby się 5 czy 10 lat temu. Całe światy gier 3D mogą działać w przeglądarce, a interaktywne strony internetowe mogą być bardziej wciągające.
Z pewną firmą wirtualną, kupowaną przez pewną firmę medialną, teraz jest idealny czas, aby rozpocząć pracę z 3D. O dziwo, możemy teraz tworzyć 3D za pomocą czystego JavaScriptu, w tym siatek i materiałów.
Oczywiście, mimo że jest to możliwe, wymaga ogromnej ilości kodu, i tu pojawia się Three.js, co pozwala nam budować środowiska 3D w prosty sposób iz mniejszą ilością kodu.
Niestety, ponieważ jest nowy, 3D nie jest obsługiwane przez wszystkie przeglądarki. Obecnie ograniczamy się do Chrome, Safari i Firefox.
Z biegiem czasu wsparcie dla IE ulegnie poprawie, ale na razie potrzebujesz wsparcia dla wielbicieli firmy Microsoft.
Pierwszą rzeczą, którą musimy zrobić, to udać się do Witryna three.js i pobierz najnowszą wersję biblioteki.
Następnie umieść go w nagłówku dokumentu, tak jak w przypadku każdego innego pliku JavaScript, i jesteśmy gotowi do pracy.
Pierwszą rzeczą, którą musimy zrobić, aby wyrenderować wszystko za pomocą pliku three.js, jest utworzenie sceny, kamery i renderera. Zaczynając od sceny:
var scene = new THREE.Scene();Następnie potrzebujemy kamery. Pomyśl o tym jako o punkcie widzenia, którego użytkownik szuka. Three.js ma tutaj naprawdę wiele opcji, ale dla uproszczenia użyjemy kamery perspektywicznej:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Ta metoda przyjmuje cztery parametry: pierwszy to pole widzenia, drugi to współczynnik proporcji (zalecam zawsze opierając się na rzutni użytkownika), bliską płaszczyznę obcinania, a na końcu daleką płaszczyznę obcinania. Te dwa ostatnie parametry określają granice renderowania, więc obiekty, które są zbyt blisko lub zbyt daleko, nie są rysowane, co spowodowałoby marnowanie zasobów.
Następnie musimy skonfigurować Renderer WebGL:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Jak widać, pierwszą rzeczą jest stworzenie instancji renderera, a następnie ustawienie jej rozmiaru w oknie roboczym użytkownika, w końcu dodajemy ją do strony, aby utworzyć puste płótno, z którym będziemy mogli pracować.
Jak dotąd wszystko, co zrobiliśmy, jest ustawione na scenie, teraz mamy zamiar stworzyć nasz pierwszy obiekt 3D.
W tym samouczku będzie to prosty cylinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Metoda ta przyjmuje również 4 parametry: pierwszy to promień wierzchołka cylindra, drugi to promień dna cylindra, trzeci to wysokość, a ostatnia to liczba segmentów wysokości.
Ustawiliśmy matematykę obiektu, teraz musimy go zawinąć w materiał, aby wyglądał jak coś na ekranie:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Ten kod dodaje prosty materiał do obiektu, w tym przypadku niebieski kolor. Ustawiłem szkielet na true, ponieważ po animacji będzie lepiej widoczny obiekt.
Na koniec musimy dodać nasz cylinder do naszej sceny, jak na przykład:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Ostatnią rzeczą do zrobienia przed renderowaniem sceny jest ustawienie pozycji kamery:
camera.position.z = 20;Jak widać, JavaScript jest bardzo prosty, ponieważ Three.js zajmuje się wszystkimi skomplikowanymi rzeczami, więc nie musimy tego robić.
Jeśli przetestujesz plik w przeglądarce, zobaczysz, że nic się nie dzieje. To dlatego, że nie powiedzieliśmy tej scenie, by ją oddać. Do renderowania sceny potrzebujemy następującego kodu:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Jeśli teraz spojrzysz na plik w przeglądarce, zobaczysz, że rzeczywiście renderuje cylinder, ale nie jest to zbyt ekscytujące.
Aby naprawdę zwiększyć wartość 3D, musisz rozpocząć animację, którą możemy wykonać za pomocą kilku drobnych zmian w naszej funkcji renderowania :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Jeśli przetestujesz teraz swoją przeglądarkę, zobaczysz odpowiednio animującą butlę 3D.
Jeśli chcesz zobaczyć demo i bawić się z kodem, możesz zrób to tutaj.
Jak widać, stworzenie tej (wprawdzie bardzo prostej) sceny zajęło mniej niż dwa tuziny linii kodu, a udział matematyki był bardzo mały.
Jeśli sprawdzisz przykłady na stronie internetowej three.js zobaczysz niesamowitą pracę, którą wykonałeś.
Ta niesamowita biblioteka JavaScript naprawdę obniżyła poziom podstawowy kodowania 3D do tego stopnia, że każdy, kto potrafi napisać podstawowy skrypt JavaScript, może się zaangażować.