vtk.js、three.js在浏览器展示3d图形

对于unstructured grid非格式化网格图形vtk数据，是没有办法在浏览器上展示的。用paraview对vtk进行extract surface后再另存为vtk可以转成polydata类型的vtk，可以在three.js上显示，但不能在vtk.js里显示。

vtk+qt的c++开发是比较热门的，不在本文讨论之列。

在静态页面中，而不是vue中，可以这样来使用three.js：

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - loaders - vtk 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="/static/sim/main.css"></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -vtk formats loader test<br />Legacy vtk model from <a href="http://www.cc.gatech.edu/projects/large_models/" target="_blank" rel="noopener">The GeorgiaTech Lagre Geometric Model Archive</a></div><script type="module">import * as THREE from '/static/sim/js/three.module.js';import Stats from '/static/sim/jsm/libs/stats.module.js';import { TrackballControls } from '/static/sim/jsm/controls/TrackballControls.js';import { VTKLoader } from '/static/sim/jsm/loaders/VTKLoader.js';let container, stats;let camera, controls, scene, renderer;init();animate();function init() {camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );camera.position.z = 0.2;scene = new THREE.Scene();scene.add( camera );// lightconst hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );scene.add( hemiLight );const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );dirLight.position.set( 2, 2, 2 );scene.add( dirLight );const loader = new VTKLoader();loader.load( "/static/sim/models/vtk/ex2.vtk", function ( geometry ) {// loader.load( "/static/sim/models/vtk/asc.vtu", function ( geometry ) {//ansys输出的rst经过python读取二进制文件，输出非格式化网格数据后用paraview转成格式化网格数据，可以显示geometry.center();geometry.computeVertexNormals();const material = new THREE.MeshLambertMaterial( { color: 0xffffff } );const mesh = new THREE.Mesh( geometry, material );mesh.position.set( - 0.075, 0.005, 0 );mesh.scale.multiplyScalar( 0.0002 );// 调整显示比例scene.add( mesh );} );const loader1 = new VTKLoader();loader1.load( '/static/sim/models/vtk/cube_ascii.vtp', function ( geometry ) {geometry.computeVertexNormals();geometry.center();const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );const mesh = new THREE.Mesh( geometry, material );mesh.position.set( - 0.025, 0, 0 );mesh.scale.multiplyScalar( 0.01 );scene.add( mesh );} );const loader2 = new VTKLoader();loader2.load( '/static/sim/models/vtk/cube_binary.vtp', function ( geometry ) {geometry.computeVertexNormals();geometry.center();const material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );const mesh = new THREE.Mesh( geometry, material );mesh.position.set( 0.025, 0, 0 );mesh.scale.multiplyScalar( 0.01 );scene.add( mesh );} );const loader3 = new VTKLoader();loader3.load( '/static/sim/models/vtk/cube_no_compression.vtp', function ( geometry ) {geometry.computeVertexNormals();geometry.center();const material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );const mesh = new THREE.Mesh( geometry, material );mesh.position.set( 0.075, 0, 0 );mesh.scale.multiplyScalar( 0.01 );scene.add( mesh );} );// rendererrenderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container = document.createElement( 'div' );document.body.appendChild( container );container.appendChild( renderer.domElement );// controlscontrols = new TrackballControls( camera, renderer.domElement );controls.minDistance = .1;controls.maxDistance = 0.5;controls.rotateSpeed = 5.0;stats = new Stats();container.appendChild( stats.dom );//window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );controls.handleResize();}function animate() {requestAnimationFrame( animate );controls.update();renderer.render( scene, camera );stats.update();}</script></body>
</html>

vtk.js、three.js在浏览器展示3d图形相关推荐

html结合css实现浏览器展示3D相册
最近写了一个在浏览器展示3D相册效果,通过html文件结合css实现. 1.html详细代码如下: <!DOCTYPE html> <html> <head> &l ...
three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）
Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思. 结构 .glb.gltf文件最好放在服务器上 ...
JavaScript武力值飙升！用TensorFlow.js轻松实现在浏览器里搞深度学习......
近年来,AI 与人类的生活越来越紧密,慢慢变得无处不在.那么提到 AI ,我们会想到什么?小编最先想到的是机器人.早在小学作文中,我就写到 2021 年到处都是机器人,机器人汽车到处飞.结果 2021 ...
Three.js初体验——VR全景展示
前言 Three.js 是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能. Three.js中文教程:http://www.webgl3d.cn/Three.js/ Thre ...
html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
用于业务的精炼js工具函数（浏览器环境）
js工具函数(浏览器环境) github : github.com/Javison666/- 引用库,后续 $fn 直接当作全局进行使用 import $fn from 'jj-browser-fn' ...
给js加版本号解决浏览器缓存问题
给js加版本号解决浏览器缓存问题参考文章: (1)给js加版本号解决浏览器缓存问题 (2)https://www.cnblogs.com/wblx/p/11050498.html 备忘一下.
js快速判断IE浏览器(兼容IE10与IE11)
原文:js快速判断IE浏览器(兼容IE10与IE11) 在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器 1 ...
HTML引入vue.js，在ie浏览器中不显示
因为只有两个页面,所以我没有用 vue-cli 搭框架,直接在 HTML 中引入vue.js 文件.发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie ...

vtk.js、three.js在浏览器展示3d图形

vtk.js、three.js在浏览器展示3d图形相关推荐

最新文章

热门文章