当前位置：首页 > news >正文

AIGC时代 | 如何从零开始学网页设计及3D编程

news 来源：原创 2025/5/12 2:20:12

文章目录

一、网页设计入门
- 1. 基础知识
- 2. 学习平台与资源
- 3. 示例代码：简单的HTML+CSS+JavaScript网页
二、3D编程入门
- 1. 基础知识
- 2. 学习平台与资源
- 3. 示例代码：简单的Unity 3D游戏
《编程真好玩：从零开始学网页设计及3D编程》
- 内容简介
- 作者简介
- 目录

在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#创建简单“收集金币”游戏的示例代码。

步骤：

创建Unity项目：
- 打开Unity Hub，点击“New Project”。
- 选择3D模板，命名项目并选择存储路径。
- 点击“Create”创建项目。
设置游戏场景：
- 在Unity编辑器中，右键点击“Hierarchy”面板，选择3D Object -> Cube，创建一个立方体。
- 调整立方体的属性，并创建一个地面平面。
创建玩家和金币模型：
- 下载或创建玩家和金币的3D模型，将其拖入Unity项目面板中。
- 将玩家和金币放置在场景中。
编写脚本：
- 右键点击项目面板，选择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);// 可以添加收集金币的分数更新逻辑}}
}

添加脚本和标签：
- 将PlayerController.cs脚本附加到玩家模型上。
- 将Coin.cs脚本附加到金币模型上。
- 在Unity编辑器中，选择金币模型，在“Inspector”面板中将其“Tag”设置为“Player”。
设置碰撞检测：
- 为玩家和金币添加Rigidbody组件，以实现物理效果。
- 为金币添加Box Collider组件，以检测碰撞。
运行和测试游戏：
- 点击Unity编辑器顶部的“Play”按钮，运行游戏并测试玩家移动和金币收集功能。

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

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

在这里插入图片描述

京东：https://item.jd.com/14243519.html
当当：http://product.dangdang.com/29766287.html

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

内容简介

本书从网页开发的基础知识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 Server2.2.3 安装 Code Runner2.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 与 HTML5.5.1 JS 程序对 HTML 的控制5.5.2 事件5.5.3 灯光开关5.5.4 使用帮助手册第6章 用 JavaScript 构建 3D 世界6.1 认识 ThreeJS6.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 游戏场景

文章目录

一、网页设计入门

1. 基础知识

2. 学习平台与资源

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

二、3D编程入门

1. 基础知识

2. 学习平台与资源

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

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

内容简介

作者简介

目录

相关文章：