如果我使用我的 Threejs 空白画布答案

【问题标题】：Threejs blank canvas if I use mine如果我使用我的 Threejs 空白画布
【发布时间】：2021-11-04 01:51:01
【问题描述】：

我目前正在尝试使用三地球仪来显示地球仪。在我尝试使用自己的画布之前，一切正常。似乎当我使用自己的画布并且画布在我的 html 树中的 javascript 文件之前，它无法正确显示并且我有一个空白画布。这是初始化画布的代码：

    renderer = new THREE.WebGLRenderer({ antialias: true, canvas: myCanvas });
    renderer.setSize(width, height);
    console.log(renderer.domElement)

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera();
    camera.aspect = width/height;
    camera.updateProjectionMatrix();

    scene.add(new THREE.AmbientLight(0xbbbbbb));
    scene.add(new THREE.DirectionalLight(0xffffff, 0.6));

    camera.position.z = 300;
    camera.position.x = 0;
    camera.position.y = 0;

    scene.add(camera);

    scene.fog = new THREE.Fog(0x545ef3, 400, 2000);

    // Add camera controls
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.minDistance = 101;
    controls.rotateSpeed = 1;
    controls.zoomSpeed = 0.3;

    window.addEventListener("resize", onWindowResize, false);
    window.addEventListener('click', onClick, false); 
    //document.body.appendChild(renderer.domElement);

如果我评论最后一行，画布会出现在树中，但它是空白的。如果我取消注释它会出现在正文的末尾，并且它是一个黑色画布（这里是预期的）。有人可以知道为什么会这样吗？

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

通常可以通过三种方式在画布上下文中创建渲染器。

没有canvas 参数意味着渲染器将创建一个内部画布。它可以通过WebGLRenderer.domElement 访问，并且需要分配给DOM，通常通过document.body.appendChild(renderer.domElement);。
你可能已经在你的 DOM 中有一个画布，并通过例如在 JS 中查询它。 document.getElementById( 'myCanvas' );。在这种情况下，您必须像示例代码中一样将其应用于 ctor。
第三个选项是您通过例如创建一个内联画布。 createElementNS( 'canvas' )。在这种情况下，您必须在创建渲染器时应用它，还要将其附加到 DOM。

根据您的描述，您使用的是选项 2。在这种情况下，document.body.appendChild(renderer.domElement); 行是不必要的，因为画布已经是 DOM 的一部分。

我建议您在 DOM 准备就绪时执行您的代码。为DOMContentLoaded 事件添加一个事件监听器并在那里执行你的three.js 代码。

【讨论】：