[Threejs Bài 1] Mở đầu - NHÂN WEB

Một số khái niệm:

• scene: khung cảnh (giống như sân khấu) để đặt các đối tượng lên
• camera: tạo góc nhìn
• renderer: bộ dựng hình, hiển thị scene sử dụng WebGL
• Các đối tượng (object): dựng từ các khối hoặc file model
• light: nguồn sáng

Ví dụ cơ bản:

Import three.js

Có 1 div #container để render

Tất cả cho vào hàm init:

window.addEventListener('load', init, false) function init() { // cài đặt scene, camera và renderer createScene() // thêm ánh sáng createLights() // thêm các đối tượng, ví dụ máy bay createPlane() // bắt đầu vòng lặp (máy bay bay lòng vòng) loop() }

function createScene() { // lấy width và height của màn hình để cài đặt aspect ratio cho camera HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // tạo scene scene = new THREE.Scene() // tạo camera camera = new THREE.PerspectiveCamera(...) // đặt vị trí cho camera camera.position.x = 0, ... y = 100, ... z = 200 // tạo renderer renderer = new THREE.WebGLRenderer(...) ... container = document.getElementById('container') cotainer.appendChild(renderer.domElement)

Tạo ánh sáng:

function createLights() { // tạo 2 nguồn sáng là bán cầu và ánh sáng mặt trời (song song) hemisphereLight = new THREE.HemisphereLight(...) shadowLight = new THREE.DirectionalLight(...) // ... cài đặt linh tinh gì gì đó // add vào scene scene.add(hemisphereLight) scene.add(shadowLight)

Tạo 1 đối tượng:

• Tạo khối hình học (geometry)
• Tạo chất liệu (material)
• Chuyển vào lưới (mesh)
• Thêm lưới vào scene

Ví dụ thử tạo 1 hình trụ:

Sea = function() { // tạo khối hình trụ var geom = new THREE.CylinderGeometry(...) // tạo chất liệu var mat = new THREE.MeshPhongMaterial() // lưới (mesh) là sự kết hợp của 1 hình khối và chất liệu this.mesh = new THREE.Mesh(geom, mat) } // khởi tạo và thêm vào scene var sea = new Sea() scene.add(sea.mesh)

Rendering: cần phải render để xem được:

renderer.render(scene, camera)

Hàm loop() lặp vô hạn:

// thay đổi trạng thái các object sea.mesh.rotation.z +=.005 // render lại renderer.render(scene, camera) // hàm này gọi loop lặp lại sau 1 thời gian nhất định (thay thế cho setInterval()) requestAnimationFrame(loop)

Sơ lược như vậy, sẽ đi kỹ hơn các bài sau

Chia sẻ:

• X
• Facebook

Thích Đang tải...

Liên quan