Angular中vtk.js渲染STL模型全黑，如何添加颜色？

你的问题其实是因为vtk.js默认的Actor材质属性和场景光照配置没有针对无颜色的STL模型做优化，导致模型看起来全黑。STL确实不含颜色信息，但我们可以通过手动配置Actor的Property属性和确保场景光照正常来让模型显示为清晰的白色。

具体修改方案 #

我会针对你的代码做两处关键调整，同时优化一些潜在的性能问题：

1. 给Actor配置合适的材质与光照属性：通过Actor的getProperty()方法设置漫反射颜色、环境光、高光等参数，让模型能反射光线，显示出细节。
2. 避免重复创建FullScreenRenderWindow：你的update函数每次都会新建渲染窗口，这会导致资源浪费，我们把渲染窗口的初始化移到外部，只创建一次。

修改后的完整代码 #

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';

ngOnInit(): void {
  const reader = vtkSTLReader.newInstance();
  const mapper = vtkMapper.newInstance({ scalarVisibility: false });
  const actor = vtkActor.newInstance();
  
  // --- 新增：配置Actor的材质属性，解决发黑问题 ---
  const actorProperty = actor.getProperty();
  actorProperty.setDiffuseColor(1, 1, 1); // 设置漫反射颜色为白色
  actorProperty.setAmbient(0.2); // 增加环境光，避免阴影处全黑
  actorProperty.setSpecular(0.3); // 开启高光，增强细节感
  actorProperty.setSpecularPower(20); // 调整高光强度
  
  actor.setMapper(mapper);
  mapper.setInputConnection(reader.getOutputPort());

  // --- 优化：只创建一次全屏渲染窗口 ---
  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
  const renderer = fullScreenRenderer.getRenderer();
  const renderWindow = fullScreenRenderer.getRenderWindow();
  renderer.addActor(actor);

  function update() {
    renderer.resetCamera(); // 重置相机适配模型大小
    renderWindow.render(); // 渲染场景
  }

  const myContainer = document.querySelector('body');
  const fileContainer = document.createElement('div');
  fileContainer.innerHTML = '<input type="file" class="file"/>';
  myContainer.appendChild(fileContainer);
  const fileInput = fileContainer.querySelector('input');

  function handleFile(event) {
    event.preventDefault();
    const dataTransfer = event.dataTransfer;
    const files = event.target.files || dataTransfer.files;
    if (files.length === 1) {
      myContainer.removeChild(fileContainer);
      const fileReader = new FileReader();
      fileReader.onload = function onLoad(e) {
        reader.parseAsArrayBuffer(fileReader.result);
        update();
      };
      fileReader.readAsArrayBuffer(files[0]);
    }
  }

  fileInput.addEventListener('change', handleFile);
  reader.setUrl("./assets/test2.stl", { binary: true }).then(update);
}

关键修改点解释 #

• 材质属性配置：
  • setDiffuseColor(1,1,1)：设置模型的基础漫反射颜色为白色，这是模型显示白色的核心。
  • setAmbient(0.2)：添加少量环境光，让模型的阴影区域不会完全变黑，保留细节。
  • setSpecular和setSpecularPower：开启高光效果，让模型的凸起部分有反光，增强3D立体感。
• 渲染窗口优化：把渲染窗口的初始化移到update函数外，避免每次加载模型都重复创建渲染资源，提升性能的同时也避免潜在的渲染冲突。

这样修改后，你的STL模型就会显示为清晰的白色，并且能通过光照反射出3D细节，不会再出现全黑的情况。

内容的提问来源于stack exchange，提问作者YSFKBDY