Bài 3: makeup

https://viblo.asia/p/threejs-bai-3-makeup-LzD5de9YKjY

Sau 2 bài giới thiệu cơ bản, hôm nay sẽ là bài cơ bản tiếp theo () đó là make up. Tất nhiên là đem cái khung xương mà 2 bài trước đem ra thì trông không được hấp dẫn lắm, vì vậy giờ sẽ cần trang trí 1 cho mấy cái hình của mình.

Vẽ mặt

Để đơn giản và tối thiểu cho dễ hiểu, mình sẽ lấy ví dụ là khối 'cube' cơ bản nhé. Chỉ cần đơn giản sử dụng lại : thay khai báo geometry từ Shpere sang cube rồi chỉnh lại kích cỡ cho dễ nhìn là đc

var geometry = new THREE.SphereGeometry(1, 8, 5); // size of box

Thành

var geometry = new THREE.CubeGeometry(1, 1, 1); // size of box

Mặt ảnh

Được rồi, giờ bạn lại thấy 1 cái khung lần này là hình lập phương trên màn hình. Như đã nói, giờ cần phải thay cái khung bằng các mặt hình ảnh vẽ vời cho đẹp. Đang sử dụng hình hộp lập phương nên sẽ có 6 mặt cần vẽ. Bởi vì bây giờ phải thay ảnh vào các mặt, có nghĩa là 'vật liệu' cấu tạo nên hình khối đã thay bằng các hình ảnh. Vậy thì cần viết lại material thay bằng các hình ảnh thôi. Để có thể load được ảnh cần vào khối của mình, cần phải gọi thư viện load kết cấu (Texture) ra:

var textureLoader = new THREE.TextureLoader();

Tiếp theo mình sẽ load các hình ảnh vào các thành phần kết cấu mới:

var texture0 = textureLoader.load( 'images/cube1.jpg' );
var texture1 = textureLoader.load( 'images/cube2.jpg' );
... // làm đủ 6 mặt nhé

Giờ, có 6 mặt kết cấu hình ảnh được load lên rồi, ghép lại vào material nữa là được

var material = [
    new THREE.MeshBasicMaterial({map: texture0}), //right
    new THREE.MeshBasicMaterial({map: texture1}), //left
    new THREE.MeshBasicMaterial({map: texture2}), //top
    new THREE.MeshBasicMaterial({map: texture3}), //bottom
    new THREE.MeshBasicMaterial({map: texture4}), //front
    new THREE.MeshBasicMaterial({map: texture5}), //back
];

Đọc chú thích của mình chắc các bạn cũng hiểu, trên kia là thứ tự load hình ảnh vào các mặt của khối lập phương của mình. Giờ, sau đoạn này tất nhiên là đến thêm material vào khối rồi:

    var sphere = new THREE.Mesh(geometry, material);

Giải quyết vấn đề này, để đưa hình ảnh vào chung 1 domain với project đang làm, bạn cần chạy nó trên server. Mình code PHP nên sẽ chạy project này bằng PHP: Chỉ cần cd vào folder project, mở command line chạy lệnh:

php -S 127.0.1.1:1000

Xem mình zoom thử phát thì thấy có gì đó lạ? Khi zoom vào (camera tiến gần tới vật thể), tới khi cắt ngang cái khối. Lúc này là đang nhìn vào bên trong khối, có thể thấy là bên trong trống rỗng, nhưng cũng ko thấy các mặt của khối đâu?

Do ở trên map mới có 1 mặt bên ngoài nên hiện tại mặt bên trong đang là null. Để 2 mặt cùng in 1 hình, thêm side: THREE.DoubleSide vào khi map từng mặt material nhé:

var material = [
    new THREE.MeshBasicMaterial({
        map: texture0,
        side: THREE.DoubleSide
    }), //right
    new THREE.MeshBasicMaterial({
        map: texture1,
        side: THREE.DoubleSide
    }), //left
    new THREE.MeshBasicMaterial({
        map: texture2,
        side: THREE.DoubleSide
    }), //top
    new THREE.MeshBasicMaterial({
        map: texture3,
        side: THREE.DoubleSide
    }), //bottom
    new THREE.MeshBasicMaterial({
        map: texture4,
        side: THREE.DoubleSide
    }), //front
    new THREE.MeshBasicMaterial({
        map: texture5,
        side: THREE.DoubleSide
    }) //back
];

Đây là hình ảnh 'zoom' lên khi mình chỉ double side cho đúng mặt bên phải.

Mặt màu

Nếu không thích mặt hình, muốn mặt màu, thì đổi 1 chút là xong nhé:

new THREE.MeshBasicMaterial({
    color: '#271952'
}),

Tạo khối - ánh sáng

Sau khi thêm các mặt cho khối, thì nhìn vẫn hơi 'giả trân'. Giờ sẽ thêm 1 ít ánh sáng cho đối tượng của chúng ta nhé

Các loại ánh sáng - hướng sáng

Trước hết thì có vài loại ánh sáng, với mỗi loại ánh sáng - hay hướng sáng, sẽ quyết định các vùng tối - sáng của vật thể. Giờ sẽ tìm hiểu các loại ánh sáng trước nhé:

Ambient Light - Ánh sáng tự nhiên
Directional Light - Ánh sáng định hướng
Point Light - Ánh sáng từ 1 điểm
SpotLight - Ánh sáng đèn studio

Ambient Light

Khai báo như sau:

var ambientLight = new THREE.AmbientLight(<Màu của ánh sáng>, <cường độ sáng>);

Và cần truyền vào 2 tham số:

Màu ánh sáng - Dạng hexa nhé (VD: 0xffffff => ánh sáng trắng)
Cường độ ánh sáng: default là 1

Directional Light

