<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2869a809797b284c2dcc3c4c0dcc2">[email protected]</a>/build/three.module.js",
"three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d7cbd1c6c6e3d5938d9295918d93">[email protected]</a>/examples/jsm/"
}
}
</script>
<script type="module" style="position: absolute; z-index: 100;">
import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13676476767d3d79605321203d223d22">[email protected]</a>/dist/tween.esm.js';
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
color: "red",
transparent: true
}));
scene.add(cube);
window.onload=function(){
var el_my_button = document.getElementById("my_button");
el_my_button.addEventListener("click", function(event) {
var tweenoff = new TWEEN.Tween(cube.material).to({
opacity: 0
}, 2000).onComplete(function(){
cube.visible = false;
});
console.log( tweenoff );
tweenoff.start();
});
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
<div id="my_button" style="background: #ccc; width:100; height: 50px; margin-top:50px; position: absolute; z-index: 101;">
my_button
</div>
Opacity of cube seems to be static and not changing upon click. No errors reported, but the TWEEN effect is not visible when clicking on the "my_button" element.
What could be causing this issue? Possibly incorrect import of tween.js library or compatibility issues with the three.js version? Seeking any assistance in resolving this matter.