Three.js 未在现有画布上渲染

Question

我创建了一个 ID 为“canvas”的画布，并将其作为参数提供给 Three.js 的 WebGLRenderer。然而，画布上什么也没有显示。如果我将 domElement 附加到文档中，画布将显示在底部，但我想在现有的画布上绘图。我需要更改额外的设置吗？

我使用这个示例代码开始：

  ctx = $('canvas').getContext('2d');
  var canvasElm = $('canvas');
  canvasWidth = parseInt(canvasElm.width);
  canvasHeight = parseInt(canvasElm.height);
  canvasTop = parseInt(canvasElm.style.top);
  canvasLeft = parseInt(canvasElm.style.left);

  var scene = new THREE.Scene(); // Create a Three.js scene object.
  var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 0.1, 1000); // Define the perspective camera's attributes.

  var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer(canvasElm) : new THREE.CanvasRenderer(); // Fallback to canvas renderer, if necessary.
  renderer.setSize(canvasWidth, canvasHeight); // Set the size of the WebGL viewport.
  //document.body.appendChild(renderer.domElement); // Append the WebGL viewport to the DOM.

  var geometry = new THREE.CubeGeometry(20, 20, 20); // Create a 20 by 20 by 20 cube.
  var material = new THREE.MeshBasicMaterial({ color: 0x0000FF }); // Skin the cube with 100% blue.
  var cube = new THREE.Mesh(geometry, material); // Create a mesh based on the specified geometry (cube) and material (blue skin).
  scene.add(cube); // Add the cube at (0, 0, 0).

  camera.position.z = 50; // Move the camera away from the origin, down the positive z-axis.

  var render = function () {
   cube.rotation.x += 0.01; // Rotate the sphere by a small amount about the x- and y-axes.
   cube.rotation.y += 0.01;

   renderer.render(scene, camera); // Each time we change the position of the cube object, we must re-render it.
   requestAnimationFrame(render); // Call the render() function up to 60 times per second (i.e., up to 60 animation frames per second).
  };

  render(); // Start the rendering of the animation frames.

我正在使用 Chrome 56.0.2924.87（64 位），如果有帮助的话。

Answer 1

你的jquery选择器是错误的（我假设它是jquery）。
var canvasElm = $('canvas');创建一个新的画布元素。
如果你想选择一个id为“canvas”的画布，请使用..
var canvasElm = $('#canvas');
但这会获取一个jquery对象/列表，因此要获取实际的画布（列表中的第一项），你可以使用..
var canvasElm = $('#canvas')[0];

例如。

var canvasElm = $('#canvas')[0];
renderer = new THREE.WebGLRenderer( { canvas: canvasElm } );

你可能会更好只使用js而不使用jquery。
例如。

canvasElm = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer( { canvas: canvasElm } );