Bài 2: Dịch chuyển đối tượng 3D - Controls
https://viblo.asia/p/threejs-bai-2-dich-chuyen-doi-tuong-3d-controls-4P856n6W5Y3
https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/DragControls.jsBài 2: Dịch chuyển đối tượng 3D - Controls
<!DOCTYPE html>
<html>
<head>
<title>Three JS</title>
<script type="text/javascript" src="js/three.js"></script>
</head>
<body>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// create the shape
var geometry = new THREE.SphereGeometry(1, 8, 5); // size of box
//create material, color or image
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, wireframe: true} ); //wireframe false will not show wireframe
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 3;
//game login
var update = function() {
};
// draw scene
var render = function() {
renderer.render(scene, camera);
};
//run gameloop (update, render, repeat)
var GameLoop = function() {
requestAnimationFrame(GameLoop);
update();
render();
};
GameLoop();
</script>
</body>
<style type="text/css">
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</html>Responsive canvas
Nếu mọi người thử responsive cho window của chúng ta, chẳng hạn thu nhỏ Chrome lại rồi kéo dãn thu nhỏ các chiều của trình duyệt, thì bạn sẽ thấy là Object của chúng ta như kiểu bị 'position: fixed' trên màn hình vậy, ko hề thu phóng hay đổi vị trí. Giờ Refresh lại, thấy object lại về đúng ở giữa rồi 
. CHú ý 1 chút thì sẽ nhận ra là cái nền màu đen (là màu xanh ở trong codepen cho đẹp ) bị giữ nguyên kích thước của lúc load ra, tức là canvas khi bạn load page đã được tính toán kích cỡ rồi, không thay đổi khi bạn responsive màn hình. Kéo theo đó là mọi thứ trong canvas (cụ thể là cái hình Sphere) sẽ cố định theo canvas này. Lý do thì là vì đoạn code này:
Trong trường hợp bạn thích thế thì chả sao cả, nhưng nếu mà muốn nó responsive, mình sẽ hướng dẫn .
Sử dụng con trỏ (chuột) để xoay
Hình ảnh gif chất lượng ko cao nên có thể bạn thấy ko được rõ lắm, nhưng chắc cũng thấy mờ mờ: mình sử dụng chuột click vào khối 3D của mình và kéo qua lại, khối ấy được xoay qua lại theo con chuột. Nhìn tưởng phức tạp thế thôi chứ ThreeJs có sẵn hỗ trợ rồi: 1 dòng code + 1 dòng khai báo thư viện
Giờ hãy refresh lại và thử thành quả nhé 
https://codepen.io/bunnypi04/pen/VwaVzow
Thoạt qua bạn sẽ nghĩ là chúng ta đang di chuyển khối hình, nhưng thử dùng chuột phải và di chuyển mà xem, có gì đó sai sai =)). Trên thực tế, chúng ta đang di chuyển là cái center point của không gian 3D, hay là chúng ra đang xoay cả vũ trụ canvas
Drag - Di chuyển đối tượng
Pointer Lock control - di chuyển trong không gian 3D
Giờ thì bạn có thể test lock camera rồi
Trackball - xoay không gian
Kết
Bài tiếp theo mình sẽ bắt đầu "trang trí" cho các khối hình, mọi người hãy chờ xem nhé
Last updated