I have set up a canvas with the ID of 'canvas' and passed it as an argument to the WebGLRenderer in Three.js. However, I am not seeing anything displayed on that canvas. When I append the domElement to the document, the canvas appears at the bottom, but I want to draw on my existing canvas instead. Do I need to adjust any additional settings?
Here is the code snippet I am starting with:
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();
var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 0.1, 1000);
var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer(canvasElm) : new THREE.CanvasRenderer();
renderer.setSize(canvasWidth, canvasHeight);
var geometry = new THREE.CubeGeometry(20, 20, 20);
var material = new THREE.MeshBasicMaterial({ color: 0x0000FF });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 50;
var render = function () {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
I am using Chrome version 56.0.2924.87 (64-bit) for reference.