DatGui 不想使用 Angular/ThreeJS

Question

我尝试使用 DatGui 与立方体（来自一个名为 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：无法读取 null 的属性“addFolder”

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

但我在我的帖子中获得了上面的屏幕

Answer 1

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