Hướng dẫn can we use javascript to render 3d shapes in web browsers? - chúng ta có thể sử dụng javascript để hiển thị hình dạng 3d trong trình duyệt web không?

Nếu bạn đã từng muốn xây dựng một trò chơi với JavaScript, bạn có thể đã bắt gặp ba.js.

Three.js là một thư viện mà chúng ta có thể sử dụng để hiển thị đồ họa 3D trong trình duyệt. Toàn bộ điều này là trong JavaScript, vì vậy với một số logic, bạn có thể thêm hoạt hình, tương tác hoặc thậm chí biến nó thành một trò chơi.

Trong hướng dẫn này, chúng tôi sẽ trải qua một ví dụ rất đơn giản. Chúng tôi sẽ hiển thị một hộp 3D và trong khi làm như vậy, chúng tôi sẽ tìm hiểu các nguyên tắc cơ bản của ba.js.

Three.js sử dụng WebGL dưới mui xe để hiển thị đồ họa 3D. Chúng tôi có thể sử dụng WebGL đơn giản, nhưng nó rất phức tạp và mức độ khá thấp. Mặt khác, ba.js giống như chơi với Legos.

Trong bài viết này, chúng tôi sẽ trải qua cách đặt một đối tượng 3D trong một cảnh, thiết lập ánh sáng và máy ảnh, và hiển thị cảnh trên một tấm bạt. Vì vậy, hãy để xem cách chúng ta có thể làm tất cả điều này.

Xác định đối tượng cảnh

Đầu tiên, chúng ta phải xác định một cảnh. Đây sẽ là một thùng chứa nơi chúng tôi đặt các vật thể và đèn 3D của chúng tôi. Đối tượng cảnh cũng có một số thuộc tính, như màu nền. Cài đặt đó là tùy chọn mặc dù. Nếu chúng ta không đặt nó, mặc định sẽ có màu đen.

import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Optional, black is default

...

Hình học + Vật liệu = Lưới

Sau đó, chúng tôi thêm hộp 3D của chúng tôi vào cảnh dưới dạng lưới. Một lưới là sự kết hợp của một hình học và một vật liệu.

...

// Add a cube to the scene
const geometry = new THREE.BoxGeometry(3, 1, 3); // width, height, depth
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0); // Optional, 0,0,0 is the default
scene.add(mesh);

...

Hình học là gì?

Một hình học là một hình dạng được hiển thị mà chúng tôi xây dựng - giống như một hộp. Một hình học có thể được xây dựng từ các đỉnh hoặc chúng ta có thể sử dụng một hình dạng được xác định trước.

Boxgeometry là tùy chọn được xác định trước cơ bản nhất. Chúng tôi chỉ phải đặt chiều rộng, chiều cao và độ sâu của hộp và đó là nó.

Bạn có thể nghĩ rằng chúng ta không thể đi xa bằng cách xác định các hộp, nhưng nhiều trò chơi có thiết kế tối giản chỉ sử dụng một kết hợp các hộp.

Có những hình học được xác định trước khác là tốt. Chúng ta có thể dễ dàng xác định một mặt phẳng, một hình trụ, hình cầu hoặc thậm chí là một icosahedron.

Cách làm việc với vật liệu

Sau đó, chúng tôi xác định một vật liệu. Một vật liệu mô tả sự xuất hiện của một đối tượng. Ở đây chúng ta có thể xác định những thứ như kết cấu, màu sắc hoặc độ mờ.

Trong ví dụ này, chúng tôi sẽ chỉ đặt một màu. Vẫn còn các lựa chọn khác nhau cho vật liệu. Sự khác biệt chính giữa hầu hết chúng là cách họ phản ứng với ánh sáng.

Đơn giản nhất là Meshbasicm vật liệu. Vật liệu này không quan tâm đến ánh sáng, và mỗi bên sẽ có cùng màu. Tuy nhiên, nó có thể không phải là lựa chọn tốt nhất, vì bạn có thể nhìn thấy các cạnh của hộp.

