在Vue中搭建Three.js环境(超详细、保姆级),创建场景、相机、渲染器《一》

目录

  • Three.js简介
  • 创建vue项目
  • 引入Three.js
  • 实际操作环节
    • 文件目录创建
    • 初始化场景、相机

Three.js简介

Three.js 是一款基于 WebGL的 JavaScript 3D 库,它封装了 WebGL API,为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了多种组件、方法和工具,用于创建和处理 3D 图形,使得开发者可以在 Web 浏览器中快速创建 3D 场景和动画,而不需要深入了解 WebGL 的底层实现。

简单来说:它就是一个绘制 3D 的 javaScript 轻量级框架;
能干什么:游戏,地图,智能工厂,智慧园区,360°模型 ,建筑家装,3d物联网 ,能干的东西太多了,不一一说了,自己想去吧。
官方网址:https://threejs.org

好了好了,介绍到这里就行了,已经够多了,官方的介绍很详细,来来来 步入正题…

创建vue项目

你不想用vue也可以,不强求,但我想用!!!

  1. 在合适的文件夹目录 1 下去打开cmd(windows小黑窗口)窗口或者Terminal(Mac终端),这俩不知道的话,就别往下看了。在弹出的窗口中输入以下命令,回车即可。
vue create demo

注: 啥啥啥?vue不是内部或外部命令?点我点我

  1. 选择VUE2,本讲解以VUE2来进行 2 ,所以选择VUE2。 上下键去选,选完以后回车。
    在这里插入图片描述
  2. 展示以下结果代表创建成果,没报错就是创建成功了。
    在这里插入图片描述

引入Three.js

  1. 使用WebStorm(你想用什么工具都可以,不强求)打开刚才创建的项目。
    在这里插入图片描述
  2. 在开发工具的Terminal中输入以下内容回车。
 npm install three

在这里插入图片描述

实际操作环节

文件目录创建

  1. 在src下创建js文件目录
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. 并创建ThreeJs.js文件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

初始化场景、相机

  1. Three他是一个右手系的X、Y、Z,如下图所示:
    在这里插入图片描述

  2. 引入Three文件,创建ThreeJs的通用组件方法,使用构造器构建组件。

