VUE使用three.js模型缩放卡顿问题

最近将之前开发的three.js程序集成到vue项目中，发现模型的旋转可缩放变得比较卡顿，网上搜集资料发现是将scene与controls放在vue data中的缘故，解决方法是将其定义在vue之外，然后在method中修改，完整代码如下。

<template><div class="test" id='gltf'></div>
</template><script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Projector } from "three/examples/jsm/renderers/Projector";
//实现360度自由旋转的控制球
import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
// 定义three全局变量
const scene = new THREE.Scene();
// three的控制器必须放在data外，否则会造成卡顿的问题
var controls;
export default {data () {return {camera: null,//   scene: null,renderer: null,mesh: null,loader: null,mixer: null,clock: new THREE.Clock(),//   controls: null,//   projector: new THREE.Projector(),SELECTED: null,objects: []}},components: {},mounted () {this.init();this.render();this.animate();//点击事件// window.addEventListener('click', this.onMouseClick, false);window.onresize = () => {console.log("窗口变化")let container = document.getElementById('gltf')let _this = this_this.camera.aspect = container.clientWidth / container.clientHeight;_this.camera.updateProjectionMatrix();_this.renderer.setSize(container.clientWidth, container.clientHeight);};},methods: {// 模型初始化init () {let container = document.getElementById("gltf");// 设置相机this.camera = new THREE.PerspectiveCamera(45,container.clientWidth / container.clientHeight,0.1, 10000);this.camera.position.set(10, 50, 20);this.camera.lookAt(new THREE.Vector3(0, 0, 0));//   this.scene = new THREE.Scene();let self = this;// 加载模型//   ZHENGQITIAOZHIZHUANGZHIvar loader = new GLTFLoader().setPath("/gltf/");loader.load("ZHENGQITIAOZHIZHUANGZHI.gltf", function (gltf) {// const scene = gltf.scene || gltf.scenes[0];var mesh = gltf.scene.children[0];// mesh.scale.set(0.1, 0.1, 0.1);scene.add(mesh); // 将模型引入three// self.scene.add(gltf.scene);// 调用动画});/*添加光源*/var spot1;var ambient = new THREE.AmbientLight(0x222222);scene.add(ambient);var directionalLight = new THREE.DirectionalLight(0x222222, 7);//第一个参数光颜色，第二个参数光强度directionalLight.position.set(0, 5, 10).normalize();scene.add(directionalLight);var directionalLight2 = new THREE.DirectionalLight(0x222222, 7);directionalLight2.position.set(0, 5, -30).normalize();scene.add(directionalLight2);var directionalLight3 = new THREE.DirectionalLight(0x222222, 7);directionalLight3.position.set(0, 20, 0).normalize();scene.add(directionalLight3);var directionalLight4 = new THREE.DirectionalLight(0x222222, 7);directionalLight4.position.set(0, -20, 0).normalize();scene.add(directionalLight4);var directionalLight5 = new THREE.DirectionalLight(0x222222, 7);directionalLight5.position.set(20, 0, 0).normalize();scene.add(directionalLight5);var directionalLight6 = new THREE.DirectionalLight(0x222222, 7);directionalLight6.position.set(-20, 0, 0).normalize();scene.add(directionalLight6);/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大this.renderer = new THREE.WebGLRenderer({ antialias: true });this.renderer.setSize(container.clientWidth, container.clientHeight);this.renderer.setClearColor('#DEE1E6', 1.0);//设置场景颜色container.appendChild(this.renderer.domElement);controls = new TrackballControls(this.camera, this.renderer.domElement);this.controls.rotateSpeed = 4;this.controls.zoomSpeed = 2;this.controls.panSpeed = 2;this.controls.dynamicDampingFactor = 0.3;},render () {requestAnimationFrame(this.render);this.renderer.render(scene, this.camera); //执行渲染操作},/* 数据更新 */update () {// stats.update();controls.update();},/* 循环渲染 */animate () {//if (selectObject != undefined && selectObject != null) {//    renderDiv(selectObject);//}requestAnimationFrame(this.animate);this.renderer.render(scene, this.camera);this.update();},},}
</script><style  scoped>
.test {height: 84.9vh;width: 100%;
}
</style>

VUE使用three.js模型缩放卡顿问题相关推荐

flv.js播放卡顿，短线重连，包括九宫格，四宫格，一宫格
解决flv.js断网重连等一些问题这里简单做一下改动请看下图这张图片就展示了宫格以及设备等一些问题附上解决断流以及卡顿的代码,各位前端的精英,看看就能懂 this.$nextTick(() = ...
el-table大数据量渲染卡顿的一种思路
背景现需要呈现一个表格,有近500行,30多列,使用vue+elementUI呈现. 这个数据量不算大,但可能列数比较多,渲染时速度很慢,滚动会有卡顿,使用体验不佳. 但并不想做分页处理,想要尽可能 ...
解决百度地图多点聚合卡顿问题
由于百度地图提供的MarkerClusterer_min.js 比较卡顿特此提供加速后的MarkerClusterer_min.js 源码如下 /*** @fileoverview MarkerCl ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
vue 页面卡顿(数据量大)
碰到个离谱的功能要循环好多遍然后在赋值本来数据量就大然后还循环就造成了页面特别卡顿分页或删除功能点一下要好几秒才反应过来差一点的电脑浏览器直接崩溃 so 我Google了好多方法 ...
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1 ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
Vue动画卡顿，动画帧数优化
项目中需要在地图中做一个风场粒子动画,原生js方法绘制的动画非常流畅,但是一放到Vue中就会变得很卡顿,帧数大概只有原来的30%,最终发现是因为map变量放在了date中重写了变量的getter/se ...

VUE使用three.js模型缩放卡顿问题

VUE使用three.js模型缩放卡顿问题

VUE使用three.js模型缩放卡顿问题相关推荐

最新文章

热门文章