“無法設置未定義的屬性 'getStrokeStyle'”對於 Three.js 程序意味着什么？

Question

我正在使用 SVGloader 加載一個 SVG，這樣我就可以將它映射到我的 OBJ 文件中。 但是當給它 url 到 svg 文件時，它會產生一個錯誤

類型錯誤：無法設置未定義的屬性“getStrokeStyle”

我正在使用 Angular 8 並使用 THREE.js 渲染一個 Obj 文件。 我想加載一個 svg 並將其映射到 obj 文件上以將紋理添加到該文件，但正如我上面所說，它產生了一個錯誤，我不知道如何解決它。

這是代碼文件。

         import { Component, AfterViewInit, ViewChild, Input, ElementRef } from '@angular/core';
         import * as THREE from 'three';
         import { OrbitControls } from '@avatsaev/three-orbitcontrols-ts';
         import {OBJLoader} from 'three-obj-mtl-loader';
         import {SVGLoader} from 'three-svg-loader';

         @Component({
          selector: 'app-scene',
          templateUrl: './scene.component.html',
          styleUrls: ['./scene.component.css']
           })
          export class SceneComponent implements AfterViewInit {
            @Input() name: string;
            @ViewChild('canvas', {static:true}) canvasRef: ElementRef;


            renderer = new THREE.WebGLRenderer;
            scene = null;
            camera = null;
            controls = null;
            mesh = null;
            light = null;
            loader;
            svgLoader;
            private calculateAspectRatio(): number {
            const height = this.canvas.clientHeight;
             if (height === 0) {
                return 0;
              }
             return this.canvas.clientWidth / this.canvas.clientHeight;
             }

              private get canvas(): HTMLCanvasElement {
              return this.canvasRef.nativeElement;
             }

  constructor() {
    // this.loader = new OBJLoader();
    this.scene = new THREE.Scene();
    this.loader = new OBJLoader();
    this.svgLoader = new SVGLoader();

    this.camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000)
  }

  ngAfterViewInit() {
    this.configScene();
    this.configCamera();
    this.configRenderer();
    this.configControls();
    this.createLight();
    this.createMesh();
    this.animate();
  }

  configScene() {
    // this.scene.background = new THREE.Color( 0xdddddd );
  }

  configCamera() {
    this.camera.aspect = this.calculateAspectRatio();
    this.camera.updateProjectionMatrix();
      this.camera.position.set( 0, 0, 3 );
      this.camera.lookAt( this.scene.position );
  }

  configRenderer() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true,
      alpha: true
    });
    this.renderer.setPixelRatio(devicePixelRatio);

    // setClearColor for transparent background
    // i.e. scene or canvas background shows through
    this.renderer.setClearColor( 0x000000, 0 );
    this.renderer.setSize((window.innerWidth/2), (window.innerHeight/2));
    window.addEventListener('resize', ()=>{
      this.renderer.setSize((window.innerWidth/2), (window.innerHeight)/2);
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
    })
    console.log('clientWidth', this.canvas.clientWidth);
    console.log('clientHeight', this.canvas.clientHeight);
  }

  configControls() {
    this.controls = new OrbitControls(this.camera);
    this.controls.autoRotate = false;
    this.controls.enableZoom = false;
    // this.controls.maxDistance = 5;
    // this.controls.minDistance = 10;
    this.controls.enablePan = false;
    this.controls.update();
  }


  createLight() {
    this.light = new THREE.PointLight( 0xffffff );
      this.light.position.set( -10, 10, 10 );
      this.scene.add( this.light );
  }
  createMesh() {
        this.svgLoader.load('../../../../assets/abc.svg')
        console.log("SVG Loader", this.svgLoader)

        this.loader.load('../../../../assets/nonunified.obj', (object)=>{
            object.traverse( function ( child ) {

              if ( child instanceof THREE.Mesh ) {
                  child.geometry.center();
              }
            } );

            this.scene.add(object)
          },
            // called when loading is in progresses
            function (xhr) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

          },
        // called when loading has errors
            function ( error ) {
            console.log( 'An error happened' );

          }
        )}

  animate() {
    window.requestAnimationFrame(() => this.animate());
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
  }

}

Answer 1

SVGLoader不是用於加載 svg 文件以用作紋理，而是用於將它們加載為幾何圖形： https : SVGLoader

如果你想使用 svg 文件作為紋理，你應該能夠像這樣使用TextureLoader ：

obj.material.map = new TextureLoader().load('../../../../assets/abc.svg');

我不確定您是否真的需要先將其柵格化到畫布上，如果上述方法不起作用，請嘗試此處描述的內容： 如何在 Three.js 中加載和顯示 SVG 圖形？