时间戳

首页 > 解决方案 > 如果我使用我的 Threejs 空白画布

javascript - 如果我使用我的 Threejs 空白画布

问题描述

我目前正在尝试使用三地球仪显示地球仪。在我尝试使用自己的画布之前，一切正常。似乎当我使用自己的画布并且画布在我的 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);

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

标签： javascriptcanvasthree.js

解决方案

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

  1. 没有canvas参数意味着渲染器将创建一个内部画布。它可以通过 DOM 访问WebGLRenderer.domElement并需要分配给 DOM，通常通过document.body.appendChild(renderer.domElement);.

  2. 您可能已经在 DOM 中有一个画布，并通过 JS 在 JS 中查询它document.getElementById( 'myCanvas' );。在这种情况下，您必须像示例代码中一样将其应用于 ctor。

  3. 第三个选项是您通过 eg 创建一个内联画布createElementNS( 'canvas' )。在这种情况下，您必须在创建渲染器时应用它，还要将它附加到 DOM。

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

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

推荐阅读