哪个行业该做网站但是没有做,需要优化的网站有哪些?,好的手表网站,兰亭集势网站模板#x1f49b;前情提要#x1f49b;
本文是传知代码平台中的相关前沿知识与技术的分享~
接下来我们即将进入一个全新的空间#xff0c;对技术有一个全新的视角~
本文所涉及所有资源均在传知代码平台可获取
以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦#x…前情提要
本文是传知代码平台中的相关前沿知识与技术的分享~
接下来我们即将进入一个全新的空间对技术有一个全新的视角~
本文所涉及所有资源均在传知代码平台可获取
以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦
以下内容干货满满跟上步伐吧~ 导航小助手 本章重点一. 概述二. 初始化three.js基础代码三. 获取项目所需素材四. 加载图片语音模型总结 本章重点
实现沉浸式交互故事体验 一. 概述 本案例还是借助框架书写three项目借用vite构建工具搭建vue项目搭建完成之后用编辑器打开该项目在终端执行 npm i 安装一下依赖安装完成之后终端在安装 npm i three 即可。 因为搭建的是vue3项目为了便于代码的可读性所以我将three.js代码单独抽离放在一个组件当中在App根组件中进入引入该组件。具体如下
template!-- 3D故事小游戏 --ThreeDStory/ThreeDStory
/templatescript setup
import ThreeDStory from ./components/3DStory.vue
/scriptstyle langless*{margin: 0;padding: 0;}
/style二. 初始化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();三. 获取项目所需素材
讯飞星火模型生成剧本这里我们可以使用科大讯飞的AI模型生成剧本 根据剧情关键词生成对应全景图
我们可以把剧情上关键的词句提取出来放到 Blockade Labs Skybox 中Blockade Labs Skybox 是由 Blockade Labs 开发的一款虚拟现实VR应用程序中的天空盒Skybox它通过将一个包含天空图像的立方体或球体嵌入到场景中来模拟天空。当用户在虚拟现实环境中移动时天空盒会随之变化呈现出不同的天空景象增强了沉浸感和视觉效果。 这里使用TTS-Vue这个微软语音合成工具对我们的剧情文案生成语音进行点击 网址 进入相应的网站点击下面的安装运行进行安装 下载完成之后将你想要转换成语音的文字粘贴到工具中选择自己喜欢的语音进行转换即可 四. 加载图片语音模型
获取完图片和语音素材之后接下来开始对素材进行整合和文字一起放置在响应式 reactive 当中
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,
});图片效果 总结
综上我们基本了解了“一项全新的技术啦” ~~
恭喜你的内功又双叒叕得到了提高
感谢你们的阅读
后续还会继续更新欢迎持续关注哟~
如果有错误❌欢迎指正呀
✨如果觉得收获满满可以点点赞支持一下哟~✨
【传知科技 – 了解更多新知识】
