VUE2+THREE.JS项目搭建

THREE项目搭建

  • 简介
  • 学习文档推荐
  • 搭建
    • 1.下载three.js
    • 2.新建3DWorkShop.vue文件
    • 3.创建utils/three/tool.js
    • 4.创建components/three/draw.vue[重点]
      • 4.1 引入文件
      • 4.2 初始化场景
      • 4.3 初始化渲染器
      • 4.4 初始化光源
      • 4.5 初始化相机(人眼模式)
      • 4.6 初始化控制器
      • 4.7 初始化动画
      • 4.8 添加全局方法
      • 4.9 加载模型
      • 4.10 执行方法

简介

three.js 是一个 是基于WebGL 封装的一个易于使用且轻量级的 3D 库,ThreeJS 对 WebGL 提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,同时也极大地提高了性能。用户不需要详细地学习 WebGL,就能轻松创作出三维图形,是前端开发者研发 3D WEB 应用的主要工具

学习文档推荐

  • WebGl中文档:可以了解到three.js最基础的知识点,可以对相机,场景,控制器有初步的认识与了解
  • 3D查看器:查看3D模型的在线网站

搭建

1.下载three.js

npm install --save three

npm install three-obj-mtl-loader :mtl模型加载

npm install three-orbit-controls :控制器

npm install three-stats:性能检测器

2.新建3DWorkShop.vue文件

用于3D车间最外层文件

3.创建utils/three/tool.js

将所有模型文件类型的获取方法写在一个js文件中

