Load 3d Model in Angular 16.0

Questions
, ,
1

Hi there , I am new with Three js, I want load 3d model in angular 16.0 with three js , but to do this stuff i suffering many problems.

  1. I cannot load the .gltf format model With GLTFLoader If you could please help me.
  2. After While I load a 3d model of .glb format with GLTFLoader but but the object just like Straight stick , i cannot move and zoom it.

Now, please help me with those information , if you help with no. 1 problem I will benefit more. thanks buddy.

This Is my model-viewer.component.ts of angular component:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

@Component({
  selector: 'app-model-viewer',
  templateUrl: './model-viewer.component.html',
  styleUrls: ['./model-viewer.component.css']
})
export class ModelViewerComponent implements AfterViewInit {
  @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
  public scene!: THREE.Scene;
  public camera!: THREE.PerspectiveCamera;
  public renderer!: any;
  public controls!: OrbitControls;
  public loader: GLTFLoader;

  // public camera
  constructor() {
    this.loader = new GLTFLoader()

  }

  ngAfterViewInit(): void {
    this.initThree();
  }

  initThree() {
    // Initialize scene
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xffffff)

    // Initialize camera
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.set(- 1.8, 0.6, 2.7);

    // Initialize renderer
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);

    // Initialize OrbitControls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.addEventListener('change', () => {
      this.renderer.render(this.scene, this.camera);
    });
    this.controls.enableZoom = true
    this.controls.update();


    // Load 3D model
    this.loader.load('../../../assets/gltf/new/ss.glb', (gltf) => {
      const model = gltf.scene;
      model.position.set(0, 1, 0);
      this.scene.add(model);

      // Add ambient light
      const ambientLight = new THREE.AmbientLight(0xffffff);
      this.scene.add(ambientLight);

      // Start the animation loop
      const animate = () => {
        requestAnimationFrame(animate);
        this.controls.update();
        this.renderer.render(this.scene, this.camera);
        console.log("running");
      };
      animate();

    }, undefined, (error) => {
      console.error('Error loading GLTF:', error);
    });
  }


}

and This is the package.json


{
  "name": "001-p04-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.3",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^16.2.0",
    "@angular/material": "^16.2.3",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "angular-stl-model-viewer": "^8.0.0",
    "angular-three": "^1.10.7",
    "apexcharts": "^3.42.0",
    "chart.js": "^4.4.0",
    "moment": "^2.29.4",
    "ng-apexcharts": "^1.8.0",
    "ng-zorro-antd": "^16.1.0",
    "ng2-charts": "^5.0.3",
    "ngx-clipboard": "^16.0.0",
    "ngx-three": "^0.28.0",
    "rxjs": "~7.8.0",
    "three": "~0.151.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "@types/three": "^0.156.0",
    "autoprefixer": "^10.4.15",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3",
    "typescript": "~5.1.3"
  }
}
2

that imo is not a valid path. you can’t url fetch from anywhere inside src nor outside of it except /public. you can import a url via url-loader, or use “/gltf/new/ss.glb” given that /public/gltf/new/ss.glb exists.

btw there is also an angular layer available for threejs Angular Three · GitHub this would certainly make it easier to integrate threejs.

3

I think its not related to url fetching problem bz the model show but like a picture , i cannot move and zoom it. Could you help me with three.js for now.

4

i see some strange things, like you double render, controls.onChange and your raf loop, not that that would cause it. it would probably be best if you have a running live environment. for instance a codesandbox.