在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.mzph.cn/news/723454.shtml

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

相关文章

c++设计模式总结

c++设计模式总结

C设计模式是一套被广泛认可的用于解决常见对象导向设计问题的最佳实践。设计模式可以帮助开发者编写更加清晰、可维护和可扩展的代码。设计模式通常分为三大类&#xff1a;创建型、结构型和行为型。下面&#xff0c;我将分别介绍这三类设计模式的概念、应用场景和C实现示例。 …
阅读更多...
将List转换为数组或者将数组转换为List，如果改变了原始值，转换后的数据会发生改变吗？

将List转换为数组或者将数组转换为List，如果改变了原始值，转换后的数据会发生改变吗？

将List转换为数组或将数组转换为List涉及到数据结构的变化。在Java中&#xff0c;这两种转换是否会影响原始数据取决于转换的方式和使用的数据结构。下面分别解释这两种情况&#xff1a; 将List转换为数组 当你将一个List转换为数组时&#xff0c;通常通过List的toArray()方法…
阅读更多...
CUDA学习笔记04：向量之和

CUDA学习笔记04：向量之和

参考资料 CUDA编程模型系列二(向量操作)_哔哩哔哩_bilibili &#xff08;非常好的学习资料&#xff01;&#xff09; vs2019 随意新建一个空项目&#xff0c;按照之前的环境配置配好项目依赖&#xff1a; CUDA学习笔记02&#xff1a;测试程序hello world-CSDN博客 代码结构…
阅读更多...
JavaScript的事件初始

JavaScript的事件初始

JavaScript 的事件初识 基本概念 html和JS做的一个约定。浏览器需要监听用户做了什么样的操作&#xff0c;并对用户的操作进行对应的反馈&#xff0c;从而形成一个动态的页面效果。 用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个的事件。 事件的三…
阅读更多...
《 前端挑战与未来：如何看待“前端已死”》

《 前端挑战与未来：如何看待“前端已死”》

在技术领域&#xff0c;时常会有一些激进的言论引发热议&#xff0c;比如近年来不少人声称“前端已死”。这样的言论引发了广泛的讨论和反思。本文将从几个方向探讨这个话题&#xff1a;为什么会出现“前端已死”的言论、如何看待这种说法、前端技术的未来发展趋势以及前端人如…
阅读更多...
MS8911S/8921S/8922M/8931S——4ns 延时、轨到轨高速比较器

MS8911S/8921S/8922M/8931S——4ns 延时、轨到轨高速比较器

产品简述 MS8911S/MS8921S/MS8922M/MS8931S 是一款具 有内部迟滞的高速比较器。其电源电压范围为 3.0V- 5.5V &#xff0c;输入和输出范围均可做到轨到轨。其输出为推 挽结构&#xff0c;兼容 CMOS/TTL 逻辑电平标准。传输延时为 4ns &#xff0c;且失调电压低。单一比…
阅读更多...
在虚拟机vm下的Linux系统下 安装redis 超详细

在虚拟机vm下的Linux系统下 安装redis 超详细

打开Linux后 右键打开终端 1.输入:su root 登录root 密码是123456 2.然后输入:yum -y install gcc-c 安装gcc基础依赖包 3.yum -y install centos-release-scl 4.yum -y install devtoolset-9-gcc devtoolset-9-gcc-c devtoolset-9-binutils //为了编译最新版本的Redis源码 用…
阅读更多...
二维码门楼牌管理系统应用场景：城市规划与土地管理的新利器

二维码门楼牌管理系统应用场景：城市规划与土地管理的新利器

文章目录 前言一、城市规划部门的新助手二、门牌数据的深度应用三、支持可持续城市发展四、与城市规划部门的联动 前言 随着科技的不断进步&#xff0c;二维码技术已经深入到我们生活的方方面面。在城市规划与土地管理领域&#xff0c;二维码门楼牌管理系统正成为一项革命性的…
阅读更多...
在dockerfile，文件和文件夹打包到镜像中，解决文件夹文件为空的问题

在dockerfile，文件和文件夹打包到镜像中，解决文件夹文件为空的问题

一般来说直接copy就行了&#xff0c;但是不知道为什么看起来是复制过去了&#xff0c;但实际结果总为空。 最后想了一个办法&#xff0c;那就是把要复制的文件夹在外面压缩成压缩包&#xff0c;然后复制进去即可。 以复制模型缓存为例&#xff1a; FROM IMAGE&#xff1a;ve…
阅读更多...
【Selenium】UI自动化｜元素定位常见问题

【Selenium】UI自动化｜元素定位常见问题