import { MTLLoader } from 'three-obj-mtl-loader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import {  FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'// 加载obj,mtl文件
export function objloader(path) {return new Promise(resolve => {var mtlLoader = new MTLLoader()//  初始化objvar objLoader = new OBJLoader()// 加载mtl文件mtlLoader.load(`three/${path}.mtl`, (mtl) => {// 初始化mtl.preload()// 加载贴图objLoader.setMaterials(mtl)objLoader.load(`three/${path}.obj`, (obj) => {resolve({mtl,obj})})})})
}// 加载fbx文件
export function fbxloader(path) {return new Promise(resolve => {var loader = new FBXLoader()loader.load(`three/${path}.fbx`, (fbx) => {resolve(fbx)}, function (xhr) {// 控制台查看加载进度xhr// 通过加载进度xhr可以控制前端进度条进度   Math.floor:小数加载进度取整console.log('加载进度' + Math.floor(xhr.loaded / xhr.total * 100) + '%');})})
}
// 加载gtlf文件
export function gltfloader(path) {return new Promise(resolve => {var loader = new GLTFLoader()loader.load(`three/${path}.gltf`, (gltf) => {resolve(gltf)})})
}

4.创建components/three/draw.vue[重点]

创建html

<div class="draw" ref="draw"><div id="webgl" v-if="isShowWebgl"></div>
</div>

注意点:要将three相关的参数定义到vue之外,不可以放到vue的data里(会导致卡顿问题)
具体原因是:three的相关参数会经常变动,而vue又会对data里面的变量进行变化追踪,所以就会卡
例如:
在这里插入图片描述

4.1 引入文件

import * as THREE from "three"; //  三维
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //  控制器

4.2 初始化场景

initScene(){scene = new THREE.Scene(); //  场景对象Scene
}

4.3 初始化渲染器

initRenderer(){renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });//   设置渲染区域尺寸renderer.setSize(this.$refs.draw.offsetWidth, this.$refs.draw.offsetHeight);//   开启渲染阴影renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.hadowMapEnabled = true;//  body元素中插入canvas对象this.$refs.draw.appendChild(renderer.domElement);
}

4.4 初始化光源

//   初始化光源
initLight() {//增加环境光(环境光颜色,环境光强度)const ambientLight = new THREE.AmbientLight(0xffffff, 2);ambientLight.name = "ambientLight";scene.add(ambientLight);//增加太阳光const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);directionalLight.name = "directionalLight";directionalLight.position.set(8000, 8000, -2000);
},

4.5 初始化相机(人眼模式)

sightline = { scale: 45, //  视线比例type: "PerspectiveCamera", //  相机的类型posiy: [-5000, 7000, 16000], //  相机位置
};
//   初始化相机
initCamera() {const k = this.$refs.draw.offsetWidth / this.$refs.draw.offsetHeight; //  窗口宽高比camera = new THREE.PerspectiveCamera(this.sightline.scale, k, 1, 100000);camera.position.set(this.sightline.posiy[0], this.sightline.posiy[1], this.sightline.posiy[2]);camera.up.set(0, 1000, 0);camera.lookAt(0, 0, 1);
},

4.6 初始化控制器

//   初始化控制
initOrbitControls() {controls = new OrbitControls(camera, renderer.domElement); //  创建控件对象controls.target.set(0, 0.5, 0); //控制器轴的方向,Y轴向上controls.update(); //控制器更新
},

4.7 初始化动画

//   设置动画
animate() {if (!renderer) {return;}if (this.count < 2) {this.count++;renderer.render(scene, camera);controls.update();}if (animateId) cancelAnimationFrame(animateId);animateId = requestAnimationFrame(this.animate);
},

4.8 添加全局方法

//   添加全局方法
addmeth() {//   监听窗口尺寸变化window.addEventListener("resize", this.changeSize, false);
},
//   监听尺寸变化
changeSize() {//   重置渲染器输出画布canvas尺寸renderer.setSize(this.$refs.draw.offsetWidth, this.$refs.draw.offsetHeight);const k = this.$refs.draw.offsetWidth / this.$refs.draw.offsetHeight; //  窗口宽高比//  重置相机投影的相关参数camera.aspect = k;//   需要执行updateProjectionMatrix ()方法更新相机的投影矩阵camera.updateProjectionMatrix();
},

4.9 加载模型

<draw ref="draw" :initLoader="initLoader" :eqpList="eqpList" />

在3DWorkShop的methods里:

import { fbxloader } from "@/utils/three/tool";// 引入模型文件
initLoader() {
//sip 是文件名[文件必须存放到public里,我放的位置是public/three/sip.fbx]fbxloader(sip).then(obj=>{this.$refs.draw.addScene(fbx);})
},

4.10 执行方法

mounted(){this.init();//初始化渲染	this.animate();//添加动画this.addmeth();//添加事件
},
init(){//初始化场景this.initScene();//   初始化渲染对象this.initRenderer();//   初始化模型this.initLoader();//   初始化光源this.initLight();//   初始化相机this.initCamera();//   初始化控制this.initOrbitControls();
}

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

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

相关文章

功率信号源简介及其应用有哪些内容

功率信号源是一种能够提供稳定输出功率信号的设备或电路。它在许多领域中都有广泛的应用。以下是一些关于功率信号源的内容&#xff1a; 功率信号源简介&#xff1a;功率信号源是一种电子设备或电路&#xff0c;它能够提供稳定的输出功率信号。功率信号源通常由放大器、稳压器、…

rest_framework_django学习笔记一(序列化器)

rest_framework_django学习笔记一(序列化器) 一、引入Django Rest Framework 1、安装 pip install djangorestframework2、引入 INSTALLED_APPS [...rest_framework, ]3、原始RESTful接口写法 models.py from django.db import models 测试数据 仅供参考 INSERT INTO de…

力扣:1419. 数青蛙

题目&#xff1a; 代码&#xff1a; class Solution { public:int minNumberOfFrogs(string croakOfFrogs){string s "croak";int ns.size();//首先创建一个哈希表来标明每个元素出现的次数&#xff01;vector<int>hash(n); //不用真的创建一个hash表用一个数…

如何使用高防CDN防护HTTPS 攻击?有什么优势?

随着互联网的普及&#xff0c;网络安全问题也日益凸显。其中&#xff0c;HTTPS 攻击是一种常见的网络安全威胁&#xff0c;它通过篡改网站数据、窃取用户信息等方式&#xff0c;给网站带来巨大的风险。为了有效防御 HTTPS 攻击&#xff0c;高防 CDN 成为了一个重要的工具。下面…

(项目已开源)社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动

(项目已开源)社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动 链接&#xff1a;https://pan.baidu.com/s/16lpEW6L5jrHfhsG7EXocLw?pwdkryy 提取码&#xff1a;kryy <!--社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 s…

传统算法: Pygame 实现一个简单的二阶马尔可夫链的状态转移过程

使用 Pygame 演示了一个简单的二阶马尔可夫链的状态转移过程。以下是代码的主要步骤和原理解释: 1、初始化和基本设置 Pygame 初始化: 通过 pygame.init() 初始化 Pygame。 定义颜色和屏幕大小: 定义了一些颜色常量(WHITE, BLACK, RED, GREEN, BLUE)和屏幕的宽度和高度。…

Nginx实现(动静分离)

动静分离应该是听的次数较多的性能优化方案&#xff0c;那先思考一个问题&#xff1a;「「为什么需要做动静分离呢&#xff1f;它带来的好处是什么&#xff1f;」」 其实这个问题也并不难回答&#xff0c;当你搞懂了网站的本质后&#xff0c;自然就理解了动静分离的重要性。先来…

通过C#获取Windows设置的夏令时开关

C#获取Windows夏令时开关 // 获取所有的时区信息 var allTimeZones TimeZoneInfo.GetSystemTimeZones().ToList();通过接口可以看到, 字段SupportsDaylightSavingTime代表是否支持配置夏令时 // 获取当前Window设置的时区 var tmpLocal TimeZoneInfo.Local;但是取Local 信息…

Oracle 单表插入/多表插入(Single Table Insert/Multi-table Insert)

数据库应用中&#xff0c;我们经常需要向表中插入数据&#xff0c;insert语句是最常用的数据插入方式&#xff0c;根据目标表的数量&#xff0c;可以分为单表插入和多表插入。 目录 一、 单表插入&#xff08;Single Table Insert&#xff09; 二、 多表插入&#xff08;Multi-…

游戏反Frida注入检测方案

在游戏安全对抗过程中&#xff0c;有不少外挂的实现基于对游戏内存模块进行修改&#xff0c;这类外挂通常会使用内存修改器&#xff0c;除此之外&#xff0c;还有一种门槛相对更高、也更难检测的「注入挂」。 据FairGuard游戏安全数据统计&#xff0c;在游戏面临的众多安全风险…

文档开发控件Aspose.words,全语言支持升级至23.11最新版~

Aspose.Words for .NET 23.11 发行说明 Aspose.Words for .NET 是高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。该API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档的能力&#xff0c;而无需在跨平台应用程序中直接利用Microsoft …

MX6ULL学习笔记(四)设备树的 OF 函数

前言&#xff1a; 设备树描述了设备的详细信息&#xff0c;这些信息包括数字类型的、字符串类型的、数组类型的&#xff0c; 我们在编写驱动的时候需要获取到这些信息。Linux 内核给我们提供了一系列的函数来获取设备树中的节点或者属性信息&#xff0c;这一系列的函数都有一个…

Git常用命令#如何撤销commit、push、merge操作

在开发中&#xff0c;经常会发生一些不可控的局面&#xff0c;比如刚睡醒&#xff0c;突然手抖合并了一段垃圾代码到主分支&#xff1f;此时靓仔你该如何应对&#xff1f; 就此我们分如下几种场景进行说明 1.已commit未push 如何撤销&#xff1f; 如果你已经在 Git 中做了提交…

Python 时间详解(time)

文章目录 1 获取1.1 当前时间戳&#xff1a;time()1.2 本地结构化时间&#xff1a;localtime()1.3 世界结构化时间&#xff1a;gmtime() 2 转换2.1 结构化时间 -> 时间戳&#xff1a;mktime()2.2 时间戳 -> 可读性时间字符串&#xff1a;ctime()2.3 结构化时间 -> 可读…

keepalive路由缓存实现前进刷新后退缓存

1.在app.vue中配置全局的keepalive并用includes指定要缓存的组件路由name名字数组 <keep-alive :include"keepCachedViews"><router-view /></keep-alive>computed: {keepCachedViews() {console.log(this.$store.getters.keepCachedViews, this.…

cmake和vscode 下的cmake的使用详解(一)。

本文的内容 参考如下内容。 1.【基于VSCode和CMake实现C/C开发 | Linux篇】https://www.bilibili.com/video/BV1fy4y1b7TC?vd_source0ddb24a02523448baa69b0b871ab50f7 2.Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. 3.关于如何利用…

linux下编译OpenCV

很多朋友在 Linux 系统中为 C 程序安装 OpenCV &#xff08;从源代码生成&#xff09;时经常会遇到各种各样的问题&#xff0c;尤其是对 C 生成系统或 Linux 不熟的情况下就更难以完成了。我也是被问得太烦了&#xff0c;干脆写一篇文章来行详解。其实也不怎么复杂&#xff0c;…

生命周期标注

fn main() {let r;{let x 5;r &x}print!("r:{}", r); }let r 这种初始化的方式在RUST中是被允许的&#xff0c;过程中程序声明了两个变量x和r&#xff0c;程序无法正常编译。 x does not live long enough 编译报错的原因&#xff1a;被引用对象的存活时间短语…

用HeidiSQL在MySQL中创建新的数据库

用有权限的用户登录&#xff1a; 右键单击&#xff0c;选择&#xff1a; 输入要创建的数据库名称&#xff0c;然后点击“确定”&#xff1a; 刷新下&#xff0c;就看到新创建的数据库了&#xff1a; 在新创建的数据库中&#xff0c;就可以做其它操作了&#xff0c;例如…

docker 切换镜像源

Dockerfile build 报错了&#xff1a; WARNING: fetching https://dl-cdn.alpinelinux.org/alpine/v3.18/main: temporary error (try again later) WARNING: fetching https://dl-cdn.alpinelinux.org/alpine/v3.18/community: 这个问题是默认的 Alpine Linux 的软件包镜像源…