Follow Fang!: 用three.js寫個蛋糕

2023/09/10
用three.js寫個蛋糕

蛋糕本身就是圓柱體堆疊而來的，所以只要去繪製圓柱體
並且做出Y軸差異，堆疊起來及渲染即可
結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生日蛋糕</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<script>
    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 200;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    const fontLoader = new THREE.FontLoader();
    const scene = new THREE.Scene();
    const cake = new THREE.Group();
    const renderer = new THREE.WebGLRenderer();

    function create() {
        renderer.setSize(width, height);
        renderer.setClearColor(0xFFFFFF, 1);
        document.body.appendChild(renderer.domElement);

        camera.position.set(0, 100, 500)
        camera.lookAt(scene.position);

        const light = new THREE.AmbientLight(0xCCCCCC);
        scene.add(light);

        const cakeTexture = new THREE.TextureLoader().load('https://live.staticflickr.com/8658/16455799840_1cf3d228b8_c.jpg');

        const cakeMaterail = new THREE.MeshBasicMaterial({map: cakeTexture})

        const pinkMaterial = new THREE.MeshBasicMaterial({color: 'pink'})

        const cakeGeometry = new THREE.CylinderBufferGeometry(120, 120, 70, 40);
        const cakePart = new THREE.Mesh(cakeGeometry,[cakeMaterail, pinkMaterial, pinkMaterial])
        cakePart.translateY(-25)

        const cakeGeometry2 = new THREE.CylinderBufferGeometry(140, 140, 60, 40);
        const cakePart2 = new THREE.Mesh(cakeGeometry2, [cakeMaterail, pinkMaterial, pinkMaterial])
        cakePart2.translateY(-90)

        const cakeGeometry3 = new THREE.CylinderBufferGeometry(160, 160, 10, 40);
        const cakePart3 = new THREE.Mesh(cakeGeometry3, [cakeMaterail, cakeMaterail, cakeMaterail])
        cakePart3.translateY(-120)

        cake.add(cakePart)
        cake.add(cakePart2)
        cake.add(cakePart3)

        scene.add(cake)
    }


    function render() {        
        renderer.render(scene, camera)
        cake.rotation.y = 0
        requestAnimationFrame(render)
    }

    create()
    render()
</script>
</body>
</html>