Dat Gui 不想和 Angular/ThreeJS 一起工作

Question

我尝试使用 DatGui 与多维数据集（来自 class 称为 CubeComponent）交互到我的 angular 应用程序中，但唯一创建的是 DatGui 的一部分，表示打开控制或关闭控制.

感谢您的关注

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();
    }
}

我在控制台中有一些错误说：空：错误 null: TypeError: 无法读取属性 'addFolder' of null

或 "require" 有时会出现问题（需要（“dat gui”）） src/app/app.component.ts(63,13) 中的错误：错误 TS2591：找不到名称 'require'

但我在 post

中得到了上面的屏幕

Answer 1

那是因为您在定义 this.gui 之前调用了 this.gui.addFolder("camera position");！您可能打算使用 gui.addFolder()，因为您刚刚在上面的一行中启动了它。

Dat Gui 不想和 Angular/ThreeJS 一起工作

DatGui doesn't want to work with Angular/ThreeJS

javascript

three.js

dat.gui

angular