Vật liệu đơn giản nhất quan tâm đến ánh sáng là vật liệu meshlambertm. Điều này sẽ tính màu của mỗi đỉnh, thực tế là mỗi bên. Nhưng nó không vượt xa điều đó.

Nếu bạn cần độ chính xác hơn, có nhiều vật liệu nâng cao hơn. Vật liệu Meshphong không chỉ tính toán màu bằng đỉnh mà bởi mỗi pixel. Màu sắc có thể thay đổi trong một bên. Điều này có thể giúp với chủ nghĩa hiện thực nhưng cũng có chi phí trong hiệu suất.

Nó cũng phụ thuộc vào cài đặt ánh sáng và hình học nếu nó có bất kỳ hiệu ứng thực sự nào. Nếu chúng ta kết xuất các hộp và sử dụng ánh sáng định hướng, kết quả sẽ không thay đổi nhiều như vậy. Nhưng nếu chúng ta hiển thị một hình cầu, sự khác biệt là rõ ràng hơn.

Cách định vị một lưới

Khi chúng ta có một lưới, chúng ta cũng có thể định vị nó trong cảnh và đặt một vòng quay theo từng trục. Sau này nếu chúng ta muốn làm động các đối tượng trong không gian 3D, chúng ta sẽ điều chỉnh các giá trị này.

Để định vị, chúng tôi sử dụng cùng một đơn vị mà chúng tôi sử dụng để đặt kích thước. Không có vấn đề gì nếu bạn đang sử dụng số lượng nhỏ hoặc số lớn, bạn chỉ cần nhất quán trong thế giới của riêng bạn.

Đối với vòng quay, chúng tôi đặt các giá trị trong radian. Vì vậy, nếu bạn có các giá trị của mình bằng độ, bạn phải chia chúng cho chúng 180 ° thì nhân với PI.

Cách thêm ánh sáng

Sau đó, hãy thêm đèn. Một lưới với vật liệu cơ bản không cần bất kỳ ánh sáng nào, vì lưới sẽ có màu sắc được đặt bất kể cài đặt ánh sáng.

Nhưng vật liệu Lambert và vật liệu Phong đòi hỏi ánh sáng. Nếu không có bất kỳ ánh sáng nào, lưới sẽ vẫn ở trong bóng tối.

...

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

...

Chúng tôi sẽ thêm hai đèn - ánh sáng xung quanh và ánh sáng định hướng.

Đầu tiên, chúng tôi thêm ánh sáng xung quanh. Ánh sáng xung quanh đang chiếu sáng từ mọi hướng, tạo màu cơ bản cho hình học của chúng tôi.

Để đặt ánh sáng xung quanh, chúng tôi đặt một màu và cường độ. Màu sắc thường là màu trắng, nhưng bạn có thể đặt bất kỳ màu nào. Cường độ là một số từ 0 đến 1. Hai đèn chúng tôi xác định hoạt động theo cách tích lũy, vì vậy trong trường hợp này, chúng tôi muốn cường độ khoảng 0,5 cho mỗi.

Ánh sáng định hướng có một thiết lập tương tự, nhưng nó cũng có một vị trí. Vị trí từ ở đây là một chút sai lệch, bởi vì nó không có nghĩa là ánh sáng đến từ một vị trí chính xác.

Ánh sáng định hướng đang chiếu sáng từ rất xa với nhiều tia sáng song song đều có một góc cố định. Nhưng thay vì xác định các góc, chúng tôi xác định hướng của một tia sáng duy nhất.

Trong trường hợp này, nó tỏa sáng từ hướng của vị trí 10,20,0 đối với tọa độ 0,0,0. Nhưng tất nhiên, ánh sáng định hướng không chỉ là một tia sáng, mà là một lượng vô hạn của các tia song song.

Hãy nghĩ về nó như mặt trời. Ở quy mô nhỏ hơn, các tia sáng mặt trời cũng đi xuống song song, và vị trí mặt trời không phải là vấn đề quan trọng mà là hướng của nó.

