
3D商城
文章平均质量分 68
努力的Wellington
努力的Wellington
展开
-
【3D商城】添加商品产品模型
【3D商城】添加商品产品模型加载模型通过函数设置模型导入模型解析器场景初始化结果显示加载模型工程目录结构如下,在加载模型时候,选择Base3d.js文件通过函数设置模型 setModel(modelName) { return new Promise((resolve, reject) => { const loader = new GLTFLoader().setPath("files/gltf/"); //初始化解析器 loader.load(原创 2022-03-11 08:46:08 · 250 阅读 · 0 评论 -
【3D商城】调节色调映射和增加控制器
【3D商城】调节色调映射和增加控制器概述色调映射控制器的使用常见错误总结概述本文讲解色调映射以及如何通过控制器来进行旋转去查看场景周围的情况,文件的目录如下色调映射我们使用的是HDR图是动态的,动态的图里面保留了很多信息,图里面有最暗的情况和高亮的情况,是动态的,于是我们可以通过色调映射来处理图片的亮暗情况。 initRenderer() { this.renderer = new THREE.WebGLRenderer({ antialias: true }); // 设置屏原创 2022-03-10 03:00:00 · 609 阅读 · 0 评论 -
【3D商城】三维场景搭建与开发流程
【3D商城】三维场景搭建与开发流程创建一个场景组件安装 threejs创建Base3d.js初始化场景初始化相机初始化渲染器添加环境的纹理创建一个场景组件在views中创建一个场景组件Scene.vue并且在router的index.js中,通过路由映射到场景组件const routes = [{ path: "/scene", component: () => import("../views/Scene.vue"), name: "scene", },]原创 2022-03-09 03:00:00 · 1546 阅读 · 1 评论 -
【3D商城】使用Vuex状态管理完成购物车模块
【3D商城】使用Vuex状态管理完成购物车模块创建购物车的全局数据添加产品到购物车导航栏的购物车模块结果常见问题总结创建购物车的全局数据在store的index.js中 ,创建购物车变量 state() { return { count: 0, isFullscreen: false, //默认不是全屏状态 buycarts: [], //购物车变量 }; }添加产品到购物车 mutations: { addBuyca原创 2022-03-08 03:00:00 · 1083 阅读 · 0 评论 -
【3D商城】切换产品与场景效果
【3D商城】切换产品与场景效果产品内容放入列表场景内容放入列表点击选中框外观状态设置结果产品内容放入列表在Product.vue中,产品列表prod-list标签下写产品的内容(class=“products”)以及加入购物车的按钮 <div class="products"> <div class="prod-item" :class="{ active: pI == data.pIndex }" //判断现在的索引值是否为原创 2022-03-07 03:00:00 · 783 阅读 · 0 评论 -
【3D商城】鼠标滚动控制全屏切换
【3D商城】鼠标滚动控制全屏切换原创 2022-03-06 21:33:01 · 1124 阅读 · 0 评论