<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384c504a5d5d784e0816090e0a1608">[email protected]</a>/build/three.module.js",
"three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccb8a4bea9a98cbafce2fdfafee2fc">[email protected]</a>/examples/jsm/"
}
}
</script>
<script type="module">
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;
camera.position.x = -5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
material.opacity = 0.2;
material.transparent = true;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Above code is functioning properly and the opacity of the cube is changing. However, if I move the material updating into a setTimeout function, like so:
// material.opacity = 0.2;
// material.transparent = true;
var tmout = function() {
material.opacity = 0.2;
material.transparent = true;
}
setTimeout(tmout, 1000 );
Then the opacity is not changing. I'm wondering why the material is not changing inside setTimeout? What could possibly be incorrect here?