Hướng dẫn 3d game html - html trò chơi 3d

Question

Nội dung chính Show

Bảng màu
Cấu trúc Code
Dựng var Colors = { red:0xf25346, white:0xd8d0d1, brown:0x59332e, pink:0xF5986E, brownDark:0x23190f, blue:0x68c3c0, }; 1
Tạo một đối tượng với #world { position: absolute; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#e4e0ba, #f7d9aa); } 7
Biển hình trụ
Kết hợp các khối đơn giản để tạo một hình thù phức tạp
Thậm chí còn phức tạp hơn: Tạo máy bay
Chuyển động
Thêm tương tác: Chạy theo trỏ chuột
(Sắp) Xong!

Chúng ta chuẩn bị tạo ra một chiếc máy bay 3D đơn giản sử dụng

<div id="world">div>

7 - thư viện 3D giúp việc thao tác với

<div id="world">div>

8 trở nên nhẹ nhàng hơn.

<div id="world">div>

8 còn khá lạ lẫm với nhiều người vì sự phức tạp cũng như cú pháp GLSL. Nhưng với

<div id="world">div>

7, 3D trong trình duyệt trở nên rất dễ dàng.

Trong hướng dẫn này, chúng ta sẽ tạo ra một cảnh 3D đơn giản với một vài tương tác trong hai phần chính. Ở phần đầu tiên, chúng ta sẽ giải thích những khái niệm cơ bản của

<div id="world">div>

7 và cách cài đặt. Phần thứ hai sẽ đi sâu hơn vào tinh chỉnh các hình khối, thêm các chi tiết và các chuyển động tốt hơn cho các thành phần.

Bắt đầu thôi!

HTML & CSS

Hướng dẫn này sử dụng thư viện

<div id="world">div>

7. Xem trên trang web và GitHub để biết thêm thông tin chi tiết và tải về.

Đầu tiên cần import thư viện vào trong

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

3:

<script type="text/javascript" src="js/three.js">script>

Cần có 1 cái container để

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

4:

<div id="world">div>

Style cho cái div vừa tạo:

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

Màu nền bầu trời. Xong phần

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

5 và

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

6!

JavaScript

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

7 rất dễ sử dụng nếu bạn có kiến thức cơ bản về

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

8.

Bảng màu

Hướng dẫn 3d game html - html trò chơi 3d

Sẽ rất hữu ích nếu chúng ta xác định bảng màu sẽ sử dụng xuyên suốt project. Đối với project này, chúng ta lựa chọn các màu sắc như sau:

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

Cấu trúc Code

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

8 thì dài dòng nhưng cấu trúc của nó khá đơn giản. Tất cả các hàm chính chúng ta cần phải tạo được đưa vào hàm

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

0:

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
	createPlane();
	createSea();
	createSky();

	// bắt đầu vòng lặp cập nhật vị trí các đối tượng
	// và render scene trong mỗi khung hình
	loop();
}

Dựng var Colors = { red:0xf25346, white:0xd8d0d1, brown:0x59332e, pink:0xF5986E, brownDark:0x23190f, blue:0x68c3c0, }; 1

Để tạo một project

<div id="world">div>

7, chúng ta cần tối thiểu những thứ sau:

Một

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1 (khung cảnh): giống như sân khấu để đặt các đối tượng lên

Một

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

4: ở đây chúng ta dùng

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

4 theo góc nhìn, cũng có thể dùng

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

4 trực giao

Một

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

7 (bộ dựng hình): hiển thị toàn bộ

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1 sử dụng

<div id="world">div>

8.

Một hoặc nhiều đối tượng để
```
#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}
```
4, trong trường hợp của chúng ta, cần tạo ra một chiếc máy bay, bãi biển và bầu trời (một vài đám mây)
Một hoặc nhiều nguồn sáng: có các loại nguồn sáng khác nhau sẵn có. Trong project này, chúng ta sẽ sử dụng chủ yếu nguồn sáng bán cầu cho môi trường và nguồn sáng có hướng cho bóng đổ.

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1,

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

4, and

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

7 được tạo trong hàm createScene:createScene:

var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
	renderer, container;

