Question

我尝试使用DatGui与多维数据集（来自称为CubeComponent的类）交互到我的角度App中，但创建的唯一内容是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：错误 null：TypeError：无法读取null的属性“ addFolder”

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

但是我得到的是上面帖子中的屏幕

Answer 1

那是因为在定义this.gui.addFolder("camera position");是什么之前，您正在呼叫this.gui！您可能打算使用gui.addFolder()，因为您只是在上方一行启动了它。

DatGui不想使用Angular / ThreeJS

1 个答案: