three.js+vue浏览器端展示nrrd+vtk3D模型（截图功能+颜色功能）

前言

前面做了vue+three.js展示nrrd+vtk3D模型-vue框架集成后，
想给我们的项目加一些功能，因为目前考虑的只是展示，
没有需求，所以做一些功能尝试添加，样式以及实现比较简单

实现了点击进行截图下载和选择颜色修改vtk模型颜色的功能，
目前如果要截取多张图片还需要额外的样式处理

效果图

源码

HelloWorld.vue

<template>
	<div>
  	<div class="home" ref="capture" style="padding: 10px; background: #f5da55" @click="jianqie">
			<colorPicker v-model="color" v-on:change="headleChangeColor">colorPicker>
		div>
    <div id="info">div>
		<div id="inset">div>
		
  div>
template>
<script>
import * as THREE from 'three';
import html2canvas from 'html2canvas';
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,
			dirLight: null,
			controls: null,
			nrrdloader: null,
			vtkloader: null,
			renderer2: null, // 渲染器二
			camera2: null, // 相机二
			axes2: null, // 坐标系
			scene2: null, // 场景二
			color: '#90a2b5',
			mesh2: null,
			vtkmaterial: null
    }
  },
  methods: {
    
		headleChangeColor(){
    
			console.log('颜色改变触发')
			console.log(this.vtkmaterial)
			this.mesh2.material.color.set(this.color)
		},
		jianqie(){
    
			console.log(html2canvas)
			// html2canvas(this.$refs.capture).then(canvas => {
    
			// 		this.$refs.capture.appendChild(canvas)
			// });
			document.querySelector('.jietuid>canvas').style.background = '#000'
			html2canvas(document.querySelector('.jietuid>canvas')).then(canvas => {
    
					// document.body.appendChild(canvas)
					this.$refs.capture.appendChild(canvas)
					var imgData = canvas.toDataURL('image/png')
					const link = document.createElement('a')
					link.href = imgData
					link.download = `下载.png` // 下载的文件名
					link.click()
			});
			// let canvas=this.rederer.domElement
			// this.rederer.render(this.scene, this.camera)
			// var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
			// window.location.href= imgUri // 下载图片
		},
    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