创建一个场景组件

在views中创建一个场景组件Scene.vue并且在router的index.js中，通过路由映射到场景组件

const routes = [
{path: "/scene",component: () => import("../views/Scene.vue"),name: "scene",},
]

安装 threejs

打开终端，输入

npm i three --save

创建Base3d.js

在目录下创建utils文件夹并且在文件夹下创建文件Base3d.js，在Scene.vue里面导入Base3d.js，如下：

import Base3d from "../utils/Base3d.js";

渲染整个canvas画布,三维的效果立体的事件

<template><div class="scene" id="scene"></div>
</template><script setup>
import Base3d from "../utils/Base3d.js";
import { reactive, onMounted } from "vue";
const data = reactive({base3d: {},
});onMounted(() => {data.base3d = new Base3d("#scene");
});
</script>

然后在Base3d.js中首先导入threejs

import * as THREE from "three";

导入RGBELoader

import { RGBELoader } from  "three/examples/jsm/loaders/RGBELoader";

初始化场景

在Base3d{}中构建一个constructor()，首先传入一个选择器selector，这个选择器代表我们要去找到一个对象。找到之后把整个画布渲染到对象当中，同时，需要一个摄像头对象(camera)。之所以看到的东西会动，其实物品没有动，只是摄像头在移动，所以看上去才会动，同时需要一个场景(scene)，当摄像头和场景真正需要显示画面还需要一个render对象。构建需要初始化init,初始化需要把相机初始化出来，场景初始化出来。

class Base3d {constructor(selector, onFinish) {this.container = document.querySelector(selector);this.camera;this.scene;this.renderer;this.init();this.animate();}init() {//   初始化场景this.initScene();// 初始化相机this.initCamera();// 初始化渲染器this.initRenderer();}initScene() {this.scene = new THREE.Scene();    //构建出一个场景this.setEnvMap("000");}
}

初始化相机

在构建相机对象的时候，用透视相机PerspectiveCamera，因为有透视的视角才能看到三维立体的效果，视角通常为45度（屏幕上看上去更加真实），设置浏览器显示的宽高比例来设置相机（window.innerWidth / window.innerHeight）,设置最近的距离0.25，最远距离200，设置相机的三维的位置，比如(-1.8,0.6,2.7)

  initCamera() {this.camera = new THREE.PerspectiveCamera(   //透视相机45,window.innerWidth / window.innerHeight,0.25,200);this.camera.position.set(-1.8, 0.6, 2.7);}

初始化渲染器

把画面显示出来需要初始化渲染器，为了更高清一点，避免锯齿使用抗锯齿（antialias），设置屏幕像素比(window.devicePixelRatio)，渲染的尺寸大小(window.innerWidth, window.innerHeight)然后进行一个追加，把渲染器渲染的画面，放到选择器上.container.appendChild(this.renderer.domElement) 把渲染器渲染的元素放进来

  initRenderer() {this.renderer = new THREE.WebGLRenderer({ antialias: true });// 设置屏幕像素比this.renderer.setPixelRatio(window.devicePixelRatio);// 渲染的尺寸大小this.renderer.setSize(window.innerWidth, window.innerHeight);this.container.appendChild(this.renderer.domElement);}

添加环境的纹理

用加载器来加载HDR

  setEnvMap(hdr) {new RGBELoader().setPath("./files/hdr/").load(hdr + ".hdr", (texture) => {this.scene.background = texture;this.scene.environment = texture;});}

现在渲染器已经初始化了但是还没有渲染，需要再写一个渲染函数render()，把摄像头和动画渲染进来，由于页面是不断刷新的需要一帧一帧画出来一帧一帧画出来我们可以做一个请求动画帧，就是不断地去渲染，不断地画出来。只要数据一变就可以画出新的内容，这样就可以形成一个动画,然后通过setAnimationLoop这个循环，进行对render绑定，一帧画完，画下一帧

  render() {this.renderer.render(this.scene, this.camera);}animate() {this.renderer.setAnimationLoop(this.render.bind(this));}

运行后显示效果如下

但是现在只是一张图没有显示在圆球里面，因此在纹理加载完成后我们需要进行设置纹理的一个映射：
texture.mapping = THREE.EquirectangularReflectionMapping;

  setEnvMap(hdr) {new RGBELoader().setPath("./files/hdr/").load(hdr + ".hdr", (texture) => {texture.mapping = THREE.EquirectangularReflectionMapping;this.scene.background = texture;this.scene.environment = texture;});}

这么设置后画面会改过来：

内容正常，但是因为这是一个场景，摄像头看后面的内容是会比较模糊的，并不是因为图不够高清，而是因为摄像头聚焦中间，后面的背景会进行虚化，所以会模糊。

【3D商城】三维场景搭建与开发流程相关推荐

OPENGL三维场景搭建、漫游、交互
OPENGL三维场景搭建.漫游.交互标签(空格分隔): OPENGL 这是博主的一次实验,实验截止日期还没有到.等deadline过后,博主附上源码. 源码地址:更新:OPENGL三维场景搭建.漫游 ...
商城网站建设的具体开发流程有哪些
商城网站建设可以改变一家企业的营销模式,一些传统的行业在做着线下产品的销售,而有了商城之后就可以做网上销售,不过商城网站的开发比普通网站开发的难度更大,所以大家一定要认真的去了解那么商城网站建设的具体 ...
中小企业怎样搭建软件安全开发流程和规范
文章目录微软SDL相关内容学习记录微软SDL介绍 SDL核心概念 SDL优化模型 SDL适用性 SDL角色分工简化的SDL安全活动必需的安全活动培训要求设计实施验证(对应的是测试阶段 ...
SpringMVC一：概述、环境搭建及开发流程
SpringMVC 一.概述 MVC 是一种软件架构思想,将软件按照模型.视图.控制器类划分 M:model,模型层,用来处理数据,指Service.Dao.Pojo V:view,视图层,用来与用户 ...
对 VR 项目开发流程的调研
0. 参考资料学习参考自以下资料: 一个 VR 游戏 DEMO 的开发历程是怎样的 http://tech.163.com/16/0726/08/BSSSPPT600097U7U.html 虚拟现实 ...
园区3D可视化三维展示系统解决方案
5G浪潮的到来加速了数字化发展,3d园区可视化数字孪生综合管理平台可将数字园区的人口.经济.应急等服务进行3D数字化.网络化,实现优化管理决策支持和可视化管理.商迪3D通过3D地理信息系统.数字孪生和 ...
数据可视化 - 三维场景的实现
近年来,随着我国互联网行业的高速发展,网络上积累了海量的数据,如何将这些海量数据的价值发挥至最大化,成为了很多用户.企业的难题.数据可视化.BI工具随之而来,企业和用户可以通过搭建可视化页面.自助BI ...
unity2d游戏独立开发全流程第一节基于TileMap场景搭建
本次开发unity2d战斗游戏demo 完成场景搭建场景元素添加控制主角移动角色动画及切换相机跟随插件道具交互脚本简单UI界面粒子特效以及c#代码的基本编写逻辑等等场景资源链接 ...
cocos 3d 3.0《懒猫跑酷》实战开发 01 场景搭建
欢迎各位开发者进群进行交流学习 QQ群730358845 讲师资历戏开发前端程序,6年开发经验 2014-2018年从事U3D开发 2018年至今从事小游戏开发(laya,cocos3d) 教育培训 ...

【3D商城】三维场景搭建与开发流程