angular-stl-model-viewer 不更新纹理答案

【问题标题】：angular-stl-model-viewer not updating Texturesangular-stl-model-viewer 不更新纹理
【发布时间】：2023-03-04 14:27:01
【问题描述】：

我目前正在尝试设置一个基本的 .stl 查看器，可以预览模型本身的不同材料。我有 Angular 9 作为框架，整个 .stl 显示部分工作得非常好和容易。当我尝试更新材质时，它根本没有更新它，而是显示了我认为的非常奇怪的基本材质。就像标题中提到的那样，我目前正在使用基于 Three.js 的 GitHub 项目，可以在这里找到：https://github.com/tevim/angular-stl-model-viewer

就像在三个文档中提到的那样，我尝试设置 material.needsUpdate 和 texture.needsUpdate 标志，两者都没有任何效果。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MeshOptions } from 'angular-stl-model-viewer';
import * as THREE from 'three';
import { Vector3, MeshBasicMaterial, TextureLoader, Texture } from 'three';
import { Subscribable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  meshOptions: MeshOptions = {
    scale: new Vector3(0.01, 0.01, 0.01),
  };

  material: MeshBasicMaterial;

  constructor() {
    THREE.Object3D.DefaultUp = new Vector3(0, 0, 1);
  }

  ngOnInit(): void {
    let texture = new TextureLoader().load(
      './assets/textures/prusa_pla_galaxy_black.jpg'
    );

    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;

    console.log(texture);

    this.material = new MeshBasicMaterial({
      map: texture,
    });

    this.material.needsUpdate = true;
  }
}

app.component.html

<stl-model-viewer [meshOptions]="meshOptions"
                  [material]="material"
                  stlModel="./assets/test/test2.stl" 
                  #stlViewer></stl-model-viewer>

app.component.scss

stl-model-viewer {
    display: block;
    height: 500px;
    width: 500px;
}

【问题讨论】：

标签： angular three.js

【解决方案1】：

STL 文件格式不支持纹理坐标。如果没有这些数据，就无法将纹理应用到您的网格。

【讨论】：