Hỏi đáp

"Tận hưởng niềm vui "vọc" cùng three.js"

avatar
Huy Erick
00:00 12/04/2024

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...

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!

1