HTML+CSS+JS实现3D建筑结构旋转特效

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏这里常见网页设计作业题材有个人、美食、公司、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的# HTML+CSS+JS实现3D建筑结构旋转特效网页设计制作，画面精明

效果演示：

主要代码实现：

CSS样式：

html,
body {
    overflow: hidden;
    touch-action: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
}
 
canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    user-select: none;
    background: rgb(0, 0, 0);
    cursor: pointer;
}
复制代码

HTML代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>3D建筑结构旋转特效</title>
 
    <link rel="stylesheet" href="css/style.css">
 
</head>
 
<body>
 
    <canvas></canvas>
 
    <!-- 单击以生成新结构 -->
 
    <script src="js/script.js"></script>
 
</body>

 
</html>
复制代码

js部分代码：

const webGL = (transforms, setup) => {
    const canvas = document.querySelector("canvas");
    const gl = canvas.getContext("webgl", {
        alpha: false
    });
    if (!gl) return false;
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);

    const resize = () => {
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        camera.projection(fov);
    };

    window.addEventListener("resize", () => {
        mustResize = true;
    });

    const clearScreen = () => {
        if (mustResize) resize();
        gl.clearColor(0.2, 0.225, 0.25, 1);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    };

    const u3 = (program, name) => {
        const loc = gl.getUniformLocation(program, name);
        return {
            set(v) {
                gl.uniform3f(loc, v[0], v[1], v[2]);
            }
        }
    };

    const computeNormals = (v) => {
        const n = [];
        for (let i = 0; i < v.length; i += 9) {
            const p1x = v[i + 3] - v[i];
            const p1y = v[i + 4] - v[i + 1];
            const p1z = v[i + 5] - v[i + 2];
            const p2x = v[i + 6] - v[i];
            const p2y = v[i + 7] - v[i + 1];
            const p2z = v[i + 8] - v[i + 2];
            const p3x = p1y * p2z - p1z * p2y;
            const p3y = -(p1x * p2z - p1z * p2x);
            const p3z = p1x * p2y - p1y * p2x;
            const mag = Math.sqrt(p3x * p3x + p3y * p3y + p3z * p3z);
            if (mag === 0) {
                n.push(0, 0, 0, 0, 0, 0, 0, 0, 0);
            } else {
                n.push(p3x / mag, p3y / mag, p3z / mag);
                n.push(p3x / mag, p3y / mag, p3z / mag);
                n.push(p3x / mag, p3y / mag, p3z / mag);
            }
        }
        return n;
    };
    
复制代码

打卡文章更新 33 / 100天

大家可以点赞、收藏、关注、评论我啦、有数据库相关的问题随时联系我或交流哟~！

在这里插入图片描述

HTML+CSS+JS实现3D建筑结构旋转特效

主要代码实现：

猜你喜欢