1、报错NoSuchElementException——定位不到元素 分析的可能原因&#xff1a; 页面还没有加载出来&#xff0c;就对页面上的元素进行的操作 元素在iframe中&#xff0c;先要理解下frame的实质&#xff0c;frame中实际上是嵌入了另一个页面&#xff0c;而webdriver每次只能在一…
阅读更多...
Linux中给复杂命令起别名

Linux中给复杂命令起别名

目录 1 前言 2 操作步骤 2.1 打开.bashrc 2.2 编辑.bashrc-添加别名 2.3 使别名生效 1 前言 在linux中有些指令会比较长&#xff0c;为了便捷的使用它们&#xff0c;我们就可以采取起别名的方式&#xff0c;具体操作如下。 2 操作步骤 2.1 打开.bashrc 输入如下指令&a…
阅读更多...
前端WebRTC局域网1V1视频通话

前端WebRTC局域网1V1视频通话

基本概念 WebRTC&#xff08;Web Real-Time Communications&#xff09; 网络实时通讯&#xff0c;它允许网络应用或者站点&#xff0c;在不借助中间媒介的情况下&#xff0c;建立点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流和音频流或者其他任…
阅读更多...
如何在2.2.1版Aduino IDE中开发ESP32

如何在2.2.1版Aduino IDE中开发ESP32

ESP32芯片集成了WIFI和蓝牙&#xff0c;而且关于生态也很不错&#xff0c;越来越多的学习者和开发者选择此类芯片&#xff0c;而不像用keil开发STM32或者51一样&#xff0c;ESP32虽然也有官方的ESP32-IDF开发软甲&#xff0c;但是经过我个人的实操体验&#xff0c;不适合小白或…
阅读更多...
每天一个数据分析题（一百八十九）

每天一个数据分析题（一百八十九）

在线性回归的高斯马尔科夫假设中&#xff0c;以下属于对残差的假设的有&#xff08;&#xff09; A. 残差序列不相关 B. 残差序列方差为1 C. 残差序列为正态分布 D. 残差序列方差相同 题目来源于CDA模拟题库 点击此处获取答案
阅读更多...
【数据结构与算法】二叉树解题20240306

【数据结构与算法】二叉树解题20240306

这里写目录标题 一、104. 二叉树的最大深度二、100. 相同的树三、226. 翻转二叉树四、101. 对称二叉树 一、104. 二叉树的最大深度 简单 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 1、确定递归…
阅读更多...
基于R语言和iris数据集实现随机森林模型及测试应用

基于R语言和iris数据集实现随机森林模型及测试应用

基于R语言和iris数据集实现随机森林模型及测试应用 测试应用R代码 #加载随机森林模型库 > library("randomForest") #加载iris数据集 > data(iris) > head(iris)# 设置训练数据和标签 t_data <- iris[, -5] t_labels <- iris[, 5] # 训练随机森…
阅读更多...
【Supra空投指南】

【Supra空投指南】

一、简介 单号注册并完成kyc最低送490个代币&#xff08;价值200u左右&#xff0c;可多号操作&#xff09;&#xff0c;每周都有任务&#xff08;非常简单&#xff0c;不花时间&#xff09;&#xff0c;随完成任务增多可获得更多空投&#xff0c;3-4月份空投!! 二、操作步骤 …
阅读更多...
机器学习-面经(part6、集成学习)

机器学习-面经(part6、集成学习)

10 集成学习 定义：通过结合多个学习器(例如同种算法但是参数不同，或者不同算法)，一般会获得比任意单个学习器都要好的性能，尤其是在这些学习器都是"弱学习器"的时候提升效果会很明显。 10.1 Boosting（提升法） 可以用于回归和分类 问题，它每一…
阅读更多...
Jenkins的安装和helloworld Pipeline

Jenkins的安装和helloworld Pipeline

文章目录 环境安装下载安装启动初始化 PipelineUISCM&#xff08;Source Control Management&#xff09;准备pipeline 参考 环境 RHEL 9.3Jenkins 2.44.0.1 安装 参考 https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos 。 下载安装 [ding192 ~]$ sudo …
阅读更多...
Elasticsearch搜索引擎

Elasticsearch搜索引擎

目录 初识elasticsearch 了解ES 什么是elasticsearch elasticsearch的发展 搜索引擎技术排名&#xff1a; 总结 倒排索引 正向索引和倒排索引 正向索引 倒排索引 总结 es的一些概念 文档 索引 概念对比 架构 总结 安装es&#xff0c;kibana 安装es 安装kiba…
阅读更多...
最新文章

Copyright @ 2022~2023