javascript - 将预定义的画布用于渲染器会造成麻烦

发布于 2020-04-09 11:25:06

您好，我正在尝试遵循有关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的新手，如果有人能走过困境我会很高兴。

提问者

Mert Beşiktepe

被浏览

查看英文版

查看原文

javascript - 将预定义的画布用于渲染器会造成麻烦

热门帖子

相关问题

热门github