Error while loading stl file on click event

Questions
1

Hello,
i am loading .stl file directly ,it work fine.
but i want load that stl file on button click event ,i wrote code but it give error on console given below
image

And my code is :

var button = document.getElementById("btn_img");
button.addEventListener('click',function (){
   decorative_frame();
});


var loader = new THREE.STLLoader();
function decorative_frame(){
	loader.load( "deco_frame.stl",function(geometry1) {
		geometry = new THREE.Geometry().fromBufferGeometry( geometry1 );
		var mesh1 = new THREE.Mesh(geometry);
		mesh1.name = 'deco_frame';
		var boundingBox = new THREE.Box3().setFromObject(mesh1);
		var distance = boundingBox.min.distanceTo(boundingBox.max);
		var center = boundingBox.getCenter();
		camera.position.x = 0;
		camera.position.y = 0;
		camera.position.z = center.z + distance/0.8;
		camera.lookAt(center);
		cameraTarget = center;
		mesh1.position.set(-10, -10, 0);
		scene.add(mesh1);
	});
}

How do I solve it?

2

Please demonstrate the issue with a live example.

3

Hi,
Actually i am working on product configurator for that i need to show different decorative photo frame on button click. All those frame files are .stl files.

Below image will explain it more:
image

I am currently using the code which i already share to you
But i am not able to insert frame on button click event instead it throws an error(already share image of that). I have search details of that error but not able to resolve that.
Can you share any alternate code for inserting stl files on button/image click event

4

What bothers me is the error message: decorative_frame is not defined.

You posted code looks correct but for some reason the function call inside the event listener fails. That’s why I’ve asked for a live example. Some debugging would it make much easier to find the problem.