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 volume
geometry = 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 plane
sliceY = volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );
this.scene.add( sliceY.mesh );
//x plane
sliceX = 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;
// renderer
this.renderer2 = new THREE.WebGLRenderer( { alpha: true } );
this.renderer2.setClearColor( 0x000000, 0 );
this.renderer2.setSize( insetWidth, insetHeight );
container2.appendChild( this.renderer2.domElement );
// scene
this.scene2 = new THREE.Scene();
// camera
this.camera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );
this.camera2.up = this.camera.up; // important!
// axes
this.axes2 = new THREE.AxesHelper( 100 );
this.scene2.add( this.axes2 );
},
animate: function() {
requestAnimationFrame(this.animate);
this.controls.update();
//copy position of the camera into inset
this.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()
}
}
项目的文件资源可以从我的上一篇博客中免费获取到，导入即可获取成功
创作不易，希望点赞、关注支持一下