Đây là kiểu ánh sáng chỉ chiếu sáng từ 1 hướng. Thường thì nguồn sáng này sẽ khá là xa so với vật thể, các tia sáng sẽ song song với nhau như hình minh họa. Kiểu sáng này sẽ tạo bóng - shadow cho vật thể do chỉ chiếu sáng từ 1 hướng

Point Light

Point Light như tên của nó, nguồn sáng xuất phát từ 1 điểm, và không xa so với vật thể, giống như là cái đèn ngủ vậy.

Khai báo như sau:

var pointLight = new THREE.PointLight(<Màu của ánh sáng>, <cường độ sáng>, <khoảng cách>);
pointLight.position.set( 50, 50, 50 );

Và cần truyền vào 2 tham số:

Màu ánh sáng - Dạng hexa nhé (VD: 0xffffff => ánh sáng trắng)
Cường độ ánh sáng: default là 1
PointLight position: vị trí của nguồn sáng

Spot Light

Spot Light trông và hoạt động giống như ánh sáng điểm trong thế giới thực và tuân theo quy luật vật lý về cường độ suy giảm bình phương nghịch đảo. Ánh sáng bức xạ từ một điểm duy nhất chiếu ra ngoài theo hình nón, càng mở rộng đối tượng ra khỏi chính nguồn sáng, và bị cản lại như cái chụp đèn ấy.

Việc sử dụng thì tương tự như Spot Light nhé:

var spotLight = new THREE.SpotLight(<Màu của ánh sáng>, <cường độ sáng>, <khoảng cách>);
spotLight.position.set( 50, 50, 50 );

Tô bóng bề mặt

Để xác định được ảnh hưởng của ánh sáng lên vật thể trông như thế nào, còn phải xem tới bề mặt vật thể đó thuộc dạng nào nữa Các loại tô bóng bề mặt mình cần tìm hiểu là:

Phong Material
Blinn Material
Lambert Material

Phong

Đại loại là máy sẽ tính toán dựa trên 1 mô hình phản xạ ánh sáng từ các bề mặt và ước lượng màu sắc của điểm ảnh bằng cách nội suy vecto trực giao bề mặt (@@ đau đầu) (Cũng theo Wiki)

Blinn

Đây là cách tô bóng tốn công tính toán nhất trong 3 loại tô bóng ở trên. Cách tô bóng này thường dùng cho các vật liệu như là kính, mặt kim loại với độ bóng sáng cao.

Về cơ bản Blinn và Phong khá giống nhau, nhưng dạng Phong có xu hướng khuếch tán ánh sáng cao hơn, khiến độ bóng 'mềm' hơn, còn Blinn thì ánh sáng phản xạ tập trung hơn, có vẻ 'glossy' hơn. Về vấn đề phân biệt 2 cái này thì mình có xem khá nhiều tài liệu nhưng vẫn không thể làm thế nào cho clear và giải thích dễ hiểu cho mọi người được, nên các bạn cứ xem hình ảnh minh họa và chọn cái nào ưng ý nhé.

Lambert

Đây là bề mặt non-shiny, tức là kiểu như không bị bóng sáng, mặt lì, như là bề mặt vải chẳng hạn.

Bắt đầu chiếu sáng

Tùy vào mục đích và ý đồ, bạn sẽ chọn loại ánh sáng cho phù hợp dựa vào những mô tả ở trên. Mình chọn AmbientLight

var ambientLight = new THREE.AmbientLight(0xffffff, 2.0);
// và đừng quên add ánh sáng vào scene nhé:
scene.add(ambientLight);

AmbientLight Tất nhiên là sẽ được thay bằng loại ánh sáng bạn muốn nhé

Chọn được Material rồi thì chỉ cần thay vào MeshBasicMaterial của bạn thôi:

var material = [
    new THREE.MeshLambertMaterial({
        color: '#271952'
    }), //right
    new THREE.MeshLambertMaterial({
        map: texture1,
        side: THREE.DoubleSide
    }), //left
    new THREE.MeshLambertMaterial({
        map: texture2,
        side: THREE.DoubleSide
    }), //top
    new THREE.MeshLambertMaterial({
        map: texture3,
        side: THREE.DoubleSide
    }), //bottom
    new THREE.MeshLambertMaterial({
        map: texture4,
        side: THREE.DoubleSide
    }), //front
    new THREE.MeshLambertMaterial({
        map: texture5,
        side: THREE.DoubleSide
    }) //back
];

Nếu bạn đang sử dụng Ambient Light, bạn có thể xoay vật thể và thấy mọi thứ sáng choang bình thường

Tuy nhiên bạn chọn các dạng chiếu sáng khác (chiếu sáng từ 1 phía có tạo bóng), thì sẽ thấy mặt đối diện với ánh sáng bị đen thui

Đây là do ánh sáng không chiếu tới mặt sau, tạo khoảng đen như vậy. Để tránh điều này bạn có thể add thêm các ánh sáng khác vào nữa nhé, tưởng tượng như 1 phòng có nhiều bóng đèn, và có cả ánh sáng tự nhiên ấy. Bóng ở vị trí nào sẽ soi cường độ của bóng tới các mặt hướng về phía nó.

var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 5.0 );
scene.add(ambientLight);

var light1 = new THREE.PointLight( 0xff0040, 4, 50 ); // lắp thêm 1 bóng đèn đỏ cường độ sáng x4
scene.add( light1 );

var light2 = new THREE.PointLight( 0x0040ff, 3, 50 ); // lắp thêm bóng nữa
scene.add( light2 );

var light3 = new THREE.PointLight( 0x80ff80, 4, 50 );
scene.add( light3 );

PreviousBài 2: Dịch chuyển đối tượng 3D - Controls NextBài 4: Models loader

Last updated 1 year ago

Was this helpful?