技术标签: 前端开发 Vue.js webgl Three.js 前端 vue.js
// 引入Three.js库
import * as THREE from "three";
//查看是否引入成功
console.log(three)
// 引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 引入GLTFLoader
// 新版本GLTFLoader位置,新版本的Three.js中,许多模块已经移动到了 jsm 目录下
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
//旧版本GLTFLoader位置
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
//定义变量
let scene, renderer, camera;
初始化渲染器;就是模型需要渲染的大小,可自行创建,
也可获取元素后,设置成元素的大小;这里获取元素,设置成元素的大小。
initRenderer();
function initRenderer() {
const sheepBox = document.getElementById("sheep_box");
// 初始化渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置像素比
renderer.setPixelRatio(window.devicePixelRatio);
// 设置渲染器尺寸
renderer.setSize(sheepBox.clientWidth, sheepBox.clientHeight);
// 将渲染器的 canvas 元素添加到容器中
sheepBox.appendChild(renderer.domElement);
// 设置渲染器尺寸
// renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到DOM
// document.body.appendChild(renderer.domElement);
}
这里首先获取要渲染的容器元素(sheepBox div 元素),
然后通过new THREE.WebGLRenderer({ antialias: true })方法
创建一个新的WebGL渲染器实例(renderer),
然后设置像素比(window.devicePixelRatio),以便在不同的设备像素比下正确显示渲染结果,
再设置渲染器的尺寸,将其大小设置为容器元素的实际尺寸,
通过获取容器元素的 clientWidth 和 clientHeight 属性来实现,
最后将渲染器的 canvas 元素添加到容器中。
注意事项:
初始化场景;就是创建一个3d场景对象,这里使用new THREE.Scene()方法创建了
一个新的Three.js场景对象,并将其赋值给变量scene;并设置背景颜色0xa0a0a0
initScene();
function initScene() {
// 初始化场景
scene = new THREE.Scene();
// 场景的背景颜色
scene.background = new THREE.Color(0xa0a0a0);
}
这里创建了一个新的THREE.Scene对象,并将其赋值给变量scene。
接下来,为场景设置了背景颜色 0xa0a0a0。
初始化相机;就是你看到的角度,模型距离屏幕的位置,以及模型的垂直位置等
initCamera()
function initCamera() {
// 初始化相机
camera = new THREE.PerspectiveCamera(
45, // 设置透视相机的角度,单位为度
// 设置相机剪裁面的大小,即窗口的宽除以高
window.innerWidth / window.innerHeight,
1, // 设置近距裁剪面到相机距离
1000 // 设置远距裁剪面到相机距离
);
// 设置相机位置
// 这里设置为距离地面2米的正上方,距离地面5米
camera.position.set(1, 2, -5);
}
这里使用new THREE.PerspectiveCamera(...)方法创建一个透视相机实例。
传入的参数包括摄像机视图的垂直夹角(vFov)、焦距(focalLength)、
近眼距离(near)和远眼距离(far)。这些参数会影响相机生成的图像的透视效果。
然后使用camera.position.set(...)方法设置相机的初始位置。
这里设置了X轴、Y轴和Z轴的位置,分别对应于水平、垂直和近远距离。
初始化控制器;就是是用于操纵相机和场景的交互性功能,如缩放、平移和旋转相机。
initControls();
function initControls() {
// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
}
这里使用new OrbitControls(camera, renderer.domElement)
创建了一个 OrbitControls 实例,
并将相机和渲染器的 DOM 元素作为参数传递给它。
这意味着用户可以通过鼠标或触摸设备操作三维空间中的相机,以控制视角和位置。
初始化需要加载的模型;就是用来加载并显示一个名为"Soldier.glb"的模型。
initModels();
function initModels() {
const loader = new GLTFLoader();
loader.load("/models/Soldier.glb", function (glb) {
打印查看模型文件
console.log(glb);
scene.add(glb.scene);
});
}
这里先使用new GLTFLoader()创建一个loader;
然后调用GLTFLoader的load方法,传入两个参数:
模型文件的URL("/models/Soldier.glb")和一个回调函数;
回调函数将在模型加载完成后执行。
最后通过scene.add(gltf.scene)方法,
将加载完成的模型添加到场景中(即Vue.js应用程序的渲染场景)。
监听窗口缩放
window.addEventListener("resize", function () {
const sheepBox = document.getElementById("sheep_box");
// 设置相机视野比
camera.aspect = sheepBox.clientWidth / sheepBox.clientHeight;
// 更新投影矩阵
camera.updateProjectionMatrix();
// 设置渲染器尺寸
renderer.setSize(sheepBox.clientWidth, sheepBox.clientHeight);
// // 设置相机视野比 浏览器、window的可视宽高
// camera.aspect = window.innerWidth / window.innerHeight;
// // 设置渲染器尺寸 浏览器、window的可视宽高
// renderer.setSize(window.innerWidth, window.innerHeight);
});
加载压缩后的glb / gltf文件需要在项目中配置解码器,draco,具体操作如下:
dracohttps://github.com/google/draco
对于 DRACO 解码器相关文件,只需要将以下文件放置在您的项目中:
这些文件是用于在浏览器中解码 DRACO 压缩的模型数据的必要文件。可以将这些文件放置在项目的 public 目录下的一个名为 draco 的子目录中,然后在代码中使用相对于根目录的路径来指定 DRACO 文件的位置,以便 GLTFLoader 能够正确加载和使用解码器。
Draco功能代码文件https://download.csdn.net/download/weixin_65793170/89122540?spm=1001.2014.3001.5503
//创建一个新的Draco实例
const dracoLoader = new DRACOLoader();
// 设置 DRACOLoader 的路径,通常是 DRACO 压缩库的路径
// 请替换为您的实际路径
dracoLoader.setDecoderPath("/draco/");
// 将 DRACOLoader 实例传递给 GLTFLoader
loader.setDRACOLoader(dracoLoader);
function initModels() {
const loader = new GLTFLoader();
//创建一个新的Draco实例
const dracoLoader = new DRACOLoader();
// 设置 DRACOLoader 的路径,通常是 DRACO 压缩库的路径
// 请替换为您的实际路径
dracoLoader.setDecoderPath("/draco/");
// 将 DRACOLoader 实例传递给 GLTFLoader
loader.setDRACOLoader(dracoLoader);
loader.load("/models/forest_house.glb", function (glb) {
// console.log(glb);
scene.add(glb.scene);
// const clip = glb.animations[1];
// mixer = new THREE.AnimationMixer(glb.scene);
// // const action = mixer.clipAction(clip).play();
// const action = mixer.clipAction(clip);
// action.play();
});
}
.Color(0xa0a0a0); .Color("#8080ff") .Color("red")
main.js
中引入Three.js库以及所需的组件import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
Vue.prototype.$THREE = THREE;
Vue.prototype.$OrbitControls = OrbitControls;
Vue.prototype.$GLTFLoader = GLTFLoader;
通过以下方法,来访问Three.js库
this.$THREE
this.$OrbitControls
this.$GLTFLoader
Three.js官网https://threejs.org/
文章浏览阅读685次。1.1.什么是有状态?有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session。例如登录:用户登录后,我们把登录者的信息保存在服务端session中,并且给用户一个cookie值,记录对应的session。然后下次请求,用户携带cookie值来,我们就能识别到对应session,从而找到用户的信息。缺点是什么?服务端保存大量数据,增加服务端压力 服务端保存用户状态,无法进行水平扩展 客户端请求依赖服务.._无状态token登录
文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.
文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的,速算扣除数也按照月份计算出来,但是最终减去的也是一个月的速算扣除数。为什么这么做呢,这样的收的税更多啊,年终也是一个月的收入,凭什么减去12*速算扣除数了?这个霸道(不要脸)的说法,我们只能合理避免的这些跨级的区域了,那具体是那些区域呢?可以参考下面的表格:年终奖一列标红的一对便是盲区的上下线,发放年终奖的数额一定一定要避免这个区域,不然公司多花了钱..._年终奖盲区表
文章浏览阅读7.5k次,点赞5次,收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值
文章浏览阅读4.8k次。1,什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment
文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals
文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac
文章浏览阅读616次。一.jquery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术
文章浏览阅读1.6w次,点赞5次,收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式:.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner
文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!
文章浏览阅读1.8k次,点赞2次,收藏15次。同学们,是不是又到了一年一度写开题报告的时候呀?是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦,一定让你脱胎换骨,顺利拿下开题报告这个高塔,你确定还不赶快点赞收藏学起来吗?_开题报告研究难点
文章浏览阅读6k次,点赞4次,收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue