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

优质文章学习记录

— 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

埃斯顿机器人快速入门

埃斯顿机器人快速入门

本文章适合有一定基础的人学习如：abb，发那科，库卡等这些主流的机器人，一些通用的知识点就不在这里过多描述，只讲一下不同的地方以便快速入门接手项目。 有一定基础！！！ 有一定基础！！！ 有一定基础！！！ 目录 * 1.仿真软件Editor * 1.1下载Editor2.6.05 * 1.2官方最新版下载 * 2.界面介绍 * 3.IO配置 * 4.程序变量与语法 * 5.程序下载 1.仿真软件Editor 1.1下载Editor2.6.05 这个软件是埃斯顿机器人的仿真软件，适合在没有机器人前期准备程序及配置的时候使用。入门学习也非常合适，毕竟也不是一直有都有机会拿实机去练习的。 仿真软件可以选择在官网下载，但是在官网下载有点问题一开始我都找不到，使用我这里先给一个截止到这一篇文章发布前最新版的连接。点🐔下载！！！ 1.2官方最新版下载 进入埃斯顿官网点击资料下载见面，你会发现哎嘿！你要搜索相关的手册或者安装包的名称才能下载，输错了就找不到了! 可以跟着我输入关键字：Editor 2.
Flutter 三方库 llm_json_stream 的鸿蒙化适配指南 - 掌控 LLM 流式 JSON 解析、大模型解析实战、鸿蒙级精密 AIGC 专家

Flutter 三方库 llm_json_stream 的鸿蒙化适配指南 - 掌控 LLM 流式 JSON 解析、大模型解析实战、鸿蒙级精密 AIGC 专家

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 llm_json_stream 的鸿蒙化适配指南 - 掌控 LLM 流式 JSON 解析、大模型解析实战、鸿蒙级精密 AIGC 专家 在鸿蒙跨平台应用执行大型语言模型（LLM）的流式交互（如实时获取大模型生成的结构化 JSON 数据、处理非完整的 JSON 片段解析或是实现一个具备极致反馈速度的 AI 驱动表单）时，如果依赖传统的 jsonDecode，极易在处理“不完整字符串（Chunk）”、“语法中断”或“非预期的文本噪声”时陷入解析异常死循环。如果你追求的是一种完全对齐流式解析规范、支持实时恢复 JSON 结构且具备极致容错性能的方案。今天我们要深度解析的 llm_json_stream—
OpenClaw（Clawdbot）插件更新，新增支持在面板一键QQ和飞书机器人

OpenClaw（Clawdbot）插件更新，新增支持在面板一键QQ和飞书机器人

这次，OpenClaw 插件迎来了一次重要更新。 现在，你可以直接在插件中配置 飞书机器人或 QQ 机器人，让 OpenClaw 真正走出 Web 界面，进入你日常使用的消息工具中。 无需额外部署服务，配置完成后即可开始对话。 重要提示：由于官方更改包名，不支持直接升级，如需更新请卸载旧版插件，安装新版OpenClaw插件，已有数据会丢失，请您评估是否需要更新，新安装不受影响。 配置QQ机器人1. 打开QQ开放平台，注册账号，如已注册可直接登陆 点击编辑 IP 白名单，填写服务器 IP 并保存 点击开发管理，获取APPID、AppSecret 创建完成后点击刚刚创建的机器人 填写机器人基础信息 登录后点击机器人，创建机器人 按提示完成登录 8.将获取到的信息填写到插件，并保存启用 添加后即可在群聊中进行对话 在此处添加完成后回到QQ-群管理-添加机器人，在其他页面找到机器人 选择需要使用的群聊 回到QQ机器人平台，

企业级工作流引擎低代码开发实战指南：RuoYi-Flowable-Plus全攻略

企业级工作流引擎低代码开发实战指南：RuoYi-Flowable-Plus全攻略 【免费下载链接】RuoYi-Flowable-Plus本项目基于 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力。如果觉得这个项目不错，麻烦点个star🌟。 项目地址: https://gitcode.com/gh_mirrors/ru/RuoYi-Flowable-Plus RuoYi-Flowable-Plus是基于RuoYi-Vue-Plus二次开发的开源工作流框架，融合Flowable引擎与可视化流程设计能力，为企业级应用提供低代码工作流解决方案。本文将从项目定位、核心能力到部署实践，全方位解析这款框架的技术架构与应用场景，帮助开发者快速构建企业级工作流系统。 1. 项目定位：企业级工作流解决方案的技术选型 在数字化转型浪潮中，企业对流程自动化的需求日益迫切。RuoYi-Flowable-Plus定位为"开箱即用的企业级工作流引擎"，基于成熟的Spring Boot生态与Flowable BPMN 2.0引擎，提供从流