vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)

nrrd3D模型文件、vtk3D模型文件vue如何使用

话不多说，直接上图

小白的坎坷路程

网上资源视频关于nrrd模型和vtk模型是真的少，公司都没有接触过这方面，职场小白，
累死了要。大家有同感可以看看，没兴趣的直接去看下文步骤。
当我html的静态实例想在vue框架下进行集成我发现出现一系列问题。
问题一：包有问题
1、我查了大量的网站：说可以改webpack的配置文件\build\webpack.base.conf.js
中rules，导入包，我发现我的vue项目没有bulid文件夹
2、问题不大，查网上资料发现也可以改vue.config.js修改webpack下的rule，emmmm·······，
参数对不上，运行不起来，做为一个菜鸡我失败了。
3、没事，让项目出现build文件夹试试呗，网上资料告诉我是使用vue3版本
或者vue-cli版本太高导致没有build文件夹，emmm·····，我先cvue -V查看版本
显示vue2.6.0，
没问题，vue-cli：3.11.6也没啥问题，vue-cli需要卸载重装低版本，我怂了没敢去搞。
4、问题不大，重新创建vuedemo试试，vue create 创建demo，
自定义vue2.x创建一次发现还是没build文件，我寻思可能选的自定义文件有点多，
我又建了一个啥都不选的vue demo. 还是没有bulid文件夹。
5、要不使用webpack创建demo测试，想了想最终是在vue项目中使用，估计成功也没啥用。
6、没事，心态放平， 网上关于obj stl文件模型很多案例，
使用npm导入的three-obj-mst-loader，我觉得npm官网有我需要的loader文件，
ok,vtk-loader是有的，nrrd-loader没有找到，有个nrrd-loader-js但是没有three前缀，
用了没效果。
7、有幸看到一个vue集成vue-3d-model预览模型，是用来展示obj和stl等有限的3d模型的，
我去它的git地址上看，作者大佬说，three.js自身example里面就是第三方库，
很完善，所以不再维护了
我悟了，three.js自身example里面就是第三方库，修改build下webpack是好几年前过时的老办法。
8、没办法,又回到引jsm下的包问题，引入nrrd-loader文件，调用load方法页面报错，
引入包的head.split方法为null,
9、为啥子，我进入nrrd-loader中打印上层函数发现head为空，通过上层函数判断
if ( _bytes[ i - 1 ] == 10 && _bytes[ i ] == 10 )不通过导致head为null
10、那为啥静态页面可以，我打印一下文件数据对比，发现vue文件筛选字符只有889个，
静态页面打印文件发现288899个字符，***，同一个文件啊！
11、流程在来一遍：百度为啥nrrd文件html正常、框架就不可以，没有答案。
然后npm找到three.js从问题集中找nrrd相关，emmm·····，打开中文翻译。 还是没有。
12、不管如何：是包有问题-思路：1、低版本包试试，2、怎么出现bulid文件夹、3、网上资料说可能是文件必须放在public文件夹或者static文件夹中。
13、低版本包没有jsm文件夹、pass.     public和static文件夹都没有效果。
14、不行删库跑路吧·····，bulid文件夹只有基于webpack+vue-cli文件创建才存在，具体看下面步骤一，出来后，根据http://www.yanhuangxueyuan.com/doc/Three.js/ThreejsVuejs.html修改了配置文件\build\webpack.base.conf.js，后启动不起来直接一片错误，可能是我哪里搞错了吧，毕竟中文网上是这么设置的。
15、无奈下，我继续用jsm里面的包，然后把文件放在static文件夹下，居然成功了。就很过分。
16、最后就是把数据放在data下，把方法放在methods下，生命周期mounted下启动初始化函数。

直接点击下面下载支持下博主，直接可以运行
项目下载地址
或者根据下面步骤阅读同样也可以执行成功

总结步骤

步骤一
基于webpack创建vue项目
vue init webpack my-vue
一路回车，然后你会发现建好的项目就有build文件夹了，当然最后我也没修改它。
可参考这篇博客进行操作：博主介绍很全
https://www.jb51.net/article/147953.htm
步骤二

导入包:
npm install three --save-dev

import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import { NRRDLoader } from 'three/examples/jsm/loaders/NRRDLoader.js';
import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';

步骤三
文件放在static中

其实剩下就很普通了，设置场景，相机等网上资源还是很多的。

代码

vue组件测试代码 --加载模型文件成功

