Giới thiệu
Bạn đã bao giờ muốn tạo ra những hình ảnh 3D độc đáo và tùy chỉnh theo ý thích của mình chưa? Với sự trợ giúp của three.js, bạn có thể làm điều đó một cách dễ dàng và thú vị. Trang web này cho phép bạn vẽ và xoay chiếc cốc 3D của riêng bạn, và bạn cũng có thể thay đổi thiết kế bất kỳ lúc nào. Hãy cùng khám phá những điều thú vị mà bạn có thể làm với three.js!
Vọc vạch - three.js cơ bản
Tạo môi trường
Đầu tiên, chúng ta cần tạo một môi trường thích hợp để hiển thị các hình ảnh 3D. Bằng việc sử dụng three.js, chúng ta có thể tạo một môi trường 3D đẹp mắt và chân thực. Đoạn code sau đây giúp bạn tạo một môi trường three.js cơ bản:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>3D Mug</title>
<script type="importmap">
{ "imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/addons/": "https://unpkg.com/three/examples/jsm/" } }
</script>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene(); //tạo scene
scene.background = new THREE.Color(0x404040); //thay đổi màu background của scene
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //tạo camera
camera.position.z = 10; //thêm ánh sáng
let lightIntensity = 3;
let lightDist = 100;
let lightColor = 0xFFFFFF;
let light = new THREE.PointLight(lightColor, lightIntensity);
light.position.set(-lightDist * 2.0, 0, lightDist);
scene.add(light);
light = new THREE.PointLight(lightColor, lightIntensity);
light.position.set(lightDist * 2.0, lightDist * 0.25, lightDist);
scene.add(light);
light = new THREE.AmbientLight();
light.color.setRGB(1.0 * lightIntensity, 1.0 * lightIntensity, 1.0 * lightIntensity);
scene.add(light);
const renderer = new THREE.WebGLRenderer(); //tạo renderer để hiển thị scene trên trình duyệt
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement); //tạo OrbitControls để quay camera
camera.position.set(0, 20, 100);
controls.update();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
let loader = new GLTFLoader();
loader.load('đường dẫn đến file mugUV4.gltf', function (data) {
let textureLoader = new THREE.TextureLoader();
textureLoader.load('đường dẫn đến file 1699634074503finish.png', function (texture) {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
let material = new THREE.MeshPhongMaterial({ shininess: 500, side: THREE.DoubleSide, map: texture });
let cdim = 3000;
let canvas = document.createElement('canvas');
canvas.width = cdim;
canvas.height = cdim;
let compositeTexture = new THREE.CanvasTexture(canvas);
compositeTexture.wrapS = THREE.RepeatWrapping;
compositeTexture.wrapT = THREE.RepeatWrapping;
function rebuildTexture() {
let ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-over';
let fcolor = "#65d3d7";
ctx.fillStyle = fcolor;
ctx.fillRect(5, 0, cdim, cdim);
ctx.globalCompositeOperation = "source-over";
let img = texture.image;
let iwid = img.width;
let ihite = img.height;
let max = Math.max(iwid, ihite);
let scl = (cdim / max) * 1;
iwid *= scl;
ihite *= scl;
ctx.drawImage(img, 0, 50, iwid, ihite);
compositeTexture.needsUpdate = true;
material.map = compositeTexture;
material.needsUpdate = true;
}
rebuildTexture();
let mesh = new THREE.Mesh(data.scene.children[0].geometry, material);
scene.add(mesh);
});
})
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html> Thưởng thức kết quả
Hãy chạy thử đoạn mã này để chiêm ngưỡng các hiệu ứng 3D tuyệt vời nhất của bạn! Bạn có thể xoay chiếc cốc 360 độ và thay đổi thiết kế bên ngoài của nó. Đừng ngại vọc vạch và khám phá các khả năng thú vị của three.js!
Hình ảnh minh họa
Chúc bạn có những giây phút thú vị "vọc vạch" với three.js. Hy vọng rằng bài blog này đã mang lại cho bạn thêm những hiểu biết mới và động lực để khám phá khả năng của công nghệ này. Cảm ơn bạn đã dành thời gian để đọc bài viết này!
