文章目录

在AIGC（人工智能生成内容）时代，网页设计和3D编程成为了许多人的热门学习方向。无论你是希望成为一名网页开发者，还是想进入3D建模和动画领域，从零开始学习并掌握这些技能将为你打开许多机会的大门。本文将详细介绍如何从零开始学习网页设计及3D编程，并附上示例代码。

一、网页设计入门

1. 基础知识

网页设计主要包括前端和后端技术。前端技术主要关注用户界面的设计和实现，主要包括HTML、CSS和JavaScript。后端技术则负责处理服务器端的逻辑和数据处理，常见的后端语言包括Node.js、Python等。

2. 学习平台与资源

  • 学习平台：

    • 网易云课堂：提供全面的编程和设计课程，适合零基础学员。
    • 中国大学MOOC：与一流高校合作，提供系统的网页设计课程。
    • Bilibili：有大量免费的网页制作教学视频，从基础到进阶都有。

  • 学习资源：

    • MDN Web Docs：Mozilla开发者网络提供的权威Web技术文档和教程。
    • W3Schools：提供在线的Web教程，内容全面且易于理解。

3. 示例代码：简单的HTML+CSS+JavaScript网页

以下是一个简单的网页示例，展示了如何使用HTML创建结构，CSS进行样式设计，以及JavaScript添加交互功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单网页示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网页</h1>
        <p>这是一个简单的网页示例。</p>
        <button onclick="showAlert()">点击我</button>
    </div>

    <script>
        function showAlert() {
            alert('你点击了按钮！');
        }
    </script>
</body>
</html>

二、3D编程入门

1. 基础知识

3D编程通常涉及3D建模、动画和渲染。常见的3D编程工具包括Unity、Blender等。Unity是一款强大的游戏开发引擎，支持C#编程，而Blender则是一款免费的开源3D创作软件。

2. 学习平台与资源

  • Unity学习平台：

    • Unity官网：提供全面的Unity学习资源和教程。
    • Unity Hub：用于管理Unity编辑器和项目。

  • 学习资源：

    • Unity官方文档：详细的Unity使用指南和API文档。
    • GitHub：可以找到许多开源的Unity项目和示例代码。

3. 示例代码：简单的Unity 3D游戏

以下是一个使用Unity和C#创建简单“收集金币”游戏的示例代码。

步骤：

  1. 创建Unity项目：

    • 打开Unity Hub，点击“New Project”。
    • 选择3D模板，命名项目并选择存储路径。
    • 点击“Create”创建项目。

  2. 设置游戏场景：

    • 在Unity编辑器中，右键点击“Hierarchy”面板，选择3D Object -> Cube，创建一个立方体。
    • 调整立方体的属性，并创建一个地面平面。

  3. 创建玩家和金币模型：

    • 下载或创建玩家和金币的3D模型，将其拖入Unity项目面板中。
    • 将玩家和金币放置在场景中。

  4. 编写脚本：

    • 右键点击项目面板，选择Create -> C# Script，创建两个脚本：PlayerController.cs和Coin.cs。

PlayerController.cs：

using UnityEngine;

public class PlayerController : MonoBehaviour
{
    public float moveSpeed = 5.0f;

    void Update()
    {
        float moveHorizontal = Input.GetAxis("Horizontal");
        float moveVertical = Input.GetAxis("Vertical");
        Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);
        transform.Translate(movement * moveSpeed * Time.deltaTime);
    }
}

Coin.cs：

using UnityEngine;

public class Coin : MonoBehaviour
{
    void OnTriggerEnter(Collider other)
    {
        if (other.CompareTag("Player"))
        {
            Destroy(gameObject);
            // 可以添加收集金币的分数更新逻辑
        }
    }
}

  1. 添加脚本和标签：

    • 将PlayerController.cs脚本附加到玩家模型上。
    • 将Coin.cs脚本附加到金币模型上。
    • 在Unity编辑器中，选择金币模型，在“Inspector”面板中将其“Tag”设置为“Player”。

  2. 设置碰撞检测：

    • 为玩家和金币添加Rigidbody组件，以实现物理效果。
    • 为金币添加Box Collider组件，以检测碰撞。

  3. 运行和测试游戏：

    • 点击Unity编辑器顶部的“Play”按钮，运行游戏并测试玩家移动和金币收集功能。

通过本文，我们详细介绍了如何从零开始学习网页设计和3D编程。网页设计主要关注HTML、CSS和JavaScript，而3D编程则涉及Unity和C#的使用。通过示例代码和详细步骤，希望能够帮助你快速入门并掌握这些技能。在AIGC时代，掌握这些技能将为你带来更多的机会和创造力。

《编程真好玩：从零开始学网页设计及3D编程》

在这里插入图片描述

任务分解：由大化小，掌握设计要点 任务分解：由大化小，掌握设计要点 任务分解：由大化小，掌握设计要点
接近生活：案例真实，力求学以致用 接近生活：案例真实，力求学以致用 接近生活：案例真实，力求学以致用
由浅入深：渐进模式，激发学与练兴趣 由浅入深：渐进模式，激发学与练兴趣 由浅入深：渐进模式，激发学与练兴趣
亦玩亦学：在玩中学，在学中练，轻松学会 亦玩亦学：在玩中学，在学中练，轻松学会 亦玩亦学：在玩中学，在学中练，轻松学会
收获满满：体验编程快乐，获得满满成就感 收获满满：体验编程快乐，获得满满成就感 收获满满：体验编程快乐，获得满满成就感

内容简介

本书从网页开发的基础知识HTML5、CSS、JavaScript开始，以项目实战的方式详细介 绍如何构建自适应网页，并通过工具免费发布自己的网站。在后面的章节中，以主流的3D框架ThreeJS为技术支撑，在网页中编写JavaScript代码，让读者深入浅出地构建完整的3D应用场景。