会展示一个旋转的正方体，没关系下面代码替换就可以了
<template><div class="home"><!-- 测试用 --><div id="info"></div><div id="inset"></div><div id="container"></div></div>
</template>
<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import { NRRDLoader } from 'three/examples/jsm/loaders/NRRDLoader.js';
import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
export default {name: 'HelloWorld',components: {},data() {return {stats: null,camera: null,scene: null,renderer: null,mesh: null,gui:null,controls: null,nrrdloader: null,vtkloader: null}},methods: {init: function() {let container = document.getElementById('container');this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);this.camera.position.z = 1;this.scene = new THREE.Scene();let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);let material = new THREE.MeshNormalMaterial();this.mesh = new THREE.Mesh(geometry, material);this.scene.add(this.mesh);this.gui = new GUI();this.nrrdloader = new NRRDLoader(); // 加载模型文件this.nrrdloader.load( "../../static/1.nrrd",  volume => {console.log(volume)});this.vtkloader = new VTKLoader()this.vtkloader.load( "../../static/bone_1.vtk", function( volume ) {console.log(volume)});this.renderer = new THREE.WebGLRenderer({antialias: true});this.renderer.setSize(container.clientWidth, container.clientHeight);container.appendChild(this.renderer.domElement);},animate: function() {requestAnimationFrame(this.animate);this.mesh.rotation.x += 0.01;this.mesh.rotation.y += 0.02;this.renderer.render(this.scene, this.camera);}},mounted() {this.init();this.animate()}
}
</script>
<style>#container {height: 400px;}#inset {width: 150px;height: 150px;background-color: transparent; /* or transparent; will show through only if renderer alpha: true */border: none; /* or none; */margin: 0;padding: 0px;position: absolute;left: 20px;bottom: 20px;z-index: 100;}
</style>

