3d button with css animation

Questions
,
2

Is this what you want to do?:
http://threeml.org/ex/magazine/
I am using an intermediate lib here that handles meta language tags, but the code that implements the button is in the handleHtmlPlaneGeometry() function in threeml.js.
You just add a div containing the button html to the css3dObject:

		var holder = new THREE.Group();
                    .........

		const div = document.createElement('div');
                    .........


		const obj = new CSS3DObject(div);
		holder.add(obj);
		//add transparantplane
		var geometry = new THREE.PlaneGeometry(1.53*wf,0.92*hf);
		var material = new THREE.MeshBasicMaterial();
		material.color.set('black'); //red
		material.opacity = 0;
		material.blending = THREE.NoBlending;
		material.side = THREE.DoubleSide;
		var p = new THREE.Mesh(geometry, material);

		holder.add(p);

Furthermore it is important to set style of the container of the canvas:

<style>
	#container {
		pointer-events: none;
	}
</style>
2 Likes