How to link multiple 3D object with buttons in three.js?

Questions
,
1

I’m trying to put 2 object deer.obj and wolf.obj into scene. But my error was genearate when i’m trying to create a button after loaded an object. It called :
THREE.Object3D.add: object not an instance of THREE.Object3D. models/deer.obj
Here is my code :

var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
		camera.position.set(0, 0, 75);
		var renderer = new THREE.WebGLRenderer({
			antialias: true
		});
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		var contorls = new THREE.OrbitControls(camera, renderer.domElement);
		var light = new THREE.AmbientLight(0xffffff);
		scene.add(light);
		var sceneObjects = [];
		for (var i= 0; i < 10 ; i++){
			createObject(i);
		}
		function createObject(count) {
			var name = "";
			var geometry;

			if (Math.random() > 0.5) {
				name = "sphere";
				geometry = new THREE.SphereGeometry(1, 16, 8);
			} else {
				name = "box";
				geometry = new THREE.BoxGeometry(2, 2, 2);
			}
			name = name + count;
			var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
				color: Math.random() * 0xffffff,
				wireframe: true
			}));
			mesh.name = name;
			mesh.position.set(Math.random() - .5, Math.random() - .5, Math.random() - .5).multiplyScalar(50);
			sceneObjects.push(mesh);
			console.log(sceneObjects.length);
  var mnuItem = document.createElement("button");
  mnuItem.name = name;
  mnuItem.innerHTML = name;
  mnuItem.addEventListener("click", onClick);
  rightMenu.appendChild(mnuItem);

can you guys have any solutions?

2

Do you mind demonstrating the issue with a live example? https://jsfiddle.net/f2Lommf5/

I’m afraid your code snippet is not sufficient to investigate your problem.