function createScene() {
	// Lấy ra width và height của màn hình,
	// dùng để cài đặt tỉ lệ khung hình (aspect ratio) cho camera
	// và size của renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Tạo scene
	scene = new THREE.Scene();

	// Thêm hiệu ứng sương mù vào scene, cùng màu với
	// màu nền đã style trước đó
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Tạo camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);

	// Đặt vị trí cho camera
	camera.position.x = 0;
	camera.position.z = 200;
	camera.position.y = 100;

	// Tạo renderer
	renderer = new THREE.WebGLRenderer({
		// Cho phép trong suốt để hiển thị màu nền
		// đã định nghĩa trong CSS
		alpha: true,

		// Bật khử răng cưa; hiệu năng sẽ giảm
		// nhưng sẽ ổn thôi vì project này ít đối tượng
		antialias: true
	});

	// Xác định kích cỡ của renderer; trong trường hợp này,
	// là full toàn màn hình
	renderer.setSize(WIDTH, HEIGHT);

	// Cho phép render bóng đổ
	renderer.shadowMap.enabled = true;

	// Thêm DOM của renderer vào
	// container ta đã tạo trong HTML
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	// Nếu người dùng resize trình duyệt
	// cần cập nhật lại camera và size của renderer
	window.addEventListener('resize', handleWindowResize, false);
}

Khi kích thước màn hình thay đổi, chúng ta cần cập nhật kích thước

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

7 và tỉ lệ khung hình của

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

4:

function handleWindowResize() {
	// cập nhật lại kích thước của renderer và camera
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
}

Ánh sáng

Ánh sáng là một trong những phần khó nhất khi vẽ một

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1. Ánh sáng tạo nên cảm xúc cho toàn bộ khung cảnh và cần được xác định một cách cẩn thận. Nhưng tại bước này, chúng ta sẽ chỉ làm ánh sáng vừa đủ tốt để nhìn thấy các đối tượng.

var hemisphereLight, shadowLight;

function createLights() {
	// Nguồn sáng bán cầu là loại có màu tô chuyển (gradient)
	// tham số đầu tiên là màu trời, thứ 2 là màu đất,
	// thứ 3 là cường độ ánh sáng
	hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)

	// Nguồn sáng có hướng tỏa ra từ 1 vị trí nhất định
	// Nó giống như mặt trời, nghĩa là các tia được tạo ra song song với nhau.
	shadowLight = new THREE.DirectionalLight(0xffffff, .9);

	// Đặt vị trí cho nguồn sáng
	shadowLight.position.set(150, 350, 350);

	// Cho phép phủ bóng
	shadowLight.castShadow = true;

	// cài đặt vùng nhìn thấy của bóng đổ
	shadowLight.shadow.camera.left = -400;
	shadowLight.shadow.camera.right = 400;
	shadowLight.shadow.camera.top = 400;
	shadowLight.shadow.camera.bottom = -400;
	shadowLight.shadow.camera.near = 1;
	shadowLight.shadow.camera.far = 1000;

	// cài đặt độ phân giải của bóng đổ; càng cao càng đẹp,
	// nhưng cũng càng nặng nề hơn
	shadowLight.shadow.mapSize.width = 2048;
	shadowLight.shadow.mapSize.height = 2048;

	// thêm vào scene để kích hoạt
	scene.add(hemisphereLight);
	scene.add(shadowLight);
}

Như bạn thấy, rất nhiều thông số được sử dụng để tạo ra ánh sáng. Đừng ngần ngại thử nghiệm với màu sắc, cường độ và số lượng nguồn sáng; bạn sẽ học được cách điều chỉnh chúng cho các nhu cầu khác nhau.

Tạo một đối tượng với #world { position: absolute; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#e4e0ba, #f7d9aa); } 7

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

7 đã có một số lượng lớn các đối tượng nguyên thủy sẵn có như khối lập phương, hình cầu, hình xuyến, hình trụ và mặt phẳng.

Đối với project của chúng ta, tất cả các đối tượng ta tạo ra chỉ đơn giản là sự kết hợp các đối tượng nguyên thủy. Điều đó sẽ giúp chúng ta khỏi phải mô hình hóa các đối tượng bằng một phần mềm 3D.

Biển hình trụ

Chúng ta bắt đầu bằng cách tạo ra biển vì nó là đối tượng dễ tạo nhất. Để giữ cho mọi thứ đơn giản, biển được minh họa như một hình trụ màu xanh đặt ở dưới cùng màn hình. Chúng ta sẽ tìm hiểu làm thế nào để tinh chỉnh hình khối này sau, để biển nhìn hấp dẫn hơn và sóng trông thực tế hơn.