css代码替换

 /* #container {height: 400px;} */#inset {width: 150px;height: 150px;background-color: transparent; /* or transparent; will show through only if renderer alpha: true */border: none; /* or none; */margin: 0;padding: 0px;position: absolute;left: 20px;bottom: 20px;z-index: 100;}body {margin: 0;background-color: #000;color: #fff;font-family: Monospace;font-size: 13px;line-height: 24px;overscroll-behavior: none;
}a {color: #ff0;text-decoration: none;
}a:hover {text-decoration: underline;
}button {cursor: pointer;text-transform: uppercase;
}canvas {display: block;
}#info {position: absolute;top: 0px;width: 100%;padding: 10px;box-sizing: border-box;text-align: center;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;pointer-events: none;z-index: 1; /* TODO Solve this in HTML */
}a, button, input, select {pointer-events: auto;
}.dg.ac {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;z-index: 2 !important; /* TODO Solve this in HTML */
}#overlay {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height:100%;display: flex;align-items: center;justify-content: center;opacity: 1;background-color: #000000;color: #ffffff;
}#overlay > div {text-align: center;
}#overlay > div > button {height: 20px;background: transparent;color: #ffffff;outline: 1px solid #ffffff;border: 0px;cursor: pointer;
}#overlay > div > p {color: #777777;font-size: 12px;
}
body {font-family: Monospace;background-color: #000;color: #fff;margin: 0px;overflow: hidden;}#info {color: #fff;position: absolute;top: 10px;width: 800px;height: 800px;text-align: center;z-index: 100;display:block;}#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }

数据data更新

data() {return {stats: null,camera: null,scene: null,renderer: null,mesh: null,gui:null,dirLight: null,controls: null,nrrdloader: null,vtkloader: null,renderer2: null, // 渲染器二camera2: null, // 相机二axes2: null, // 坐标系scene2: null // 场景二}},

methods方法更新

init: function() {// let container = document.getElementById('container');this.camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );this.camera.position.z = 300;this.scene = new THREE.Scene();this.scene.add(this.camera)let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);let material = new THREE.MeshNormalMaterial();this.mesh = new THREE.Mesh(geometry, material);this.scene.add(this.mesh);this.dirLight = new THREE.DirectionalLight( 0xffffff ); // 平行光 所有被照射的区域亮度是一致的this.dirLight.position.set( 200, 200, 1000 ).normalize(); // 设置平行光方向this.camera.add( this.dirLight );this.camera.add( this.dirLight.target );this.gui = new GUI();this.nrrdloader = new NRRDLoader(); // 加载模型文件this.nrrdloader.load( "../../static/1.nrrd",  volume => {console.log(volume)let geometry, material, sliceZ, sliceY, sliceX;//box helper to see the extend of the volumegeometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength ); // 长方体material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 材质let cube = new THREE.Mesh( geometry, material );cube.visible = false;let box = new THREE.BoxHelper( cube ); // 给立方体设置边框this.scene.add( box );box.applyMatrix4( volume.matrix ); // 立方体最大位置this.scene.add( cube );//z plane ？？sliceZ = volume.extractSlice( 'z', Math.floor( volume.RASDimensions[ 2 ] / 4 ) );this.scene.add( sliceZ.mesh );//y planesliceY = volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );this.scene.add( sliceY.mesh );//x planesliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );this.scene.add( sliceX.mesh );this.gui.add( sliceX, "index", 0, volume.RASDimensions[ 0 ], 1 ).name( "indexX" ).onChange( function () {sliceX.repaint.call( sliceX );} );this.gui.add( sliceY, "index", 0, volume.RASDimensions[ 1 ], 1 ).name( "indexY" ).onChange( function () {sliceY.repaint.call( sliceY );} );this.gui.add( sliceZ, "index", 0, volume.RASDimensions[ 2 ], 1 ).name( "indexZ" ).onChange( function () {sliceZ.repaint.call( sliceZ );} );this.gui.add( volume, "lowerThreshold", volume.min, volume.max, 1 ).name( "Lower Threshold" ).onChange( function () {volume.repaintAllSlices();} );this.gui.add( volume, "upperThreshold", volume.min, volume.max, 1 ).name( "Upper Threshold" ).onChange( function () {volume.repaintAllSlices();} );this.gui.add( volume, "windowLow", volume.min, volume.max, 1 ).name( "Window Low" ).onChange( function () {volume.repaintAllSlices();} );this.gui.add( volume, "windowHigh", volume.min, volume.max, 1 ).name( "Window High" ).onChange( function () {volume.repaintAllSlices();} );});var vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, morphTargets: false, side: THREE.DoubleSide, color: 0xff0000 } );this.vtkloader = new VTKLoader()this.vtkloader.load( "../../static/bone_1.vtk", geometry =>{console.log(geometry)geometry.computeVertexNormals();var mesh = new THREE.Mesh( geometry, vtkmaterial ); // mesh 物体对象this.scene.add( mesh );var visibilityControl = {visible: true};this.gui.add( visibilityControl, "visible" ).name( "Model Visible" ).onChange( ()=>{mesh.visible = visibilityControl.visible;renderer.render( this.scene, this.camera );} );});// this.renderer = new THREE.WebGLRenderer({antialias: true});this.renderer = new THREE.WebGLRenderer( { alpha: true } );this.renderer.setPixelRatio( window.devicePixelRatio ); //设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊// this.renderer.setSize(container.clientWidth, container.clientHeight);this.renderer.setSize(window.innerWidth, window.innerHeight);var container = document.createElement( 'div' );document.body.appendChild( container );container.appendChild(this.renderer.domElement);this.controls= new TrackballControls( this.camera, this.renderer.domElement ); // 轨迹球控制器，通过键盘和鼠标控制前后左右平移和缩放场景this.controls.rotateSpeed = 5.0;this.controls.zoomSpeed = 5;this.controls.panSpeed = 2;this.controls.staticMoving = true;this.stats = new Stats(); // 帧率监测器container.appendChild( this.stats.dom );this.setupInset()window.addEventListener( 'resize', this.onWindowResize, false ); // 实时监听·},setupInset(){var insetWidth = 150, insetHeight = 150;var container2 = document.getElementById( 'inset' );container2.width = insetWidth;container2.height = insetHeight;// rendererthis.renderer2 = new THREE.WebGLRenderer( { alpha: true } );this.renderer2.setClearColor( 0x000000, 0 );this.renderer2.setSize( insetWidth, insetHeight );container2.appendChild( this.renderer2.domElement );// scenethis.scene2 = new THREE.Scene();// camerathis.camera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );this.camera2.up = this.camera.up; // important!// axesthis.axes2 = new THREE.AxesHelper( 100 );this.scene2.add( this.axes2 );},animate: function() {requestAnimationFrame(this.animate);this.controls.update();//copy position of the camera into insetthis.camera2.position.copy( this.camera.position );this.camera2.position.sub( this.controls.target );this.camera2.position.setLength( 300 );this.camera2.lookAt( this.scene2.position );this.renderer.render( this.scene, this.camera );this.renderer2.render( this.scene2, this.camera2 );this.stats.update();},onWindowResize() {this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();this.renderer.setSize( window.innerWidth, window.innerHeight );this.controls.handleResize();}},mounted() {this.init();this.animate()}
}

项目的文件资源可以从我的上一篇博客中免费获取到，导入即可获取成功

创作不易，希望点赞、关注支持一下

vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)相关推荐

vue.config.js配置
原作者项目地址:https://github.com/staven630/vue-cli3-config const path = require("path"); const w ...
Vue.js学习笔记 02、Vue组件篇笔记
文章目录前言一.全局组件子组件应用组件优点:组件的可复用性全局组件缺点描述二.局部组件创建与注册局部组件(认识components属性) 局部组件的默认规定(组件名称首字母全都大写) 三 ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）
UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,二选一即可. 修改或调整配置文件后,推荐重新运行,以防不生效. 配置完成后,请求接口显示 Please enable JavaS ...
baidumap vue 判断范围_懂一点前端—Vue快速入门
01. 什么是 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以数据驱动和组件化的思想构建的 ...
vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
jenkins vue 打包特别慢_从零开始使用VUE开发桌面客户端
Electron 是一个非常强大的工具,它可以用来构建跨平台的桌面应用,编写一次到处运行. 知乎视频www.zhihu.com 0. 准备工作安装好nodejs 在终端中输入 node -v 看到 ...
vue使用three.js加载.FBX模型文件
1.需要安装的依赖 //three依赖yarn add three//tween.js依赖yarn add @tweenjs/tween.js 2. 封装组件 draw.vue 放在component ...
vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...

vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)

nrrd3D模型文件、vtk3D模型文件vue如何使用

总结步骤

代码

vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)相关推荐

最新文章

热门文章