3d button with css animation

Questions
,
1

Hello, I am working on a magazine project so , i have a wavy plane with magazine Texture and I want to put a button on the top of the magazine with a few css animations, how can I combine it with threejs, that may be good start for the button i want (hold to publish)https://codepen.io/aaroniker/details/WNNWQbM, i try to add html button on top of my canvas but that not work , how i can make it more combined

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
3

Oh ya, that one thank you so much , you saved my day !