三个 js 抛出 _canvas is null 错误答案

【问题标题】：three js is throwing _canvas is null error三个 js 抛出 _canvas is null 错误
【发布时间】：2021-09-09 15:55:49
【问题描述】：

我的网站有一些通过three.js 的JS 代码。我希望两个画布使用单独的 CSS 命令（一个是 {position:relative} ；另一个是 {position:fixed} ）用于不同的选项卡。但它抛出了那个错误。为什么？请帮帮我。

HTML 代码；

  <canvas id="c1"></canvas>
  <canvas id="c2"></canvas>

JS 代码； c1>

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 30;
// camera.position.x = -15;

const canvas = document.querySelector('#c1');
const renderer = new THREE.WebGLRenderer({canvas, alpha: true});

renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize( width, height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix();
 })

//c2的代码与c1相同。

CSS;

#c1{ 
 width: 100%;
 height: 100vh;
 position:relative;
 z-index:1;
 }  //same c2

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

看起来你的画布绑定不正确——如果你试试这个应该可以工作：

    // Setup renderer
    let renderer = this.renderer = new WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = sRGBEncoding;
    this.canvasRef.nativeElement.appendChild(renderer.domElement);

    // Setup scene
    let scene = this.scene = new Scene();

    // Setup camera
    let camera = this.camera = new PerspectiveCamera();
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

注意：您需要根据导入三个函数的方式为大多数这些函数添加前缀。

【讨论】：

它不起作用。实际上，我的代码在第一个视图页面中工作了我想要的，但是如果我点击分配的画布页面，它会在 2 秒后抛出“_canvas 为空”错误
总之，我想用 css position 命令管理每个画布。
当您尝试切换“标签”时会抛出错误吗？

【解决方案2】：

哦，好的。我解决了。

css页面中不需要canvas命令。我刚刚添加了这些命令...

renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = 0;
renderer.domElement.style.zIndex = '1';

【讨论】：