Answer the question
In order to leave comments, you need to log in
How to animate mesh opacity in three js + GSAP?
Actually a piece of code, I create in a cycle a large number of white minispheres with opacity: 1.0. How can I work with opacity and their other properties through gsap? At the bottom of the code there is a twin for a simple group rotation, it works. But with plane objects, no.
let R = 605;
let planes = [];
points.forEach(p => {
THREE.P
let pos = calcPosFromLatLonRad(p.lat,p.long,R);
let geometry = new THREE.SphereGeometry(2.5, 12.25,12.25 );
let material = new THREE.MeshBasicMaterial( {
color: 0xffffff,
side: THREE.DoubleSide,
opacity: 0.1
// wireframe: true
} );
let material1 = new THREE.RawShaderMaterial( {
uniforms: {
time: {value: 0},
hover: {value: 0}
},
transparent: true,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
} );
let plane = new THREE.Mesh(geometry,material);
plane.position.x = pos[0];
plane.position.y = pos[1];
plane.position.z = pos[2];
group.add(plane);
planes.push(plane);
})
TweenMax.to(group.rotation,8,{x:Math.PI*2,ease:Power2.easeInOut,delay:5.01,repeat:-1});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question