// Định nghĩa đối tượng Sea
Sea = function(){

	// tạo khối hình trụ
	// các tham số:
	// bán kính mặt trên, bán kính mặt đáy, chiều cao, số lượng phân khúc trên bán kính, số lượng phân khúc theo chiều dọc
	var geom = new THREE.CylinderGeometry(600,600,800,40,10);

	// xoay trên trục X
	geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));

	// tạo chất liệu
	var mat = new THREE.MeshPhongMaterial({
		color:Colors.blue,
		transparent:true,
		opacity:.6,
		shading:THREE.FlatShading,
	});

	// Để tạo một đối tượng trong Three.js, ta phải tạo ra một lưới (mesh)
	// là sự kết hợp của một hình khối và chất liệu
	this.mesh = new THREE.Mesh(geom, mat);

	// Cho phép bóng đổ trên biển
	this.mesh.receiveShadow = true;
}

// Khởi tạo và thêm vào scene

var sea;

function createSea(){
	sea = new Sea();

	// đặt vị trí phía dưới scene
	sea.mesh.position.y = -600;

	// thêm lưới này vào scene
	scene.add(sea.mesh);
}

Hãy tóm tắt những gì chúng ta cần để tạo ra một đối tượng. Chúng ta cần phải

tạo khối hình học (

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
	createPlane();
	createSea();
	createSky();

	// bắt đầu vòng lặp cập nhật vị trí các đối tượng
	// và render scene trong mỗi khung hình
	loop();
}

9)

tạo chất liệu (

var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
	renderer, container;

function createScene() {
	// Lấy ra width và height của màn hình,
	// dùng để cài đặt tỉ lệ khung hình (aspect ratio) cho camera
	// và size của renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Tạo scene
	scene = new THREE.Scene();

	// Thêm hiệu ứng sương mù vào scene, cùng màu với
	// màu nền đã style trước đó
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Tạo camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);

	// Đặt vị trí cho camera
	camera.position.x = 0;
	camera.position.z = 200;
	camera.position.y = 100;

	// Tạo renderer
	renderer = new THREE.WebGLRenderer({
		// Cho phép trong suốt để hiển thị màu nền
		// đã định nghĩa trong CSS
		alpha: true,

		// Bật khử răng cưa; hiệu năng sẽ giảm
		// nhưng sẽ ổn thôi vì project này ít đối tượng
		antialias: true
	});

	// Xác định kích cỡ của renderer; trong trường hợp này,
	// là full toàn màn hình
	renderer.setSize(WIDTH, HEIGHT);

	// Cho phép render bóng đổ
	renderer.shadowMap.enabled = true;

	// Thêm DOM của renderer vào
	// container ta đã tạo trong HTML
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	// Nếu người dùng resize trình duyệt
	// cần cập nhật lại camera và size của renderer
	window.addEventListener('resize', handleWindowResize, false);
}

0)

chuyển chúng vào lưới (

var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
	renderer, container;

function createScene() {
	// Lấy ra width và height của màn hình,
	// dùng để cài đặt tỉ lệ khung hình (aspect ratio) cho camera
	// và size của renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Tạo scene
	scene = new THREE.Scene();

	// Thêm hiệu ứng sương mù vào scene, cùng màu với
	// màu nền đã style trước đó
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Tạo camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);

	// Đặt vị trí cho camera
	camera.position.x = 0;
	camera.position.z = 200;
	camera.position.y = 100;

	// Tạo renderer
	renderer = new THREE.WebGLRenderer({
		// Cho phép trong suốt để hiển thị màu nền
		// đã định nghĩa trong CSS
		alpha: true,

		// Bật khử răng cưa; hiệu năng sẽ giảm
		// nhưng sẽ ổn thôi vì project này ít đối tượng
		antialias: true
	});

	// Xác định kích cỡ của renderer; trong trường hợp này,
	// là full toàn màn hình
	renderer.setSize(WIDTH, HEIGHT);

	// Cho phép render bóng đổ
	renderer.shadowMap.enabled = true;

	// Thêm DOM của renderer vào
	// container ta đã tạo trong HTML
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	// Nếu người dùng resize trình duyệt
	// cần cập nhật lại camera và size của renderer
	window.addEventListener('resize', handleWindowResize, false);
}

1)

thêm lưới vào

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1

