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

Ne0inhk

— 11 min read
AIGC时代 | 如何从零开始学网页设计及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添加交互功能。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="container"><h1>欢迎来到我的网页</h1><p>这是一个简单的网页示例。</p><buttononclick="showAlert()">点击我</button></div><script>functionshowAlert(){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：

usingUnityEngine;publicclassPlayerController:MonoBehaviour{publicfloat moveSpeed =5.0f;voidUpdate(){float moveHorizontal = Input.GetAxis("Horizontal");float moveVertical = Input.GetAxis("Vertical");Vector3 movement =newVector3(moveHorizontal,0.0f, moveVertical); transform.Translate(movement * moveSpeed * Time.deltaTime);}}

Coin.cs：

usingUnityEngine;publicclassCoin:MonoBehaviour{voidOnTriggerEnter(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编程》

在这里插入图片描述
京东：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 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 游戏场景

Read more

免费开源AI工具：CoPaw与OpenFang整理

免费开源AI工具：CoPaw与OpenFang整理

CoPaw 和 OpenFang，两者软件本体都免费开源，但模型 API 可能产生费用。 CoPaw（阿里云） * 软件本身：完全免费开源（Apache 2.0），无会员、无广告、无功能限制 * 本地部署：免费，仅需 Python 环境，可跑本地模型（Ollama 等），零 API 费用 * 云端部署：魔搭创空间有免费测试额度；长期使用按云资源（CPU/GPU/ 存储）计费 * 模型 API：调用通义千问、OpenAI、DeepSeek 等按官方标准按量付费  CoPaw GitHub 地址 https://github.com/agentscope-ai/CoPaw OpenFang（

By Ne0inhk

Vscode中配置Claude code的git bash链接问题

解决VS Code中Claude Code的Git Bash链接问题 问题描述 在VS Code中使用Claude Code时出现错误提示： Error: Claude Code on Windows requires git-bash (https://git-scm.com/downloads/win). 确定git已经安装成果，且按照官方建议设置环境变量CLAUDE_CODE_GIT_BASH_PATH仍无效。 解决方案 删除特定环境变量 在Windows环境变量的用户变量部分，检查并删除CLAUDE_CODE_GIT_BASH_PATH变量（如果存在）。 将Git CMD添加到PATH 编辑用户变量中的Path，添加Git的cmd文件夹路径： * 用户级安装路径：%USERPROFILE%\AppData\Local\Programs\Git\cmd * 全局安装路径：C:\Program Files\

By Ne0inhk

AIVideo与Stable Diffusion结合：自定义视频风格

AIVideo与Stable Diffusion结合：自定义视频风格 1. 引言：AIVideo一站式AI长视频创作平台 随着生成式AI技术的快速发展，AI在视频内容创作领域的应用正逐步从“辅助工具”演变为“全流程生产引擎”。AIVideo作为一款基于开源技术栈构建的一站式AI长视频创作平台，致力于解决传统视频制作中耗时长、成本高、专业门槛高等痛点。用户只需输入一个主题，系统即可自动完成从文案生成、分镜设计、画面渲染、角色动作控制、语音合成到最终剪辑输出的完整流程，最终生成一部具备专业级质量的长视频。 该平台深度融合了Stable Diffusion等先进图像生成模型，支持多种艺术风格（如写实、卡通、电影感、科幻风）的自由切换，真正实现了“风格可定制、流程全自动化”的AI视频生产新模式。尤其适用于知识科普、儿童绘本、AI读书、短视频营销等高频内容场景，显著提升内容创作者的生产效率。 本文将深入解析AIVideo如何与Stable Diffusion协同工作，实现高质量、风格化视频的自动化生成，并提供部署配置与使用实践指南。 2. 核心架构与技术整合机制 2.1 平台整体

By Ne0inhk
机器人逆运动学——以六自由度机器人为例（详解、易懂，附全部Matlab代码）

机器人逆运动学——以六自由度机器人为例（详解、易懂，附全部Matlab代码）

前言 前面机器人正运动学主要讲关节变量到末端执行器位姿的关系，也就是知道了关节变量与连杆参数就可以利用D-H参数表来表达末端位姿。而逆运动学就是已知末端的位姿与连杆参数，来求得关节变量的过程。本文首先介绍何为逆运动学，再以例子的形式利用D-H参数表与齐次变换矩阵对机器人进行逆解。 **阅读提醒1：在运动学逆解前，需要掌握运动学正解的相关知识，也要掌握一定的矩阵运算规则。（相关知识点有在我之前的文章提到，我也在本文进行了引用，如有需要可以查阅；我对机器人正运动学相关的matlab分析单独发了一篇博客，有需要也可以查阅） **阅读提醒2：下文灰色补充块是用于解释正文的，用来补充正文没讲到的知识或细节。 一、运动学逆解 上面提到，已知末端执行器的位姿来求解这一位姿对应的全部关节变量就是逆解，然而由于机械结构的差异，有些时候一个末端位姿可能对应着不同的反解情况(多解)。逆运动学问题实质就是非线性超越方程组的求解问题，其解法分为两大类（封闭解法和数值解法），本文主要讲封闭解法。 1.【 封闭解法 】概述 封闭解法是指具有解析形式的解法，其计算速度快、效率高，更便于实时控制，具

By Ne0inhk