1. 首页
  2. three.js

three.js角度|设置自定义画布

three.jsn您好,n首先,我对ThreeJS非常陌生。n我正在按照这家伙18的教程来理解基本知识。n问题是他使用document.body.appendChild(这是我的)“这会创建一个画布,我不能用我的组件的CSS修改。n所以我要做的是在我的组件的HTML中创建我自己的画布,然后使用此画布作为主画布。n但我正在努力做到这一点,因此任何帮助都将非常好。nComponent.html:nnComponent.css :n#myCanvas {width: 100vw;height: 100vh;display: block; }n组件技术:n export class Scene3dComponent implements = new THREE.WebGLRenderer({canvas: this.canvas, antialias: true})constructor() { }ngAfterViewInit(){this.startScene();}startScene() {this.renderer.setClearColor(\”#E5E5E5\”)this.renderer.setSize(window.innerWidth, window.innerHeight)this.renderer.render(this.scene,>nThe error I\”m getting is \”TypeError: Cannot read property \”nativeElement\” of undefined\”nfor all people with this issue, I solved it by setting appendChild on the afterViewInit hook of angular and using the Renderer2 angular service on the constructor.nconstructor(private ngRenderer:Renderer2){ }nngAfterViewInit(){this.ngRenderer.appendChild(this.myRenderer.nativeElement,this.renderer.domElement)}n Angular | Setting up a custom canvasn

three.js角度|设置自定义画布 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e8%a7%92%e5%ba%a6%e8%ae%be%e7%bd%ae%e8%87%aa%e5%ae%9a%e4%b9%89%e7%94%bb%e5%b8%83/