Và đó là những gì ánh sáng định hướng đang làm. Nó tỏa sáng trên mọi thứ với các tia sáng song song từ rất xa.

...

const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
dirLight.position.set(10, 20, 0); // x, y, z
scene.add(dirLight);

...

Ở đây chúng tôi đặt vị trí của ánh sáng từ trên cao (với giá trị y) và cũng thay đổi một chút dọc theo trục x. Trục Y có giá trị cao nhất. Điều này có nghĩa là phần trên của hộp nhận được nhiều ánh sáng nhất và nó sẽ là mặt sáng nhất của hộp.

Ánh sáng cũng được di chuyển một chút dọc theo trục X, vì vậy phía bên phải của hộp cũng sẽ nhận được một số ánh sáng, nhưng ít hơn.

Và bởi vì chúng tôi không di chuyển vị trí ánh sáng dọc theo trục z, mặt trước của hộp sẽ không nhận được bất kỳ ánh sáng nào từ nguồn này. Nếu không có ánh sáng xung quanh, mặt trước sẽ vẫn ở trong bóng tối.

Có những loại ánh sáng khác là tốt. Đèn điểm, ví dụ, có thể được sử dụng để mô phỏng bóng đèn. Nó có một vị trí cố định và nó phát ra ánh sáng theo mọi hướng. Và ánh đèn sân khấu có thể được sử dụng để mô phỏng ánh đèn sân khấu của một chiếc xe. Nó phát ra ánh sáng từ một điểm duy nhất vào một hướng dọc theo hình nón.

Cách thiết lập máy ảnh

Cho đến nay, chúng tôi đã tạo ra một lưới với hình học và vật liệu. Và chúng tôi cũng đã thiết lập đèn và thêm vào cảnh. Chúng tôi vẫn cần một máy ảnh để xác định cách chúng tôi nhìn vào cảnh này.

Có hai lựa chọn ở đây: camera phối cảnh và camera chính tả.

Trò chơi video chủ yếu sử dụng máy ảnh phối cảnh, bởi vì cách chúng hoạt động tương tự như cách bạn nhìn thấy mọi thứ trong cuộc sống thực. Những thứ xa hơn dường như nhỏ hơn và những thứ ở ngay trước mặt bạn có vẻ lớn hơn.

Với các phép chiếu chính tả, mọi thứ sẽ có cùng kích thước cho dù chúng cách máy ảnh bao xa. Máy ảnh chính hình có một cái nhìn hình học tối thiểu hơn. Chúng không làm biến dạng các hình học - các đường song song sẽ xuất hiện song song.

Đối với cả hai máy ảnh, chúng ta phải xác định một cái nhìn mờ. Đây là khu vực trong không gian 3D sẽ được chiếu lên màn hình. Bất cứ điều gì bên ngoài khu vực này sẽ không xuất hiện trên màn hình. Điều này là do nó quá gần hoặc quá xa, hoặc vì máy ảnh không chỉ vào nó.

Với phép chiếu phối cảnh, tất cả mọi thứ trong chế độ xem Frustum được chiếu theo quan điểm với một đường thẳng. Mọi thứ cách xa máy ảnh xuất hiện nhỏ hơn trên màn hình, bởi vì từ quan điểm bạn có thể thấy chúng dưới một góc nhỏ hơn.

...

// Perspective camera
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(
  45, // field of view in degrees
  aspect, // aspect ratio
  1, // near plane
  100 // far plane
);

...

Để xác định camera phối cảnh, bạn cần đặt trường nhìn, đó là góc dọc từ quan điểm. Sau đó, bạn xác định tỷ lệ khung hình của chiều rộng và chiều cao của khung. Nếu bạn lấp đầy toàn bộ cửa sổ trình duyệt và bạn muốn giữ tỷ lệ khung hình của nó, thì đây là cách bạn có thể làm điều đó.

