vue.js+THREE.js演示服务端3D模型流程总结
·场景搭建
使用npm或者其他获取安装three,就像npm i three,之后在需要演示模型的vue组件内import * as THREE from 'three',此时我们就可以创建场景scene、灯光light、镜头、几何体等等开始渲染循环了
镜头控制是必要的,我们不会加载一个3D模型只为了看一面的剪影,从官网可以找到许多种控制器,本项目使用的是npm i three-orbitcontrols
import OrbitControls from 'three-orbitcontrols'
create(){ //创建场景
this.renderer = new THREE.WebGLRenderer(); this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 5000 )
this.camera.position.z = 160
this.camera.position.x = 0
this.camera.position.y = 0 this.scene = new THREE.Scene();
this.scene.add(this.camera) //鼠标控制镜头
this.controls = new OrbitControls(this.camera) //创建一个环境灯光
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
this.scene.add( ambientLight ); //创建一个点灯光
var pointLight = new THREE.PointLight( 0xffffff, 0.5 ); //给相机添加光源
this.camera.add( pointLight ); //渲染器样式
this.renderer.setClearColor(new THREE.Color('black'));
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.setAttribute("style"," height:100%;width: 100%;") 30 },
现在有了一个有灯光和控制器但没有模型的场景,而且没有挂载到页面
·引入加载器
显然,我们无法使用代码建立所有的模型,尽管three提供了建立多种几何体的强大功能让我们可以以纯代码开发三维场景,但项目中仍需要three提供的多种3D模型文件的Loader.js来帮助我们将建模软件生产的模型加载成可以添加到scene的object
你可能需要展示stl|obj|3ds|3mf|....等等文件类型,我们可以在已安装的three路径 “\node_modules\three\examples\js\loaders” 下找到所有已支持的类型加载器,如果你找到了3MFLoader.js但没有看到3DSLoader.js,可以到threejs的官方示例下查找使用样例,页面右下角查看源代码就会发现3ds加载器叫TDSLoader.js ;P
官方样例统统使用head写法引入js,这不适合vue,除非你的网站就只有这一个组件演示这一类模型(要知道vue大都是单页面网站),按照不同文件类型按需加载对应的加载器js才是效率的使用方式,那么。。使用ES6提供的import()实现运行时加载
例如objloader.js,将文件从node_modules中移到用户可以获取到的路径下(比如static),就可以按如下方式使用了
somefunction:(path){//模型文件url
......
import('@/static/OBJLoader.js').then(module => { let Loader = new THREE.OBJLoader(); that.loadermashs(Loader,path) }).catch(err => { this.message = "加载器获取失败:"+err;
});
} onProgress( xhr ) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded / xhr.total * 100; //message承接加载进度
this.message = Math.round(percentComplete, 2) + '% 已加载' ;
}
}, onError( xhr ) { this.message = xhr;
}, loadermashs(Loader,path){ let that = this; Loader.setPath(path); Loader.load('', function(object) { that.scene.add(object); }, that.onProgress, that.onError);
},
注意:需要手动在OBJLoader.js中首行加入:var THREE = require('three')
e.g 编译时warning:"export 'OBJLoader' (imported as 'THREE') was not found in 'three',是因为THREE.OBJLoader()关系是运行时建立的,怎么消除这个warning我也不知道。。
·挂载与卸载
start(){//挂载到页面开始循环
document.getElementById("hello").appendChild(this.renderer.domElement)
this.running = true; this.animate()
}, animate() { this.renderer.render(this.scene, this.camera) if(this.running)
requestAnimationFrame(this.animate)//再次调用animate
}
running作为关闭标识
webGL中,手动卸载是有必要的,按照开发者原意,系统判断哪些资源可以废弃是不可能的:用户可能在某一帧放弃使用某个模型,也可能在下一帧重新启用,因此自动丢弃不被使用的资源是不合理的,而不做手动处理的后果是当你多次打开演示后:
Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one on...
所以请在关闭演示之前卸载他们:相关api
if(this.running){ let canvas = document.getElementsByTagName('canvas')[0]; if(canvas){
let gl = canvas.getContext('webgl'); canvas.addEventListener('webglcontextlost', function(e) {
//console.log(e);
}, false); gl.getExtension('WEBGL_lose_context').loseContext();
}
this.running = false this.renderer.dispose(); this.scene.dispose(); this.controls.dispose();
}
·其他
网页应用的dialog中展示某obj模型,最终演示效果:
此外还有材质加载、贴图、stl格式jzip问题等等。。有的坑我还没踩只是远远的望了一下,如果同为初学者,那么希望能帮到你
如有见解还请大佬指教:D
vue.js+THREE.js演示服务端3D模型流程总结的更多相关文章
- netty服务端客户端启动流程分析
服务端启动流程 我们回顾前面讲解的netty启动流程,服务端这边有两个EventLoopGroup,一个专门用来处理连接,一个用来处理后续的io事件 服务端启动还是跟nio一样,绑定端口进行监听,我们 ...
- udp服务端收发数据流程
1.创建服务端的socket以便开始通讯.2.绑定ip以及端口号,这样客户端才能找到这个程序.3.因为本地网卡不止一个所以尽量不写死,一般用""空来表示所有本地网卡.4.接下来开始 ...
- hadoop rpc协议客户端与服务端的交互流程
尽管这里是hadoop的rpc服务,但是hadoop还是做到了一次连接仅有一次认证.具体的流程待我慢慢道来. 客户端:这里我们假设ConnectionId对应的Connection并不存在.在调用ge ...
- SimpleRpc-客户端与服务端工作模型探讨
前言 本篇文章讲述客户端与服务端的具体设计细节.有细心的小伙伴发现,客户端和服务端的工作方式不一样:服务端是多线程计算模型,利用工作线程完成数据的读取,而客户端是单线程(利用Reactor线程完成数据 ...
- 浏览器与服务端请求响应流程与HTTP协议
浏览器与服务端请求响应流程图: 1.HTTP概要 1.1. 定义 HTTP(HyperText Transfer Protocol,超文本传输协议)最早就是计算机与计算机之间沟通的一种标准协议,这种 ...
- sofa-rpc 服务端源码流程走读
sofa-rpc是阿里开源的一款高性能的rpc框架,这篇文章主要是对sofa-rpc provider启动服务流程的一个代码走读,下面是我简单绘制的一个基本的关系流程图 下面我们根据sofa-rpc代 ...
- Linux下多进程服务端客户端模型二(粘包问题与一种解决方法)
一.Linux发送网络消息的过程 (1) 应用程序调用write()将消息发送到内核中 ( 2)内核中的缓存达到了固定长度数据后,一般是SO_SNDBUF,将发送到TCP协议层 (3)IP层从TCP层 ...
- Linux下多进程服务端客户端模型一(单进程与多进程模型)
本文将会简单介绍Linux下如何利用C库函数与系统调用编写一个完整的.初级可用的C-S模型. 一.基本模型: 1.1 首先服务器调用socket()函数建立一个套接字,然后bind()端口,开始l ...
- js发送请求给服务端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 脚本批量执行Redis命令
1.将命令写在文件中 数据量比较大的话,建议用程序去生成文件.例如: List<String> planIdList = planDao.findAll().parallelStream( ...
- SAP B1:如何在水晶报表中插入二维码
动态二维码API接口地址:http://www.liantu.com/api.php?text=x备注: 动态网址内可自定义相应的字段拼接(如图5为 [批号]+[质检员]字段) 若API接口链接失效, ...
- 无法Google的解决方案
献给新入开发行业的小伙伴. 本文不会事无巨细的讲解每一个细节,只是为读者提供一个路线图,并提供相应的参考资料. 为了更高效的解决各种技术问题,有时不得不到墙外去寻找解决方案.每个开发者效率高了,宏观来 ...
- iOS开发 - 超级签名实现之描述文件
简介 因为最近企业签掉得太严重了,上头要求实现超级签进行游戏下载.故有了此文章,记录一下过程. 签名原理其实很简单,超级签名的技术就是使用个人开发者账号,将用户的设备当作开发设备进行应用分发.这也导致 ...
- Python: simple code
# !/usr/bin/env python3.6 # -*- coding: utf-8 -*- # visual studio 2017 # 2019 10 12 Geovin Du print ...
- SpringBoot+Redis简单使用
1.引入依赖 在pom.xml中加入 <dependency> <groupId>org.springframework.boot</groupId> <ar ...
- django补充CBV和FBV模式
django补充CBV和FBV模式FBV模式---函数:经常用的方式CBV模式---类CBV中url连接时函数名后面要接.as_view()class index(views.View): @... ...
- Appium(六):元素定位
1. 元素定位 对于自动化测试来说,核心技能就是对象的定位了.不管是web页面上的按钮或输入框,还是移动app上的一个按钮或输入框,我们要想对其进行点击或输入操作,前提是要先找到这个对象. webdr ...
- 【ftp服务】ftp登陆报错530 Login incorrect. Login failed.
ftp登陆时报错,530 Login incorrect.Login failed.1.cat /etc/passwd,查看你登陆的账户主目录和登陆shell对应的是什么,我的是/sbin/nolog ...
- centos安装go环境
centos安装go环境 1,下载合适的go安装包 https://studygolang.com/dl 2 上传到 centos服务器的 /usr/local下然后解压 3.设置go的环境变量 ...