import * as THREE from 'three';
export default class ThreeJs{constructor(id){//根据传入的id,去获取他的dom节点,用来加载三维模型this.id=id;this.dom=document.getElementById(id);}}
  1. 创建initThree方法,用来初始化场景,动画的宽高,和相机。
 initThree(){//创建场景scenethis.scene=new THREE.Scene();//获取dom的宽和高this.width=this.dom.offsetWidththis.height=this.dom.offsetHeight;//创建相机,fov:视角 aspect:宽高比 near:近裁剪面 far:远裁剪面this.camera=new THREE.PerspectiveCamera(45,this.width/this.height,1,1000);//设置相机位置this.camera.position.set(0,0,0);}

:相机的相关解释,这个必须要详细的介绍一下,这个很关键。也可以点击链接看官方文档 官方

序号相机含义
1ArrayCamera(摄像机阵列)ArrayCamera 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能。一个 ArrayCamera 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义viewport(视口)这个属性,这一属性决定了由该子摄像机所渲染的视口区域的大小。
2Camera(摄像机)摄像机的抽象基类。在构建新摄像机时,应始终继承此类。
3CubeCamera(立方相机)创建6个渲染到WebGLCubeRenderTarget的摄像机。
4OrthographicCamera(正交相机)这一摄像机使用orthographic projection(正交投影)来进行投影。在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。。
5PerspectiveCamera(透视相机)这一摄像机使用perspective projection(透视投影)来进行投影。这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式。
6StereoCamera(立体相机)双透视摄像机(立体相机)常被用于创建3D Anaglyph(3D立体影像) 或者Parallax Barrier(视差屏障)。
  1. 修改相机观看位置点位,默认让他看原点
this.camera.looAt(0,0,0)
  1. 追加webGL的渲染器,他是用来调用浏览器的GPU,去进行实时渲染(前提浏览器已经支持GPU)
 this.renderer=new THREE.WebGLRenderer({antialias:true,alpha:true,logarithmicDepthBuffer:true})

注: antialias:是否开启锯齿,alpha:是否开启透明,logarithmicDepthBuffer:是否开启对数深度缓存。

  1. 设置渲染器的像素比,设置渲染器的输出颜色,设置渲染器的大小。
   // 设置渲染器的像素比this.renderer.setPixelRatio(window.devicePixelRatio);//渲染器的输出颜色this.renderer.outputEncoding=THREE.sRGBEncoding;//设置渲染器的大小this.renderer.setSize(this.width,this.height);
  1. 将渲染器的dom元素,添加至我们div的dom元素中
    this.dom.append(this.renderer.domElement);
  1. 监听浏览器大小,去更新相机的矩阵
    // 监听浏览器大小,去更新相机的矩阵window.addEventListener('resize',()=>{// 更新相机的宽高比this.camera.aspect=this.dom.offsetWidth/this.dom.offsetHeight;this.camera.updateProjectionMatrix();//更新渲染器的大小this.renderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);if(this.cssRenderer){this.cssRenderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);}})
  1. initThree()方法完整版如下
    initThree(){//这个初始化的是场景this.scene= new THREE.Scene();this.width=this.dom.offsetWidth;this.height=this.dom.offsetHeight;this.camera= new THREE.PerspectiveCamera(45,this.width/this.height,1,1000);this.camera.position.set(0,0,0);this.camera.lookAt(0,0,0);//追加webGL的渲染器,他是用来调用浏览器的GPU,去进行实时渲染(前提浏览器已经支持GPU)//antialias:是否开启锯齿,alpha:是否开启透明,logarithmicDepthBuffer:是否开启对数深度缓存this.renderer=new THREE.WebGLRenderer({antialias:true,alpha:true,logarithmicDepthBuffer:true})// 设置渲染器的像素比this.renderer.setPixelRatio(window.devicePixelRatio);//渲染器的输出颜色this.renderer.outputEncoding=THREE.sRGBEncoding;//设置渲染器的大小this.renderer.setSize(this.width,this.height);//将渲染器的dom元素,添加至我们div的dom元素中this.dom.append(this.renderer.domElement);// 监听浏览器大小,去更新相机的矩阵window.addEventListener('resize',()=>{// 更新相机的宽高比this.camera.aspect=this.dom.offsetWidth/this.dom.offsetHeight;this.camera.updateProjectionMatrix();//更新渲染器的大小this.renderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);if(this.cssRenderer){this.cssRenderer.setSize(this.dom.offsetWidth,this.dom.offsetHeight);}})}
  1. 创建辅助对象方法
    /*** @name * @author shaoqunchao* @date 2024/3/5 10:21* @description 初始化X,Y,Z轴的扶助对象* @update 2024/3/5 10:21**/initHelper(helperSize=1000){this.scene.add(new THREE.AxesHelper(helperSize));}
  1. 重写render方法,调用requestAnimationFrame去更新相机和场景。
   render(callback){callback();requestAnimationFrame(()=>this.render(callback));}
  1. 在项目中任意的vue下去引用该组件。
<template><div style="width: 100%;height: 100%" id="threejs"></div></template><script>
import ThreeJs from "@/js/ThreeJs";let app,scene,camera,renderer;export default {name: 'App',components: {},methods:{async init(){app=new ThreeJs("threejs");app.initThree();app.initHelper();renderer=app.renderer;scene=app.scene;camera=app.camera;app.render(()=>{renderer.render(scene,camera)})}},mounted() {this.init();}
}
</script><style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden; /* 防止出现滚动条 */}
</style>
  1. 去运行项目,查看当前效果,可以看到现在是一个空白的页面,什么也没有。
    在这里插入图片描述
  2. 是因为我们将相机的位置放在了0,0,0的位置,所以目前是什么也展示不了的,需要调整相机的位置。
    在这里插入图片描述
  3. 再次运行项目,可以看到我们的X,Y,Z轴的辅助对象。
    在这里插入图片描述
  4. 此时用鼠标旋转,放大缩小,都是不管用的,是因为我们没有初始化控制器,现在我们进行初始化控制器。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {CSS3DRenderer} from "three/examples/jsm/renderers/CSS3DRenderer"    /*** @name 初始化控制器* @author shaoqunchao* @date 2024/1/18 13:05* @description 轨道控制器,可以使得相机围绕目标进行轨道运动* @param enableZoom 设置控制器是否可以缩放,默认为true。* @param autoRotate 设置是否自动旋转,默认为false。* @param enableDamping 设置控制器阻尼,让控制器更有真实效果,默认为false。* @param dampingFactor 设置控制器阻尼系数,让控制器更有真实效果,默认为0。* @param minDistance 设置控制器最小距离,默认为1。* @param maxDistance 设置控制器最大距离,默认为300。* @param minAzimuthAngle 设置控制器最小旋转角度,默认为0。* @update 2024/1/18 13:05**/initController(enableZoom=true,autoRotate=false,enableDamping=false,dampingFactor=0,minDistance=1,maxDistance=1000,minAzimuthAngle=0){let width=this.dom.offsetWidth;let height=this.dom.offsetHeight;//这个Renderer是用来运行3维指标,相当于一个html页面去嵌入至模型中。this.labelRenderer=new CSS3DRenderer();this.labelRenderer.setSize(width,height);//用来调整html页面的样式,让他围绕模型点位时,不会有偏移。this.labelRenderer.domElement.style.position='absolute';this.labelRenderer.domElement.style.top=0;this.labelRenderer.domElement.style.pointerEvents="none";this.dom.appendChild(this.labelRenderer.domElement);this.controller=new OrbitControls(this.camera,this.renderer.domElement);//设置控制器是否可以缩放this.controller.enableZoom=enableZoom;//设置是否可以旋转this.controller.autoRotate=autoRotate;//设置控制器阻尼效果,让控制器有真实的效果,this.controller.enableDamping=enableDamping;//设置阻尼控制器的系数this.controller.dampingFactor=dampingFactor;//设置控制器放大的最小距离this.controller.minDistance=minDistance;//设置控制器缩小的最大距离this.controller.maxDistance=maxDistance;//设置控制器最小旋转角度this.controller.minAzimuthAngle=minAzimuthAngle;}
  1. 页面进行引用,然后在浏览器中进行测试。
    在这里插入图片描述

  1. 你觉得那个文件夹合适,那它就合适,大犟种,还真点开看啊 ↩︎

  2. 多余的解释 点我 ↩︎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/513893.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式硬件设计实例:基于STM32的流水灯原理图和PCB设计

最近本来在忙别的事&#xff0c;大约忙到五一以后吧&#xff0c;没有时间研究一些深入的知识。本来想停更的&#xff0c;但是刚刚申请到博客专家&#xff0c;想想还是得更新点文章。这里就把一些以前我做过的一些简单的硬件设计拿来出来复习一下。 本篇文章就来介绍一下&#…

代码随想录算法训练营第九天

28. 实现 strStr() &#xff08;本题可以跳过&#xff09; 方法&#xff1a; 方法一&#xff1a; 暴力法 i 表示最多能移动到n-m位置&#xff0c; 超过则退出循环。j表示haystack 初始位置k表示needle的初始位置如果haystack [j] needle[k]且 k<m 则 j, k; 如果 km 则返…

二次元404网站模板源码带人物语音

二次元404网站模板源码带人物语音&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 下载地址 https://www.qqmu.com/2410…

pdf属性修改教程 如何修改pdf 属性?

PDF&#xff08;Portable Document Format&#xff09;是一种广泛使用的文件格式&#xff0c;用于呈现文档&#xff0c;包括文本、图像、图形和其他元素。PDF文件的一个特点是其属性&#xff0c;这些属性包括文件的创建日期、修改日期、作者、标题、主题、关键词等。这些属性在…

html实体字符,看完这篇彻底明白了

二.技术基础知识 基础知识一直都是重点考察的内容&#xff0c;包含有HTML&#xff08;5&#xff09;、CSS&#xff08;3&#xff09;、JavaScript到 戳这里领取完整开源项目&#xff1a;【一线大厂前端面试题解析核心总结学习笔记Web真实项目实战最新讲解视频】 Vue&#xff0…

【HarmonyOS】Dev Eco Studio4.0开发工具下载SDK10

目录 点击创建项目 选择空项目&#xff08;OpenHarmony&#xff09;&#xff0c;点击Next 此时SDK为10 点击 configure OpenHarmony SDK 创建一个新目录文件存放SDK&#xff0c;不要跟之前的SDK文件目录重合&#xff0c;点击Next 点击Next 勾选Accept&#xff0c;点…

Python 全栈系列232 再次搭建RabbitMQ

说明 最近想重新上RabbitMQ&#xff0c;主要目的还是为了分布式任务调度。在Kafka和RabbitMQ两者犹豫了一下&#xff0c;还是觉得RabbitMQ好一些。 在20年的时候有搞过一阵子的RabbitMQ,看了下当时的几篇文章&#xff0c;觉得其实想法一直没变过。 Python - 装机系列24 消息…

16-网关-自研微服务框

网关 在微服务的场景下&#xff0c;服务因为分布在不同的服务器上&#xff0c;但是用户在访问的时候&#xff0c;不可能去维护这成百上千的入口&#xff0c;希望有统一的入口来进行访问&#xff0c;这就是网关的作用。 网关最重要的一个功能就是路由功能&#xff0c;能将请求转…

防患未然,OceanBase巡检工具应用实践——《OceanBase诊断系列》之五

1. OceanBase为什么要做巡检功能 尽管OceanBase拥有很好的MySQL兼容性&#xff0c;但在长期的生产环境中&#xff0c;部署不符合标准规范、硬件支持异常&#xff0c;或配置项错误等问题&#xff0c;这些短期不会出现的问题&#xff0c;仍会对数据库集群构成潜在的巨大风险。为…

使用API有效率地管理Dynadot域名,进行DNS域名解析

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

51camera简述面结构光成像

首先我们来看看结构光成像&#xff0c;它是使用特定的光图案和2D相机来捕获物体表面的三维轮廓的一种成像方法。其原理是将特定的窄带光投影到三维形状物体的表面上会产生一条照明线&#xff0c;该照明线从投影器的其他角度来看存在一定的变形&#xff0c;利用这种被三维形状调…

十四 超级数据查看器 讲解稿 背景和颜色

十四 超级数据查看器 讲解稿 背景和颜色 点击打开新页面播放视频教程 点击访问应用宝下载 讲解稿全文: 大家好&#xff0c;我们讲解一下 超级数据查看器 背景和颜色设置。 首先&#xff0c;我们打开超级数据查看器。 这节课设置的是 列表和详情界面的背景 和顶栏颜色。 …