HTML5创作生日蛋糕，three.js创作生日蛋糕，生日快乐3D建模动画

本文链接：https://blog.youkuaiyun.com/qq_36175946/article/details/115430581

前段时间，女朋友生日，人在外地出差，不知道如何给她过生日，所以想了个办法，做一个程序送给她，完事后再补一个生日过去，考虑到有兄弟会找相关的素材，所以今天公布出来一下，做的不怎么完善，还望海涵！
效果截图：
在这里插入图片描述

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生日快乐</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /*隐藏body区域滚动条*/
        }
    </style>
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
</head>
<body>
<script>
    //窗口宽度
    const width = window.innerWidth;
    //窗口高度
    const height = window.innerHeight;
    //窗口宽高比
    const k = width / height;
    //三维场景显示范围控制系数，系数越大，显示的范围越大
    const s = 200;
    /**
     * 创建文字载体
     */
    const loader = new THREE.FontLoader();
    /**
     * 创建分组
     */
    const asteroids = new THREE.Group();
    /**
     * 创建场景对象
     */
    const scene = new THREE.Scene();
    /**
     * 创建相机
     */
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    /**
     * 创建渲染器
     */
    const renderer = new THREE.WebGLRenderer();
    /**
     * 花瓣分组
     */
    const petal = new THREE.Group();
    /**
     * 底部祝福
     */
    const bottomBlessingCurveObjectGroup = new THREE.Group();
    /**
     * 蛋糕装饰组
     */
    const decorationGroup = new THREE.Group();

    create()
    render()

    // renderPetal()

    function create() {
        loader.load('font/gentilis_bold.typeface.json', function (font) {

            /**
             * 光源设置
             */
            const point = new THREE.AmbientLight(0xCCCCCC);
            // 点光源位置
            point.position.set(200, 200, 200)
            // 将点光源添加到场景中
            scene.add(point)
            // 环境光
            const ambient = new THREE.AmbientLight(0x404040);
            scene.add(ambient)

            /**
             * 相机设置
             */
            //设置相机位置
            camera.position.set(0, 100, 500)
            //设置相机方