I have created a render object in three.js and connect it with DomElment, shown as followed

var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
renderer.setClearColor( 0xAAAAAA, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl-container').appendChild(renderer.domElement);

so now three.js automatically create a canvas inside the webgl-container div, but now I want to give a canvas a id, how could I do it

I have created a render object in three.js and connect it with DomElment, shown as followed

var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
renderer.setClearColor( 0xAAAAAA, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl-container').appendChild(renderer.domElement);

so now three.js automatically create a canvas inside the webgl-container div, but now I want to give a canvas a id, how could I do it

• javascript
• three.js
• html5-canvas

2 Answers 2

Have you tried :

renderer.domElement.id = 'YourIDName';

A current approach that works well is to pass your canvas ID to the renderer when you create it:

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