免费搭建博客网站,网络营销app,做网站好的网站建设公司排名,网站开发的要注意基本原则#x1f440;前置了解#xff1a;(官网 https://cloudstudio.net/) 什么是Cloud Studio#xff1f; Cloud Studio 是基于浏览器的集成式开发环境#xff08;IDE#xff09;#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装#…前置了解(官网 https://cloudstudio.net/) 什么是Cloud Studio Cloud Studio 是基于浏览器的集成式开发环境IDE为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装随时随地打开浏览器就能在线编程。 为什么要使用Cloud Studio Cloud Studio 作为在线 IDE包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。 Cloud Studio的应用场景有哪些 快速启动项目 (直接创建对应类型的工作空间快速启动项目进入开发状态无需进行繁琐的环境配置)。 实时调试页面 (实时显示网页应用。代码发生改变后预览窗口会自动刷新可以在 Cloud Studio 内实时开发调试网页)。 远程访问云服务器 (支持连接自己的云服务器可以在编辑器中查看云服务器上的文件进行在线编程和部署工作)。 目录
初识Cloud Studio
快速构建3D交互式画面
日常项目基础搭建
本项目具体搭建
具体项目书实现
项目上线git
回顾总结 初识Cloud Studio
对于第一次接触Cloud Studio的朋友可能对这个工具有点陌生博主就在这简单的介绍一下该工具的一些使用事项首先点击博主上面给出的官网连接然后进行注册(这里微信注册即可)注册完毕之后就会进入如下页面 进入 Cloud Studio 云端 IDE可以通过以下两种方式创建工作空间
第一种方式点击模板直接创建工作空间(可自动生成工作空间名称并运行模板的预置环境及样本代码)。 第二种方式单击【新建工作空间】进入工作空间创建页面(需要选择预置环境填写工作空间名、描述并选择运行环境和代码来源)。 工作空间内代码运行的环境您可以选择预置环境包含 Ubuntu、Python、Java和 Node.js 四种也可以选择将其连接到自己的云服务器上。您还可以创建代码来自于 Git 仓库的工作空间代码会被自动克隆到工作空间。
详细的操作大家还是阅读一下 官方文档 给出的具体的功能介绍这里博主就不再详细赘述了。
快速构建3D交互式画面
本次博主打算用云 IDE Cloud Studio社区版快速搭建实现一个3D交互式故事场景关于这篇3D的具体文章可以查看✨ 阳 光 dua 郎 大 男 孩 ✨——阿伟的自述 这篇文章这里我们打算使用Vue3来实现体验云 IDE 给我们带来的优势。闲话少说直接开始操作
日常项目基础搭建
本项目选择使用Vue模板来实现功能。点击 Vue.js 模板卡片进入集成环境加载页面加载成功后即可进入开发环境进行编程如下 当我们点击完框架之后等待不到 30s 左右与带宽网速差异有区别开发环境就初始化配好了。如下 Cloud Studio 帮助我们初始化好开发 Vue 环境并且默认有一个小 Demo系统相关配置信息 在平常的开发中可以直接引入一些相关的第三方库方法如下当然在本项目是用不到下面的一些库的这里仅仅做一个普及如下
当然为了快速开发一般我们会采用一些UI库比如移动端我们经常会选择Vant
# 安装 Vant:
yarn add vant^3.6.12
在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时可以使用 unplugin-vue-components 插件它可以自动引入组件并按需引入组件的样式如下
// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components^0.22.7
本项目是基于 vite 的项目所以在根目录下vite.config.js 文件中配置插件。完成以上安装和如下修改配置文件两步就可以直接在模板中使用 Vant 组件了unplugin-vue-components 会解析模板并自动注册对应的组件。
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
// 引入以下2个库
import Components from unplugin-vue-components/vite;
import { VantResolver } from unplugin-vue-components/resolvers;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 增加以下配置Components({// 不生成类型声明文件自己写dts: false,// 样式需要单独引入resolvers: [VantResolver({ importStyle: false })]}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})
在css这块我们也一般会使用SCSS和LESS这些CSS预处理语言本项目中我们选择less。Vite 和 Webpack 不同不需要 less-loader 等只需安装 less如下
yarn add -D less^3.12.2
在根目录下vite.config.js 文件中配置less配置 Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。所以终端我们还是需要安装一下如下命令
yarn add -D normalize.css^8.0.1
配置完成之后接下来需要在入口文件 src/main.js 中进行引入如下
import { createApp } from vue
import App from ./App.vue
// 按需引入 Vant
import { Tabbar, TabbarItem } from vant;
import vant/lib/index.css
// CSS 重置的现代替代方案
import normalize.css/normalize.css// 实例化 Vue 实例
const app createApp(App)// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);// 挂载到 #app 节点
app.mount(#app)
本项目具体搭建
在本项目中因为是实现的3D可视化技术所以我们需要安装如下的第三方库
npm i three
安装完成之后就可以调用一些基础的three库了如下three.js开启必须用到的基础代码
导入three库
import * as THREE from three
初始化场景
const scene new THREE.Scene()
初始化相机
// 创建相机
const camera new THREE.PerspectiveCamera(45, // 视角window.innerWidth / window.innerHeight, // 宽高比0.1, // 近平面1000 // 远平面
);
// 设置相机位置
camera.position.z 1;
// camera.position.y 2;
// camera.position.x 2;
camera.lookAt(0, 0, 0);
初始化渲染器
// 创建渲染器
const renderer new THREE.WebGLRenderer({antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled true; // 启用阴影映射
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
监听屏幕大小的改变修改渲染器的宽高和相机的比例
// 监听窗口变化
window.addEventListener(resize, () {// 重置渲染器宽高比renderer.setSize(window.innerWidth, window.innerHeight);// 重置相机宽高比camera.aspect window.innerWidth / window.innerHeight;// 更新相机投影矩阵camera.updateProjectionMatrix();
});
导入轨道控制器
// 添加轨道控制器
import { OrbitControls } from three/examples/jsm/controls/OrbitControls
// 添加轨道控制器
const controls new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping true;
// 设置阻尼系数
controls.dampingFactor 0.05;
controls.maxDistance 50;
// 设置旋转速度
// controls.autoRotate true;
设置渲染函数
// 渲染函数
const animate () {controls.update();requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}
animate();
具体项目书实现
项目具体实现是通过 TextureLoader 加载纹理处理各种常见的图像格式如JPEG、PNG和GIF并将它们转换为WebGL可用的纹理对象。这里我们处理我们刚生成好的全景图。
然后再通过补间动画库 tween 进行实现一个简单的动画效果所以这里需要我们按照tween
npm i tween
安装完成之后项目的大概也就能基本完成了如果不清楚 three 的朋友可以推荐看一下我的 three专栏 关于本项目的具体实现可参考我上面分析的文章ok接下来我们只需要把源代码直接粘贴到 Cloud Studio 当值运行即可
templatediv classmodal v-showdata.modalVisiblediv classplayGamediv classbtn clicktoggleContent(0)开始操作/divaudio refaudioPlayer loop autoplay src../../public/sounds/LOVE.mp3/audio/div/divdiv classtextDiv v-showdata.contentVisiblediv classtext{{ data.contentList[data.index].content }}/divdiv classfooterdivv-for(item, i) in data.contentList[data.index].btnsclassbtnclicktoggleContent(item.index){{ item.name }}/div/div/div
/templatescript setup
import { ref ,reactive, onMounted } from vue
// 导入threejs
import * as THREE from three;
// 导入轨道控制器
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;
// 导入TWEEN
import * as TWEEN from tween;// 创建场景
const scene new THREE.Scene();
// 创建相机
const camera new THREE.PerspectiveCamera(45, // 视角window.innerWidth / window.innerHeight, // 宽高比0.1, // 近平面1000 // 远平面
);
// 设置相机位置
camera.position.z 1;
// camera.position.y 2;
// camera.position.x 2;
camera.lookAt(0, 0, 0);// 创建渲染器
const renderer new THREE.WebGLRenderer({antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled true; // 启用阴影映射
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 添加轨道控制器
const controls new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping true;
// 设置阻尼系数
controls.dampingFactor 0.05;
controls.maxDistance 50;
// 设置旋转速度
// controls.autoRotate true;// 渲染函数
const animate () {controls.update();TWEEN.update();requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}
animate();let data reactive({contentList: [{content:阿伟坐在电脑前一边打游戏一边听着妈妈的唠叨。他的脸上满是不耐烦心中充满了对妈妈的反感。此时他的朋友小刚走进来邀请他一起去网吧游玩。阿伟欣然答应两人一起出门。,img: ./textures/story/1.jpg,sound: ./sounds/1.mp3,startAngle: { x: 0, y: 0 },endAngle: { x: -Math.PI / 8, y: Math.PI / 2 },duration: 15000,btns: [{name: 不能听妈妈的唠叨我决定必须和朋友出去玩~,index: 1,},{name: 阿伟回头想了想现在是学习的关键时刻不能老是沉迷于游戏。悬崖勒马回头是岸,index: 2,},],},{content:阿伟和小刚在网吧里玩得不亦乐乎他们在游戏中大显身手引来了众人的羡慕目光。下机后他们准备离开却被一位名叫杰哥的人叫住。,img: ./textures/story/2.jpg,sound: ./sounds/2.mp3,startAngle: { x: Math.PI / 16, y: Math.PI - Math.PI / 16 },endAngle: { x: Math.PI / 16, y: Math.PI Math.PI / 16 },duration: 20000,btns: [{name: 是要发生什么事吗...,index: 3,},],},{content:阿伟和妈妈重新回到了宁静的生活他们学会了如何面对生活中的困境和挑战也更加珍惜彼此之间的感情。,img: ./textures/story/3.jpg,sound: ./sounds/3.mp3,startAngle: { x: 0, y: -Math.PI / 4 },endAngle: { x: 0, y: -Math.PI / 2 },duration: 25000,btns: [],},{content:杰哥热情地邀请阿伟和小刚到他家玩他们在欢笑声中喝得烂醉如泥。杰哥看着阿伟眼神中闪烁着诡异的光芒。,img: ./textures/story/4.jpg,sound: ./sounds/4.mp3,startAngle: { x: Math.PI / 16, y: -Math.PI / 2 - Math.PI / 8 },endAngle: { x: Math.PI / 16, y: -Math.PI / 2 },duration: 20000,btns: [{name: 阿伟被半推半就的被杰哥拉扯着...,index: 4,},],},{content:杰哥把阿伟带到他的房间让他坐在桌前。阿伟的视线落在桌上他看到了一些他从未见过的物品他的心跳开始加速。,img: ./textures/story/5.jpg,sound: ./sounds/5.mp3,startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: 这些到底是什么...,index: 5,},],},{content:杰哥趁阿伟脸红的时候想看他法语正不正常。阿伟感到有些不安但他无法反抗。杰哥一拳把他打到床上他无力反抗只能任由杰哥为所欲为。,img: ./textures/story/6.jpg,sound: ./sounds/6.mp3,startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: 事后...,index: 6,},],},{content:杰哥笑着对阿伟说“我是阳光dua郎大男孩这是我们的秘密你别给我说出去。”阿伟无奈地点头心中充满了恐惧和无助。第二天阿伟收到了杰哥发来的消息说依然想他再来他家开party。阿伟心中充满了恐惧他知道他已经陷入了一个无法逃脱的深渊。,img: ./textures/story/7.jpg,sound: ./sounds/7.mp3,startAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 4 },endAngle: { x: Math.PI / 16, y: Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [{name: 阿伟我不能就这么完了~,index: 7,},],},{content:阿伟决定向警察求助他要揭露杰哥的罪行让他得到应有的惩罚。他知道这将是一场艰难的战斗但他没有退路他必须站出来为自己和其他可能成为杰哥目标的人争取公正。,img: ./textures/story/8.jpg,sound: ./sounds/8.mp3,startAngle: { x: 0, y: -Math.PI / 2 - Math.PI / 4 },endAngle: { x: -Math.PI / 8, y: -Math.PI / 2 - Math.PI / 8 },duration: 25000,btns: [],},],contentVisible: false,modalVisible: true,index: 0,
});let textureLoader new THREE.TextureLoader();
let textures data.contentList.map((item, i) {let texture textureLoader.load(data.contentList[i].img); // 循环加载每一张图片texture.mapping THREE.EquirectangularReflectionMapping; // 通过使用全景纹理图像来模拟环境反射texture.colorSpace THREE.SRGBColorSpace; // 表示和描述颜色的数学模型或系统return texture;
});
let SphereGeometry new THREE.SphereGeometry(100, 32, 32);
SphereGeometry.scale(1, 1, -1);
let material new THREE.MeshBasicMaterial({ map: textures[data.index] });
let sphere new THREE.Mesh(SphereGeometry, material);
sphere.rotation.order XYZ;
scene.add(sphere);let audio new Audio();
let tween;
let audioPlayer ref(null);function toggleContent(dataIndex) {audioPlayer.value.play();setTimeout(() {data.contentList[data.index].sound (audio.src data.contentList[data.index].sound);audio.play();}, 500);data.contentVisible true;data.modalVisible false;data.index dataIndex;camera.position.set(0, 0, 1);sphere.rotation.y data.contentList[dataIndex].startAngle.y;sphere.rotation.x data.contentList[dataIndex].startAngle.x;material.map textures[data.index];material.needsUpdate true;tween tween.stop();tween new TWEEN.Tween(sphere.rotation);tween.to({y: data.contentList[data.index].endAngle.y,x: data.contentList[data.index].endAngle.x,},data.contentList[data.index].duration);// 设置缓动函数tween.easing(TWEEN.Easing.Quadratic.InOut);// 启动补间动画tween.start();
}/scriptstyle scoped
* {margin: 0;padding: 0;
}
body {width: 100vw;height: 100vh;
}
canvas {display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}.textDiv {width: 80%;max-width: 500px;height: auto;padding: 20px 50px;border-radius: 10px;border: 1px solid #9999cc;box-shadow: 0 0 5px #ddddff;z-index: 100;position: fixed;left: 50%;bottom: 30px;transform: translate(-50%, 0);color: #ffffff;background-color: rgba(0, 0, 0, 0.5);text-align: left;line-height: 25px;
}
.playGame {width: 800px;height: 450px;background-image: url(../assets/imgs/boys.jpg);background-size: 100% 100%;border-radius: 50px;position: absolute;left: calc(50% - 400px);top: calc(50% - 225px);z-index: 100;
}
.modal {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 100;background-color: rgba(0, 0, 0, 0.9);
}
.playGame .btn {width: 200px;height: 50px;background-color: rgba(0, 0, 0, 0.5);color: white;display: flex;justify-content: center;align-items: center;border-radius: 10px;position: absolute;left: calc(50% - 100px);bottom: 50px;cursor: pointer;
}
.playGame .btn:hover {background: red;
}
.textDiv .footer {display: flex;justify-content: end;padding: 15px 0;flex-direction: column;align-items: start;
}
.textDiv .btn {width: auto;height: auto;background-color: rgba(50, 50, 100, 0.5);color: white;display: flex;justify-content: center;align-items: center;border-radius: 5px;font-size: 12px;padding: 5px 10px;margin-bottom: 10px;line-height: 24px;cursor: pointer;
}
.textDiv .btn:hover {background: red
}
/style
Cloud Studio 内置预览插件可以实时显示网页应用当代码发生改变之后预览窗口会自动刷新即可在 Cloud Studio 内实时开发调试网页了还提供了二唯码在手机端进行调试。最终呈现的效果如下 复制内置 Chrome 浏览器窗口的地址栏分享给团队的其它成员免去了部署 nginx 的繁琐配置。
运行的项目不再需要服务器将生成的网址复制就可以给任何人观看 项目上线git
由于工作中使用的 git 命令较多所以使用命令进行 git 初始化。左边功能菜单区找到“源代码管理” 这里注意一下Git 首次安装必须设置一下用户签名否则无法提交代码。签名的作用是区分不同操作者的身份用户的签名信息在每一个版本的提交信息中能够看到来以次确认本次提交是谁做的。(签名邮箱信息可以随便填git并不会识别它是否存在当然在公司开发过程中可以实名邮箱签名)注意这里设置用户签名和将来登录 GitHub或其代码托管中心的账号没有任何关系。
进行仓库初始化
// git初始化操作
$ git init
Initialized empty Git repository in /workspace/vuejs-quickstart/webapp/.git/
// 添加文件
$ git add ./
// 提交
$ git commit -m feat: 初始化项目 以发布CODING为例点击“Publish Branch” - 选择Publish To CODING 提示 Cloud Studio CODING Publish - 点击允许会打开一个新的页面进行 CONING 授权授权完后再跳回原页面。 点击“Publish Branch” - 选择Publish To CODING这里看自己的需求这个直接输入仓库名不需要单独在仓库中再额外创建才能推送结果如下 源代码地址https://ztk63lrd.coding.net/public/xiangmu/vue_three/git/files
回顾总结
CloudStudio提供云端开发基于云端的开发环境无需安装任何软件。云端开发不占用自己电脑内存只需要通过浏览器就能够进行编程工作非常方便。对于前端开发者来讲更是梦想中的福音无需用代码初始化项目只需一个模板点击即可生成
网页版的vscode与我们一般用的编辑器别无二致真正做到了随时随地只需一个浏览器就能进行开发非常的方便 创建好的项目如果不想在线上进行运行只需关闭即可 Cloud Studio也适配了很多的服务器版本也提供了相应的免费版本同时适合学生党和企业 我在前端深耕了快两年的时间了虽然时间不长但是对前端研究还是比较深入的就我两年的时光来看我还是比较后悔的后面没有早一点遇到这么一个神一样的工具哈哈 未来的开发也许是云开发的时代拥抱变化是每一位程序员的基本素养让我们一起走进Cloud Studio开发吧