本书由少儿编程网核心成员编写，作者都具有多年软件开发经验，书中案例中包含很多优秀的软件工程思想，强调编程实战，采用项目驱动和目标导向的思维方法去学习最前沿的计算机编程技术。

本书适合对网页设计和3D编程感兴趣的读者，特别是对前端开发（网站、小程序、3D模型展示、3D游戏原理、数据可视化、虚拟现实等应用方向）有兴趣的青少年。无论是初学者还是有一定基础的爱好者，都能从本书中获益匪浅。

作者简介

少儿编程网（kidscode.cn）成立于2014年，是国内最早专门从事少儿编程教育宣传、推广、普及的公益平台，网站提供了大量的免费图文和视频教程，并有QQ群和微信群提供在线指导和答疑。网站的创始及运营团队均来自于软件开发一线，具有丰富的程序设计开发经验，也有多年的青少年编程教学实践经验，曾编写出版了《带你步入编程世界 ：Scratch 2.0 零基础入门》、《Scratch2.0 少儿编程奇幻之旅》及《从 Scratch 进阶到 Python（基础篇）》。

目录

第1章 小试牛刀——认识网页设计

1.1 认识网页三剑客

1.1.1 网页是什么

1.1.2 HTML、CSS 和 JS 的效果对比

1.2 尝试写个程序吧

1.2.1 创建网站目录

1.2.2 创建自己的第一个网页

1.2.3 HTML 页面结构

第2章 整装待发——升级装备

2.1 VS Code 下载与安装

2.2 VS Code 安装扩展

2.2.1 安装中文语言包

2.2.2 安装 Live Server

2.2.3 安装 Code Runner

2.2.4 VS Code 初体验

2.2.5 创建代码片段

2.2.6 Live Server 本地服务

2.2.7 本地服务启动与关闭

第3章 免费搭建网站

3.1 注册账号，创建隧道

3.1.1 注册账号、登录

3.1.2 创建隧道

3.2 启动隧道，网站上线

3.2.1 下载客户端

3.2.2 启动客户端

3.2.3 网站上线

3.2.4 流程总结

第4章 网页设计制作

4.1 召集助手

4.2 设计草图

4.3 导航栏

4.3.1 创建导航栏框架

4.3.2 给导航添加 Logo 图片

4.3.3 添加导航文字

4.3.4 折叠导航栏

4.4 轮播图

4.4.1 图片切换轮播

4.4.2 添加指示按钮

4.4.3 左右切换按钮

4.4.4 添加图片信息

4.5 校园要闻

4.5.1 搭建框架

4.5.2 填充内容

4.6 视频播放

4.6.1 搭建框架

4.6.2 填充内容

4.6.3 自定义 CSS 样式

4.6.4 裁剪出梯形背景

4.7 照片图集

4.7.1 搭建框架

4.7.2 填充图片

4.7.3 图片溢出隐藏

4.8 表单

4.8.1 创建表单

4.8.2 添加背景图

4.9 底部页脚

4.10 页面动画

第5章 探寻 JavaScript 的世界

5.1 JavaScript 基础知识

5.1.1 第一行 JavaScript 代码

5.1.2 执行 JavaScript 程序

5.1.3 JavaScript 注释

5.1.4 变量和常量

5.1.5 运算符

5.2 流程控制

5.2.1 条件语句

5.2.2 循环语句

5.3 函数

5.3.1 函数的定义

5.3.2 带参数的函数

5.3.3 带返回值的函数

5.3.4 递归函数

5.4 面向对象编程

5.4.1 JavaScript 类

5.4.2 构造方法

5.4.3 类的继承

5.4.4 类的方法重写

5.5 JS 与 HTML

5.5.1 JS 程序对 HTML 的控制

5.5.2 事件

5.5.3 灯光开关

5.5.4 使用帮助手册

第6章 用 JavaScript 构建 3D 世界

6.1 认识 ThreeJS

6.1.1 ThreeJS 框架下载

6.1.2 ThreeJS 中的一些概念

6.2 创建第一个 3D 场景

6.2.1 准备工作

6.2.2 代码实现

6.2.3 三维坐标系

6.2.4 旋转物体

6.3 场景升级

6.3.1 更换材质

6.3.2 添加光源

6.3.3 轨道控制器

6.3.4 ThreeJS 中的颜色

6.3.5 添加多个物体

6.4 面向对象编程构建 3D 场景

6.4.1 自定义类

6.4.2 使用自定义类创建 3D 场景

6.5 Minecraft 场景搭建

6.5.1 Minecraft 中的方块

6.5.2 创建 Minecraft 方块

6.5.3 创建 Minecraft 草坪

6.5.4 封装 BlockGround 类

6.5.5 创建 Minecraft 树

6.5.6 创建一片森林

6.5.7 创建 Minecraft 花

6.5.8 天空盒子

6.5.9 高效地创建地面

6.5.10 创建 Minecraft 草原

6.6 加载 3D 动画模型

6.6.1 加载 GLB 动画模型

6.6.2 加载 FBX 动画模型

6.6.3 加载 Minecraft 游戏玩家

6.7 模拟 Minecraft 游戏场景
# AIGC # 3d
Logo
松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐

cover

数据小白必看：七大排序算法超详细讲解（上）

avatar 松山湖开发者村综合服务平台
cover

发布/部署WebApi服务器(IIS+.NET8+ASP.NETCore)

avatar 松山湖开发者村综合服务平台
cover

【数据结构】6.LinkedList与链表

avatar 松山湖开发者村综合服务平台