DatGui doesn't want to work with Angular/ThreeJS

Question

I try to use DatGui to interact with a cube (from a class called CubeComponent) into my angular App but the only thing created is a part of DatGui saying open control or close control.

Thanks for your attention

import {Component, ViewChild, ElementRef} from '@angular/core';
import * as THREE from 'three';
import { MyCubeComponent } from '../assets/cube/cube.component';
import { Camera } from 'three';
import {GUI} from "dat.gui";
import * as dat from 'dat.gui';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('rendererContainer',{static:false}) rendererContainer: ElementRef;
    public scene: THREE.Scene;
    private camera: THREE.PerspectiveCamera;
    renderer = new THREE.WebGLRenderer();
    gui = null;
    cameraGui = null;
    c = new MyCubeComponent();

    private createScene () {
             this.scene = new THREE.Scene();
              this.scene.add(this.c.mesh)
    }
    private createCamera() {
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        this.camera.position.set( 10, 10, 10);
        this.camera.lookAt( 0, -2, 0);
       }
       public datgui() {
const dat = require('dat.gui');
const gui: GUI = new dat.GUI();
this.cameraGui = this.gui.addFolder("camera position");
this.cameraGui.add(this.camera.position, 'x').min(-40).max(40).step(0.25);
this.cameraGui.add(this.camera.position, 'z').min(-40).max(40).step(0.25);
this.cameraGui.open();
       }
    animate() {
    window.requestAnimationFrame(() => this.animate());
    this.renderer.render(this.scene, this.camera);
    }
    render() {
       this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
       }
    ngAfterViewInit() {
        this.createScene();
        this.createCamera();
        this.createLight();
        this.render();
        this.animate();
        this.datgui();
    }
}

i have some errors in the console saying : null: ERROR null: TypeError: Cannot read property 'addFolder' of null

or sometimes problems with "require" (require("dat gui')) ERROR in src/app/app.component.ts(63,13): error TS2591: Cannot find name 'require'

but i obtain as a result the screen above in my post

https://i.imgur.com/6JiEmCG.jpg – Dumas Théo Jul 25 '19 at 15:48 — Dumas Théo, Jul 25 '19 at 15:48

score 0 · Accepted Answer · answered Jul 25 '19 at 16:28

0

That's because you're calling this.gui.addFolder("camera position"); before you define what this.gui is! You probably mean to use gui.addFolder(), since you just initiated it one line above.

answered Jul 25 '19 at 16:28

M -

26,908
11
49
81

DatGui doesn't want to work with Angular/ThreeJS

1 Answers1