Với những bước cơ bản này, chúng ta có thể tạo ra nhiều loại đối tượng nguyên thủy khác nhau. Bây giờ, nếu kết hợp chúng, ta có thể tạo ra các hình dạng phức tạp hơn nhiều. Trong các bước sau đây chúng ta tìm hiểu làm thế nào để làm điều đó.

Kết hợp các khối đơn giản để tạo một hình thù phức tạp

Những đám mây phức tạp hơn một chút, vì chúng là các khối lập phương được lắp ráp một cách ngẫu nhiên.

Cloud = function(){
	// Tạo một container rỗng để chứa các phần của đám mây
	this.mesh = new THREE.Object3D();

	// tạo khối lập phương;
	// khối này sẽ được nhân ra để tạo ra các đám mây
	var geom = new THREE.BoxGeometry(20,20,20);

	// tạo chất liệu; chất liệu màu trắng là đủ
	var mat = new THREE.MeshPhongMaterial({
		color:Colors.white,
	});

	// nhân hình khối lên một số ngẫu nhiên lần
	var nBlocs = 3+Math.floor(Math.random()*3);
	for (var i=0; i<nBlocs; i++ ){

		// tạo lưới từ hình khối
		var m = new THREE.Mesh(geom, mat);

		// đặt vị trí và góc quay của mỗi khối ngẫu nhiên
		m.position.x = i*15;
		m.position.y = Math.random()*10;
		m.position.z = Math.random()*10;
		m.rotation.z = Math.random()*Math.PI*2;
		m.rotation.y = Math.random()*Math.PI*2;

		// đặt kích thước của khối ngẫu nhiên
		var s = .1 + Math.random()*.9;
		m.scale.set(s,s,s);

		// cho phép mỗi khối phủ và nhận bóng đổ
		m.castShadow = true;
		m.receiveShadow = true;

		// thêm khối vào container
		this.mesh.add(m);
	}
}

Bây giờ chúng ta đã có một đám mây, chúng ta sẽ sử dụng nó để tạo ra bầu trời bằng cách sao chép và đặt nó ở vị trí ngẫu nhiên quanh trục z:

<div id="world">div>

0

Thậm chí còn phức tạp hơn: Tạo máy bay

Tin xấu là code để tạo máy bay thì hơi dài dòng và phức tạp hơn. Nhưng tin tốt là chúng ta đã học mọi thứ chúng ta cần biết để làm điều đó! Tất cả về việc kết hợp và đóng gói các hình dạng.

<div id="world">div>

1

Bây giờ, chúng ta có thể khởi tạo và thêm vào

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1:

<div id="world">div>

2

Rendering

Chúng ta đã tạo ra một vài đối tượng và cho vào

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1. Nhưng nếu bạn cố gắng để chạy nó lên, bạn không thể nhìn thấy bất cứ thứ gì! Đó là vì chúng ta chưa

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

4. Có thể làm điều đó bằng dòng này:

var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
	renderer, container;

function createScene() {
	// Lấy ra width và height của màn hình,
	// dùng để cài đặt tỉ lệ khung hình (aspect ratio) cho camera
	// và size của renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Tạo scene
	scene = new THREE.Scene();

	// Thêm hiệu ứng sương mù vào scene, cùng màu với
	// màu nền đã style trước đó
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Tạo camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);

	// Đặt vị trí cho camera
	camera.position.x = 0;
	camera.position.z = 200;
	camera.position.y = 100;

	// Tạo renderer
	renderer = new THREE.WebGLRenderer({
		// Cho phép trong suốt để hiển thị màu nền
		// đã định nghĩa trong CSS
		alpha: true,

		// Bật khử răng cưa; hiệu năng sẽ giảm
		// nhưng sẽ ổn thôi vì project này ít đối tượng
		antialias: true
	});

	// Xác định kích cỡ của renderer; trong trường hợp này,
	// là full toàn màn hình
	renderer.setSize(WIDTH, HEIGHT);

	// Cho phép render bóng đổ
	renderer.shadowMap.enabled = true;

	// Thêm DOM của renderer vào
	// container ta đã tạo trong HTML
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	// Nếu người dùng resize trình duyệt
	// cần cập nhật lại camera và size của renderer
	window.addEventListener('resize', handleWindowResize, false);
}

6

Chuyển động

Hãy mang lại sức sống cho khung cảnh của chúng ta bằng cách làm quay cánh quạt của máy bay, xoay biển và những đám mây.