Sau đó, hai tham số cuối cùng xác định bao xa các mặt phẳng gần và xa từ quan điểm. Những thứ quá gần với máy ảnh sẽ bị bỏ qua, và những thứ quá xa cũng sẽ bị bỏ qua.

...

// Orthographic camera
const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2, // right
  height / 2, // top
  height / -2, // bottom
  1, // near
  100 // far
);

...

Sau đó, có máy ảnh chính tả. Ở đây chúng tôi không phóng chiếu mọi thứ hướng tới một điểm duy nhất mà là một bề mặt. Mỗi dòng chiếu song song. Đó là lý do tại sao nó không quan trọng đến mức nào các đối tượng cách máy ảnh, và đó là lý do tại sao nó không bóp méo hình học.

Đối với máy ảnh chính hình, chúng ta phải xác định bao xa mỗi mặt phẳng từ quan điểm. Mặt phẳng bên trái là năm đơn vị bên trái, và mặt phẳng bên phải là năm đơn vị bên phải, v.v.

...

camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);

...

Bất kể chúng tôi đang sử dụng máy ảnh nào, chúng tôi cũng cần định vị nó và đặt nó theo hướng. Nếu chúng ta đang sử dụng một máy ảnh chính tả, các số thực tế ở đây thì không quan trọng như vậy. Các đối tượng sẽ xuất hiện cùng kích thước cho dù chúng cách máy ảnh bao xa. Điều quan trọng, mặc dù, là tỷ lệ của họ.

Thông qua toàn bộ hướng dẫn này, chúng tôi đã thấy tất cả các ví dụ thông qua cùng một máy ảnh. Máy ảnh này đã được di chuyển bởi cùng một đơn vị dọc theo mỗi trục và nó nhìn về phía tọa độ 0,0,0. Định vị một camera chính tả giống như định vị một ánh sáng định hướng. Đó không phải là vị trí thực tế quan trọng, mà là hướng của nó.

Vì vậy, chúng tôi đã xoay sở để kết hợp cảnh và một máy ảnh. Bây giờ chỉ có phần cuối cùng bị thiếu mà hiển thị hình ảnh vào trình duyệt của chúng tôi.

Chúng ta cần xác định một WebGlRenderer. Đây là tác phẩm có khả năng kết xuất hình ảnh thực tế thành một bức tranh HTML khi chúng tôi cung cấp một cảnh và máy ảnh. Đây cũng là nơi chúng ta có thể đặt kích thước thực tế của khung vẽ này - chiều rộng và chiều cao của vải trong pixel vì nó sẽ xuất hiện trong trình duyệt.

import * as THREE from "three";

// Scene
const scene = new THREE.Scene();

// Add a cube to the scene
const geometry = new THREE.BoxGeometry(3, 1, 3); // width, height, depth
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 20, 0); // x, y, z
scene.add(directionalLight);

// Camera
const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2, // right
  height / 2, // top
  height / -2, // bottom
  1, // near
  100 // far
);

camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

// Add it to HTML
document.body.appendChild(renderer.domElement);

Và cuối cùng, dòng cuối cùng ở đây thêm khung vẽ này vào tài liệu HTML của chúng tôi. Và đó là tất cả những gì bạn cần để hiển thị một hộp. Nó có vẻ hơi quá nhiều cho một hộp duy nhất, nhưng hầu hết những điều này chúng ta chỉ phải thiết lập một lần.

Nếu bạn muốn tiến lên phía trước với dự án này, thì hãy xem video YouTube của tôi về cách biến điều này thành một trò chơi đơn giản. Trong video, chúng tôi tạo ra một trò chơi xây dựng ngăn xếp. Chúng tôi thêm logic trò chơi, trình xử lý sự kiện và hoạt hình, và thậm chí một số vật lý với Cannon.js.

Nếu bạn có bất kỳ phản hồi hoặc câu hỏi nào về hướng dẫn này, vui lòng tweet cho tôi @hunorborbely hoặc để lại nhận xét trên YouTube.