Vehin VElat Eker

Thank you very much for your answer, although not exactly, the questions in my mind were answered. My last question can I add points per pixel on the y-axis?

Let me explain my problem again for you. When the scroll event starts, I want dots to be added to my mask. I tried something on line 101 but it only adds one to my mask. You can check it. The addPoints function is located on line 77 (all in scripts.js)

Sorry for problems, https://codesandbox.io/s/empty-microservice-utb6h there is.

I create as a Project on the Codepen i think thats why. https://codepen.io/savataqe/project/editor/ArJPmM

hello, i am trying to learn new gsap. I wanted to adapt the project I had done before, but I could not succeed, can you help? I want it to add point animation from section 1 to section 4(I have addpoint function on my scripts.js file). without gsap version vehin.dev/pandemic .(sorry for codepen it doesnt accept obj file) my gsap code on codepen link. Best regards function addModelToBG() { //Variables for setup let container; let camera; let renderer; let scene; let box; function init() { container = document.querySelector(".scene.one"); //Create scene scene = new THREE.Scene(); const fov = 35; const aspect = container.clientWidth/container.clientHeight; const near = 0.9; const far = 1000; //Camera setup camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //Renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); function render() { renderer.render(scene, camera); } var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshNormalMaterial(); var box = new THREE.Mesh( geometry, material ); const vertices = []; const colors = []; /* The geometry of the points */ const sparklesGeometry = new THREE.BufferGeometry(); /* The material of the points */ const sparklesMaterial = new THREE.PointsMaterial({ size: 1, alphaTest: 0.3, map: new THREE.TextureLoader().load( "https://assets.codepen.io/127738/dotTexture.png" ), vertexColors: true, // Let Three.js knows that each point has a different color }); /* Create a Points object */ const points = new THREE.Points(sparklesGeometry, sparklesMaterial); /* Add the points into the scene */ scene.add(points); const tempPosition = new THREE.Vector3(); let elephant = null; let sampler=null; new THREE.OBJLoader().load( "veba.obj", (obj) => { elephant = obj.children[0]; elephant.material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x000000, transparent: true, opacity: 1, }); scene.add(obj); sampler = new THREE.MeshSurfaceSampler(elephant).build(); renderer.setAnimationLoop(render); function addPoint() { /* Sample a new point */ sampler.sample(tempPosition); /* Push the point coordinates */ vertices.push(tempPosition.x, tempPosition.y, tempPosition.z); /* Update the position attribute with the new coordinates */ sparklesGeometry.setAttribute( "position", new THREE.Float32BufferAttribute(vertices, 3) ); /* Get a random color from the palette */ } // ScrollTrigger.create({ // trigger: ".section-three", // onEvent:()=> {addPoint()}, // }); // tl = new TimelineMax(); // tl.to('.section-two', 1, {autoAlpha:"1"} ) // .add( function(){addPoint() } ) // .to('.section-four', 1, {autoAlpha:"1"} ) var tl = gsap.timeline(); tl.to(".section-one", {duration: 1, x: 200}) .add( function(){addPoint() } ) .to(".section-four", {duration: 1, x: 200}) }, (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"), (err) => console.error(err) ); animate(); /* Store each particle coordinates & color */ /* Get a random color from the palette */ } function animate() { requestAnimationFrame(animate); // box.rotation.z += 0.005; // console.log('X: ' +camera.position.x) // console.log('Y: ' +camera.position.y) // console.log('Z: ' +camera.position.z) renderer.render(scene, camera); } init(); function onWindowResize() { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); } window.addEventListener("resize", onWindowResize); // function onWindowScroll() { // } // window.addEventListener("scroll", onWindowScroll); gsap.registerPlugin(ScrollTrigger); scene.rotation.set(0, 1.88, 0) camera.position.set(2, 0, 5) let car_anim = gsap.timeline() // Full Height car_anim.to(scene.rotation, {y:0, ease: "power1.inOut", scrollTrigger: { trigger: ".section-two", scrub: 1, end: "top bottom", }}) // Slide 2 car_anim.to(camera.position, {z:80,y:3, ease: "power1.inOut", scrollTrigger: { trigger: ".section-two", scrub: 1, start: "top bottom", end: "top top", }}) // Slide 3 car_anim.to(scene.rotation, {y:0,x:0.2, ease: "power1.inOut", scrollTrigger: { trigger: ".section-three", scrub: 1, start: "top bottom", end: "bottom top", }}) // // Slide 4 - The problem child // car_anim.to(camera.position, {x:2,z:80,y:10, ease:'power1.inOut', scrollTrigger: { // trigger: ".section-four", // scrub: 1, // start: "top 20px", // end: "bottom top", // }}) // car_anim.progress(1).progress(0); } addModelToBG();