Question

您好，我正在尝试遵循有关three.js的教程，并且在使用预定义的canvas元素进行渲染时遇到了麻烦。如果我让three.js创建渲染器DOM元素，则一切正常。但是使用getElementById获取画布并将其发送到WebGLRenderer构造函数使其仅输出；

THREE.WebGLRenderer：不支持WEBGL_draw_buffers扩展。

这是 工作代码1 ；

<!DOCTYPE: html>
<html>

<head>
  <script src="https://threejs.org/build/three.js"></script>
</head>

<body>
  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    var animate = function() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  </script>
</body>

</html>

和 工作代码2 ；

<!DOCTYPE: html>
<html>

<head>
  <script src="https://threejs.org/build/three.js"></script>
</head>

<body>
  <canvas id="render_canv_1"></canvas>

  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer({
      canvas : render_canv_1 
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    var animate = function() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  </script>

</body>

</html>

还有我天真的 暂时不显示任何内容的 ；

<!DOCTYPE: html>
<html>

<head>
  <script src="https://threejs.org/build/three.js"></script>
</head>

<body>
  <canvas id="render_canv_1"></canvas>

  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // THIS IS WHERE I STUCK...
    // get canvas object
    const canv = document.querySelector('render_canv_1')
    var renderer = new THREE.WebGLRenderer({
      canv
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    //

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    var animate = function() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  </script>

</body>

</html>

我对JS还是很陌生，如果有人能走过困境我会很高兴。

Answer 1

您的第三个示例具有：

var renderer = new THREE.WebGLRenderer( { canv } );

应为：

var renderer = new THREE.WebGLRenderer( { canvas: canv } );

您可以通过查看WebGLRenderer class的来源来了解正在发生的情况。

编辑：
我也只是注意到您的选择器有误。
const canv = document.querySelector('render_canv_1')无法正常工作。
尝试使用const canv = document.getElementById('render_canv_1');

Answer 2

这些行

    const canv = document.querySelector('render_canv_1')
    var renderer = new THREE.WebGLRenderer({
      canv
    });

应该是这个

    const canv = document.querySelector('#render_canv_1')
    var renderer = new THREE.WebGLRenderer({
      canvas: canv,
    });

一个id选择器需要在前面放置一个#，并且呈现的选项称为canvas而不是canv

将预定义的画布用于渲染器会带来麻烦

2 个答案: