网站建设价格差别/免费制作永久个人网站
nrrd3D模型文件、vtk3D模型文件静态html页面显示浏览器端展示
话不多说先上图
上代码
<!DOCTYPE html>
<html lang="en"><head><title>医疗影像数据预处理-nrrd-three.js webgl - loaders - NRRD loader</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>#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></head><body><div id="info"><a href="https://WebGLStudy.COM" target="_blank" rel="noopener">WebGLStudy.COM</a> -ThreeJS【WebGL】载入NRRD医疗影像数据CT_3D骨头扫描切片3D可视化</div><div id="inset"></div><script type="module">import * as THREE from '../build/three.module.js';import Stats from './jsm/libs/stats.module.js';import { GUI } from './jsm/libs/dat.gui.module.js';import { TrackballControls } from './jsm/controls/TrackballControls.js';import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';import { VTKLoader } from './jsm/loaders/VTKLoader.js';var container, // dom 标签容器stats, // 帧率检测camera,// 相机controls, // 相机控件scene, // 场景renderer, // 渲染器container2,// dom 标签容器renderer2, // 渲染器二camera2, // 相机二axes2, // 坐标系scene2; // 场景二init(); // 初始化animate(); // 运动function init() {// 透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far)，遵循近大远小的空间规则camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );/*fov: 垂直方向夹角aspect:可视区域长宽比 width/heightnear:渲染区域离摄像机最近的距离far:渲染区域离摄像机最远的距离，3仅在距离摄像机near和far间的区域会被渲染到 canvas中*/camera.position.z = 300; // camera.position：控制相机在整个3D环境中的位置（取值为3维坐标对象-THREE.Vector3(x,y,z)）scene = new THREE.Scene(); // 场景(Scene)scene.add( camera ); // 在场景中添加相机// light 光var dirLight = new THREE.DirectionalLight( 0xffffff ); // 平行光 所有被照射的区域亮度是一致的dirLight.position.set( 200, 200, 1000 ).normalize(); // 设置平行光方向camera.add( dirLight );camera.add( dirLight.target );var loader = new NRRDLoader(); // 加载模型文件console.log(loader)loader.load( "./1.nrrd", function ( volume ) {console.log(volume)var geometry,material,sliceZ,sliceY,sliceX;//box helper to see the extend of the volumevar geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength ); // 长方体var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 材质var cube = new THREE.Mesh( geometry, material );cube.visible = false;var box = new THREE.BoxHelper( cube ); // 给立方体设置边框scene.add( box );box.applyMatrix4( volume.matrix ); // 立方体最大位置scene.add( cube );//z plane ？？sliceZ = volume.extractSlice( 'z', Math.floor( volume.RASDimensions[ 2 ] / 4 ) );scene.add( sliceZ.mesh );//y planesliceY = volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );scene.add( sliceY.mesh );//x planesliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );scene.add( sliceX.mesh );gui.add( sliceX, "index", 0, volume.RASDimensions[ 0 ], 1 ).name( "indexX" ).onChange( function () {sliceX.repaint.call( sliceX );} );gui.add( sliceY, "index", 0, volume.RASDimensions[ 1 ], 1 ).name( "indexY" ).onChange( function () {sliceY.repaint.call( sliceY );} );gui.add( sliceZ, "index", 0, volume.RASDimensions[ 2 ], 1 ).name( "indexZ" ).onChange( function () {sliceZ.repaint.call( sliceZ );} );gui.add( volume, "lowerThreshold", volume.min, volume.max, 1 ).name( "Lower Threshold" ).onChange( function () {volume.repaintAllSlices();} );gui.add( volume, "upperThreshold", volume.min, volume.max, 1 ).name( "Upper Threshold" ).onChange( function () {volume.repaintAllSlices();} );gui.add( volume, "windowLow", volume.min, volume.max, 1 ).name( "Window Low" ).onChange( function () {volume.repaintAllSlices();} );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 } );var vtkloader = new VTKLoader();vtkloader.load( "./bone_1.vtk", function ( geometry ) {geometry.computeVertexNormals();var mesh = new THREE.Mesh( geometry, vtkmaterial ); // mesh 物体对象scene.add( mesh );var visibilityControl = {visible: true};gui.add( visibilityControl, "visible" ).name( "Model Visible" ).onChange( function () {mesh.visible = visibilityControl.visible;renderer.render( scene, camera );} );} );// rendererrenderer = new THREE.WebGLRenderer( { alpha: true } );renderer.setPixelRatio( window.devicePixelRatio ); //设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染器大小,即canvas画布的大小container = document.createElement( 'div' );document.body.appendChild( container );container.appendChild( renderer.domElement ); //在页面容器中添加canvascontrols = new TrackballControls( camera, renderer.domElement ); // 轨迹球控制器，通过键盘和鼠标控制前后左右平移和缩放场景controls.rotateSpeed = 5.0;controls.zoomSpeed = 5;controls.panSpeed = 2;controls.staticMoving = true;stats = new Stats(); // 帧率监测器container.appendChild( stats.dom );var gui = new GUI(); //setupInset();window.addEventListener( 'resize', onWindowResize, false ); // 实时监听·}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );controls.handleResize();}function animate() {requestAnimationFrame( animate );controls.update();//copy position of the camera into insetcamera2.position.copy( camera.position );camera2.position.sub( controls.target );camera2.position.setLength( 300 );camera2.lookAt( scene2.position );renderer.render( scene, camera );renderer2.render( scene2, camera2 );stats.update();}function setupInset() {var insetWidth = 150,insetHeight = 150;container2 = document.getElementById( 'inset' );container2.width = insetWidth;container2.height = insetHeight;// rendererrenderer2 = new THREE.WebGLRenderer( { alpha: true } );renderer2.setClearColor( 0x000000, 0 );renderer2.setSize( insetWidth, insetHeight );container2.appendChild( renderer2.domElement );// scenescene2 = new THREE.Scene();// cameracamera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );camera2.up = camera.up; // important!// axesaxes2 = new THREE.AxesHelper( 100 );scene2.add( axes2 );}</script></body>
</html>解释：
如果您只是想展示的话，那么直接把
> loader.load("./1.nrrd", function(volume)中的nrrd文件和
> vtkloader.load( "./bone_1.vtk", function ( geometry ) 中的vtk文件改成自己的就ok
如果你想修改参数的设置话，建议您学习一遍three.js的初级基础教程，
这个链接我就不发了，网上有教程，在哔哔哩哩上也有免费的教程，5天肯定能学完基础的
除html外，还需要three.js包文件
直接去我的码云上有这个案例，可以整体copy下来直接运行。
git地址–https://gitee.com/geyixia/html–threejs–nrrd-vtk
还可以在这里点击下载，支持一下博主
项目源代码
html运行3d文件需要启动本地服务–运行解释(小白注意哈)
请注意：
代码copy下来之后
肯定不能直接打开html页面，浏览器端无法解析3d模型文件，
我刚开始学的时候浏览器不能打开3d文件，各种百度，
遇到说改浏览器后缀名的，改设置的，emmm····没啥用。
其实你只需要开启本地服务器就可以了
步骤截图
输入cmd回车
输入:http-server
在浏览器输入：http://localhost:8080/ 即可（浏览器端显示进去后点击demo文件夹,点击index.html即可）
希望多多支持，我会在下一篇写vue框架如何进行集成这个页面