Bài 6. Kết xuất và xem một đối tượng 3D three.js

making

Kiến thức cần nắm

1. Plane
Đây là một hình chữ nhật hai chiều đóng vai trò như là mặt đất.
2. Cube
Đây là một khối lập phương ba chiều, chúng tôi sẽ hiển thị bằng màu đỏ.
3. Quả cầu
Đây là hình cầu ba chiều, chúng tôi sẽ kết xuất màu xanh dương.
4. Axes
Đây là các trục x, y và z. Đây là công cụ một gỡ lỗi hữu ích để xem nơi các đối tượng được hiển thị trong không gian 3D. Trục x có màu đỏ, trục y có màu xanh lục và z trục có màu xanh lam.

Tạo thử khung cảnh dùng các đối tượng này

[upl-image-preview url=https://making.vn/assets/files/2021-11-17/1637134206-794303-image.png]

// Tạo một cảnh, sẽ chứa tất cả các yếu tố của chúng ta như vật thể, máy ảnh và ánh sáng.
var scene = new THREE.Scene();

// Tạo một máy ảnh, xác định nơi chúng ta đang xem.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// Tạo kết xuất và đặt kích thước
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);

// hiển thị các trục trên màn hình
var axes = new THREE.AxesHelper(20);
scene.add(axes);

// Tạo mặt phẳng
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xAAAAAA
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

// Xoay và định vị mặt phẳng
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);

// thêm mặt phẳng vào cảnh
scene.add(plane);

// tạo một khối lập phương
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({
  color: 0xFF0000,
  wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// định vị khối lập phương
cube.position.set(-4, 3, 0);

// Thêm khối lập phương vào khung cảnh
scene.add(cube);

// Tạo một quả cầu
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
  color: 0x7777FF,
  wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// Vị trí của quả cầu
sphere.position.set(20, 4, 2);

// Thêm hình cầu vào cảnh
scene.add(sphere);

// Định vị và hướng máy ảnh vào trung tâm của cảnh
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

// thêm đầu ra của trình kết xuất vào phần tử html
document.getElementById("webgl-output").appendChild(renderer.domElement);

// Dựng cảnh
renderer.render(scene, camera);