How to apply SVG texture on OBJ file in Three.js

Question

I'm using Threejs for a project of mine, i render an Object file using OBJ loader and it displays the object on the screen. But I don't know how to map a SVG image to that object how to apply texture on that object file. please help me this is my current code. I'm new to this platform and don't know much about THREE.js i've seen some examples but it didn't worked out for me. One person on my recent post told me how to apply material on the object but it didn't worked for me.

When i apply material i got this error. ERROR TypeError: Cannot set property 'map' of undefined

Here is my complete code file.

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 { TextureLoader } from 'three';



@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.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() {
      const url ='../../../../assets/abc.svg';


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

            object.traverse( function ( child ) {
              if ( child instanceof THREE.Mesh ) {
                  child.geometry.center();
              }
            } );
            object.material.map = new TextureLoader().load(url)
            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

You have not created a material. If you do console.log(object.material); it will show undefined. You first need to create a material. Please check the threejs doc for different materials that can be used. For this example I am using MeshPhongMaterial. So your createMesh function will look like this.

createMesh() {
        const url = '../../../../assets/abc.svg';

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

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

            const material = new THREE.MeshPhongMaterial({
                map: new TextureLoader().load(url)
            });

            object.material = material;

            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');

            }
        )
    }

This should work.