Để làm điều này, chúng ta cần một vòng lặp vô hạn:

<div id="world">div>

3

Như bạn thấy, chúng ta đã chuyển lệnh gọi hàm

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

4 vào trong vòng lặp. Vì mỗi thay đổi với các đối tượng cần phải được

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

4 lại.

Thêm tương tác: Chạy theo trỏ chuột

Tại thời điểm này, có thể thấy máy bay của chúng ta được đặt ở trung tâm của khung cảnh. Những gì chúng ta muốn, là làm nó chạy theo các chuyển động của chuột.

Một khi trang được load xong, chúng ta thêm

var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
	renderer, container;

function createScene() {
	// Lấy ra width và height của màn hình,
	// dùng để cài đặt tỉ lệ khung hình (aspect ratio) cho camera
	// và size của renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Tạo scene
	scene = new THREE.Scene();

	// Thêm hiệu ứng sương mù vào scene, cùng màu với
	// màu nền đã style trước đó
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Tạo camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);

	// Đặt vị trí cho camera
	camera.position.x = 0;
	camera.position.z = 200;
	camera.position.y = 100;

	// Tạo renderer
	renderer = new THREE.WebGLRenderer({
		// Cho phép trong suốt để hiển thị màu nền
		// đã định nghĩa trong CSS
		alpha: true,

		// Bật khử răng cưa; hiệu năng sẽ giảm
		// nhưng sẽ ổn thôi vì project này ít đối tượng
		antialias: true
	});

	// Xác định kích cỡ của renderer; trong trường hợp này,
	// là full toàn màn hình
	renderer.setSize(WIDTH, HEIGHT);

	// Cho phép render bóng đổ
	renderer.shadowMap.enabled = true;

	// Thêm DOM của renderer vào
	// container ta đã tạo trong HTML
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	// Nếu người dùng resize trình duyệt
	// cần cập nhật lại camera và size của renderer
	window.addEventListener('resize', handleWindowResize, false);
}

9 để kiểm tra xem chuột có di chuyển không.

Sửa đổi hàm

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

0 như sau:

<div id="world">div>

4

Ngoài ra, tạo một hàm mới để xử lý sự kiện chuột di chuyển:

<div id="world">div>

5

Bây giờ chúng ta có vị trí x và y của chuột đã chuẩn hoá, chúng ta có thể di chuyển máy bay chính xác.

Cần sửa vòng lặp và thêm hàm mới để cập nhật máy bay:

<div id="world">div>

6

Xin chúc mừng, bạn đã làm cho máy bay di chuyển theo chuột! Hãy xem những gì chúng ta đã làm đến nay: Demo của phần 1.

(Sắp) Xong!

Như bạn thấy đó,

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

7 rất hữu ích trong việc tạo ra nội dung WebGL. Bạn không cần phải biết quá nhiều để thiết lập một

var Colors = {
	red:0xf25346,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
};

1 và

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

4 vài đối tượng tùy chỉnh. Cho đến bây giờ bạn đã học được một số khái niệm cơ bản và bạn đã có thể bắt đầu tinh chỉnh một vài thông số như cường độ ánh sáng, màu sắc sương mù và kích thước của các đối tượng. Bạn thậm chí còn quen với việc tạo ra các đối tượng nữa nhỉ?

Chúng ta vừa hoàn thành xong phần 1 bài hướng dẫn "Tạo 1 cảnh động 3D đơn giản trên web với Three.js". Bài post được dịch từ bài viết gốc của tác giả Karim Maaloul tại địa chỉ http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs. Cảm ơn các bạn đã theo dõi!

programming html Three JS Canvas THREE JS Three js tutorial WebGL 3D JS

Hướng dẫn 3d game html - html trò chơi 3d

HTML & CSS

JavaScript

Bảng màu

Cấu trúc Code

Dựng var Colors = { red:0xf25346, white:0xd8d0d1, brown:0x59332e, pink:0xF5986E, brownDark:0x23190f, blue:0x68c3c0, }; 1

Ánh sáng

Tạo một đối tượng với #world { position: absolute; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#e4e0ba, #f7d9aa); } 7

Biển hình trụ

Kết hợp các khối đơn giản để tạo một hình thù phức tạp

Thậm chí còn phức tạp hơn: Tạo máy bay

Rendering

Chuyển động

Thêm tương tác: Chạy theo trỏ chuột

(Sắp) Xong!

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội