我尝试使用 DatGui 与立方体(来自名为 CubeComponent 的类)交互到我的 angular 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:ERROR null:TypeError:无法读取 null 的属性“addFolder”
或者有时“require”问题(require(“dat gui'))src/app/app.component.ts(63,13)中的错误:错误TS2591:找不到名称'require'
但我在我的帖子中获得了上面的屏幕
那是因为你在this.gui.addFolder("camera position");
定义什么之前就调用了this.gui
!您可能想使用gui.addFolder()
,因为您刚刚在上面的一行启动了它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句