Create menu in a scene through three js

Good afternoon. I have a doubt. How can I insert a menu in a scene rendered on canvas by three.js? Ex: A color menu made in a table by the html table tag that will have an identifier, which will be introduced in three.js. Below you can see the code.

<table cellspacing="1" cellpadding="15" width="100" id="menuCor">
            <tr>
                <tr>
                    <th colspan="12">Cores</th>
            </tr>
                <td bgcolor="#FF0000" id="vermelho"  title="Vermelho"></td>
                <td bgcolor="##00a000" id="verde" title="Verde"></td>
                <td bgcolor="#0000FF" id="azul" title="Azul"></td>
                <td bgcolor="#FFFF00" id="amarelo" title="Amarelo"></td>
                <td bgcolor="#CCEEFF" id="azulCeu" title="Azul Céu"></td>
                <td bgcolor="#FFA500" id="laranja" title="Laranja"></td>
                <td bgcolor="#FFC0CB" id="pink" title="Pink"></td>
                <td bgcolor="#1C1C1C" id="preto" title="Preto"></td>
                <td bgcolor="#8B4513" id="marrom" title="Marrom"></td>
                <td bgcolor="#EE82EE" id="violeta" title="Violeta"></td>
                <td bgcolor="#F5F5F5" id="branco" title="Branco"></td>
                <td bgcolor="#836FFF" id="lilas" title="Lilás"></td>
            </tr>
        </table>
<canvas id="projeto" class="margem"></canvas>
    <script type="text/javascript">
        var renderer;
        var camera;
        var scene;
        var light;
        var loader;
        var menu;
        var gui;
        // Foi criada o objeto que gerará o recurso da webgl,que nesse caso é o canvas junto com o three.js
        renderer = new THREE.WebGLRenderer({canvas:document.getElementById("projeto"),antialias:true});
        renderer.setClearColor(0x0FFFF);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth = 800, window.innerHeight = 700);
        document.body.appendChild(renderer.domElement);
        //A câmera é criada e acionada.
        camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.z =  7;
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target = new THREE.Vector3(0, 0.1, 0);
        //É criada  a cena. Tudo fica na cena.Logo, ela é a principal parte.
        scene = new THREE.Scene();
        light = new THREE.AmbientLight(0xffffff,0.5);
        scene.add(light);
        //Criando o plano de fundo do cenário.
        var texture = new THREE.TextureLoader().load( "imagens/sky.jpg" );
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        scene.background = texture;
        //A imagem é adicionada e carregada.
        loader = new THREE.JSONLoader();    
        loader.load("monkey.json",handle_load); 

        //A função render chama tudo que foi adicionado na cena.
        render();

        function render(){

            renderer.render(scene,camera);
            requestAnimationFrame(render);
            handle_load(geometry,materials);
        }

        function handle_load(geometry,materials){
            var material = new THREE.MeshNormalMaterial();
            var mesh = new THREE.Mesh(geometry,materials);
            scene.add(mesh);
        } 
    </script>