【vtk.js學習筆記(2)】繪製紋理深度圖
在vtk.js學習筆記(1)中搭建好了vtk.js的開發環境,並繪製了一個圓錐,這篇筆記將通過繪製一個帶深度資訊的紋理圖繼續學習vtk.js,實際效果如下圖所示。
1、通過vtkElevationReader實現帶深度資訊的紋理對映
import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture'; import vtkElevationReader from 'vtk.js/Sources/IO/Misc/ElevationReader'; import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'; import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'; import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow'; const img = new Image(); img.onload = function() { const texture = vtkTexture.newInstance(); texture.setInterpolate(true); texture.setImage(img); actor.addTexture(texture); }; img.src = `./img/dem.jpg`; const reader = vtkElevationReader.newInstance({ xSpacing: 0.01568, ySpacing: 0.01568, zScaling: 0.06666, }); reader.setUrl(`./img/dem.csv`); const mapper = vtkMapper.newInstance(); mapper.setInputConnection(reader.getOutputPort()); const actor = vtkActor.newInstance(); actor.setMapper(mapper); const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0] }); const renderer = fullScreenRenderer.getRenderer(); renderer.addActor(actor); renderer.resetCamera(); const renderWindow = fullScreenRenderer.getRenderWindow(); renderWindow.render();
webpack.config.js內容如下:
const path = require('path'); const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules; const entry = path.join(__dirname, './src/index.js'); const sourcePath = path.join(__dirname, './src'); // 也可用path.resolve(__dirname,'dist') const outputPath = path.join(__dirname, './dist'); module.exports = { mode: 'development', // 入口檔案的配置項 entry, // 控制檯報錯資訊 devtool: 'inline-source-map', // 出口檔案的配置項 output:{ // 輸出的路徑 path: outputPath, // 輸出的檔名稱 filename: 'bundle.js' }, // 模組:例如解讀CSS,圖片如何轉換,壓縮 module: { rules: [ { test: entry, loader: 'expose-loader?app' }, { test: /\.html$/, loader: 'html-loader' }, ].concat(vtkRules) }, // 外掛,用於生產模版和各項功能 plugins:[], // 配置webpack開發服務功能 devServer:{}, resolve: { modules: [ path.resolve(__dirname, 'node_modules'), sourcePath ] } }
上面第一個module沒有“s”,resolve中的是“modules”!
package.json內容如下:
{ "name": "vtkjs", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "build:release": "webpack -p", "start": "webpack-dev-server --content-base ./dist", "commit": "git cz", "semantic-release": "semantic-release" }, "author": "", "license": "ISC", "dependencies": { "vtk.js": "^6.4.22" }, "devDependencies": { "kw-web-suite": "^6.0.2" } }
執行npm run build命令,cd到dist資料夾下,執行http-server(需先npm install http-server或用webpack dev-server),開啟http://127.0.0.1:8080/,黑屏。
2、原因分析及改進
img.onload及reader.setUrl中使用回撥函式,當renderWindow.render()執行完成後圖片及深度資訊才載入完畢,而未被視窗渲染,因此應在img.onload()和reader.setUrl().then()中新增視窗渲染並將fullScreenRenderer、renderer和renderWindow的宣告前移,修改如下。
import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';
import vtkElevationReader from 'vtk.js/Sources/IO/Misc/ElevationReader';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [0, 0, 0]
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const img = new Image();
img.onload = function() {
const texture = vtkTexture.newInstance();
texture.setInterpolate(true);
texture.setImage(img);
actor.addTexture(texture);
renderWindow.render();
};
img.src = `./img/dem.jpg`;
const reader = vtkElevationReader.newInstance({
xSpacing: 0.01568,
ySpacing: 0.01568,
zScaling: 0.06666,
});
reader.setUrl(`./img/dem.csv`)
.then(function() {
renderer.resetCamera();
renderWindow.render();
});
const mapper = vtkMapper.newInstance();
mapper.setInputConnection(reader.getOutputPort());
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
3、在瀏覽器console中檢視及修改
當試圖在瀏覽器console中修改actor資訊時,報錯如下。
解決辦法是在index.js檔案的最後附加以下程式碼,即可在console中檢視或修改相應的屬性。
global.reader = reader;
global.mapper = mapper;
global.actor = actor;
global.renderer = renderer;
global.renderWindow = renderWindow;
,具體步驟為:
step1 新建資料夾,cmd輸入git clone [email protected]:orangecsy/vtkjs-exercise.git,cd 2進入資料夾2;
step2 cmd輸入npm run build;
step3 cd dist進入dist資料夾,cmd中輸入http-server(需先npm install http-server)或使用webpack配置開發伺服器;
step4 瀏覽器中輸入http://127.0.0.1:8080/,即為結果。
相關推薦
【vtk.js學習筆記(2)】繪製紋理深度圖
在vtk.js學習筆記(1)中搭建好了vtk.js的開發環境,並繪製了一個圓錐,這篇筆記將通過繪製一個帶深度資訊的紋理圖繼續學習vtk.js,實際效果如下圖所示。1、通過vtkElevationReader實現帶深度資訊的紋理對映import vtkTexture from
【phaser.js學習筆記(3)】開發H5遊戲“穿越小行星”並適配微信小遊戲
這篇筆記主要記錄使用phaser.js開發一個完整HTML5遊戲的整個過程,並將web端程式適配到微信小遊戲。 1、遊戲基本架構由於phaser社群目前僅有phaser2對微信小程式的支援,因此我選擇phaser v2.6.2作為遊戲的引擎。為便於開發除錯,以單獨的phas
【phaser.js學習筆記(1)】使用phaser.js製作遊戲
phaser.js是一款開源的HTML5遊戲框架,GitHub主頁上star超過了2萬。phaser.js支援使用JavaScript或TypeScript編寫遊戲,支援WebGL和Canvas渲染並可藉助第三方工具編譯成iOS,Android原生程式。phaser.js有兩
Node.js學習筆記(2):基本模塊
依次 常用模塊 nbsp 兩個 避免 ESS 第三方 text 編程 Node.js學習筆記(2):基本模塊 模塊 引入模塊 為了編寫可維護的代碼,我們把很多函數分組,分別放到不同的文件裏,這樣,每個文件包含的代碼就相對較少,很多編程語言都采用這種組織代碼的方式。在No
【DirectX11】【學習筆記(2)】開始畫圖
可程式設計渲染管線 概述:渲染管線就是用來建立虛擬攝像機看到的2d影象的設定步驟。它包含以下幾個階段 1. Input Assembler (IA) Stage 2. Vertex Shader (VS) Stage 3. Hull Shader (HS) Sta
【python學習筆記(2)】指令碼報錯"AttributeError: 'module' object has no attribute 'xxx'"解決方法
最近在編寫Python指令碼過程中遇到一個問題比較奇怪:Python指令碼完全正常沒問題,但執行總報錯"AttributeError: 'module' object has no attribute 'xxx'"。這其實是.pyc檔案存在問題。 問題定位: 檢視imp
【web框架】【 Cloud-Admin學習筆記(三)】【ace-gate閘道器】
Cloud-Admin專案裡的api閘道器專案是ace-gate,採用的是Spring Cloud Gateway元件,對外提供一個統一的api入口,並實現了api鑑權的功能。 從前端專案的配置裡可以看到,所有的api請求首先都轉到localhost:8765閘道器伺服器
【web框架】【 Cloud-Admin學習筆記(二)】【前後端分離的釋出配置】
因為spirng前後端分離設計,釋出流程略有不同,前後端單獨釋出,通過nginx整合 1、前端專案打包 #轉到前端專案根目錄 cd D:\001\myProject\GitHub\AG-Admin-v2-UI # 構建生成環境 cnpm run build:prod 然後等待伺服
【web框架】【 Cloud-Admin學習筆記(一)】【環境搭建】
Cloud-Admin是目前比較流行的基於Spring Cloud的web框架. 碼雲下載地址: https://gitee.com/minull/ace-security 1、用git也可直接下載,(也可直接下載解壓安裝) 2、用idea開啟專案 file-
tensorflow學習筆記(2)張量與計算圖
TensorFlow簡介: 官網上對TensorFlow的介紹是,一個使用資料流圖(data flow graphs)技術來進行數值計算的開源軟體庫。資料流圖中的節點,代表數值運算;節點節點之間的邊,代表多維資料(tensors)之間的某種聯絡。我們可以在多種裝置(含有CP
【Java】「深入理解Java虛擬機器」學習筆記(2)-記憶體管理
一、執行時資料區 JVM在執行Java程式的時候,將其執行時資料區劃分為若干不同區域。它們的用途和建立及銷燬的時間不同。 1、程式計數器(Program Counter Register) 是一塊很小的記憶體空間。當執行緒執行的是Java方法,它記錄的是當前正在執行的
【原創】VBA學習筆記(2)--例項,VBA刪除表中的空行
Sub 巨集1迴圈內刪列() '資料不規範,有的空行是4,有的是6,有的是1就不好處理了 For i = 15 To 100 Step 2 Rows(i).Delete Shift:=xlUp &nb
【原創】pygame學習筆記(2)----pie遊戲(需優化)
測試程式碼情況 (1)做到了弧形可以按出來 (2)數字的顯示正確 (3)出的一些低階錯誤 temp:\\pygame2.txt 這樣的錯誤, temp\\pygame2.txt 導致 這樣的錯誤,
【原創】python遊戲pygame學習筆記(2)--pie遊戲--還要DEBUG
# -*- coding:utf-8 -*- import pygame import sys from pygame.locals import * import math color=200,80,60 width=4 x=300 y=250 radius=2
學習筆記(2)---Matlab 圖像處理相關函數命令大全
緩沖 操作 .... 命令 tor ace trac cati msh Matlab 圖像處理相關函數命令大全 一、通用函數: colorbar 顯示彩色條 語法:colorbar \ colorbar(‘vert‘) \ colorbar(‘horiz‘) \ co
5.27:cocos2d-x初探學習筆記(2)--重要概念及Test樣例結構(轉)
這樣的 發生 菜單 add css 基礎 dsm 人的 添加 1.幾個重要概念 在cocos2d引擎中,有幾個概念,各自是導演。場景,布景和人物角色。 導演(CCDirector):在cocos2d-x引擎中,導演類是遊戲的組織者和領導者。導演制定規則讓遊戲內的場
WPF學習筆記(2)——動畫效果按鈕變長
anim aud tor col log 筆記 wpf style 分享 說明(2017-6-12 11:26:48): 1. 視頻教程裏是把一個按鈕點擊一下,慢慢變長: 註意幾個方面: (1)RoutedEvent="Button.Click",這裏面要用Button,是
bootstrap 學習筆記(2)---- 排版
-i 排列 分段函數 class 總結 capital src 設置 per 安裝和柵格系統學完,這篇寫的是排版手冊中排版的目錄如下圖 《標題,頁面主題,內聯文本元素,對齊,改變大小寫,縮略語,地址,引用,列表》手冊中介紹那麽多,其實並不是所有的都要去看看。很多都是沒有必
jQuery源碼學習筆記(2)
dom src asc turn rdo dom節點 defer ++ des 我們會認識到jQuery中一個叫做domManip的函數,這個函數的作用主要是處理DOM相關的操作,讓傳入的參數更加“幹凈”。 為什麽需要用這個domManip函數呢? 我們知道節點操作瀏覽
後盾網-CI框架實例教程-馬振宇 - 學習筆記(2)
welcom index 如何 ech lin bsp 後臺模板 back href 第三節視頻: 1、配置自動加載輔助函數URL: 在application/config/autoload.php中設置: $autoload[‘helper‘] =