Return function when its scroll

[Vehin VElat Eker]

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();

 

 

See the Pen ArJPmM by savataqe (@savataqe) on CodePen

[OSUblake]

Welcome to the forums @Vehin VElat Eker

 

Your CodePen isn't working, so I don't know what I'm supposed to be looking or how to help. You don't need to include everything from your. Just the bare minimum needed to recreate your issue on CodePen or Codesandbox. And you don't need to include your object. If needed, just use a very simple one hosted on three.js demo.

 

[Vehin VElat Eker]

1 hour ago, OSUblake said:

Welcome to the forums @Vehin VElat Eker

 

Your CodePen isn't working, so I don't know what I'm supposed to be looking or how to help. You don't need to include everything from your. Just the bare minimum needed to recreate your issue on CodePen or Codesandbox. And you don't need to include your object. If needed, just use a very simple one hosted on three.js demo.

 

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

[OSUblake]

Could you possibly put that on CodeSandbox? I can't fork your CodePen project, and it does seem to work either. Just a blank screen. Thanks!

[Vehin VElat Eker]

47 minutes ago, OSUblake said:

Could you possibly put that on CodeSandbox? I can't fork your CodePen project, and it does seem to work either. Just a blank screen. Thanks!

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

[OSUblake]

Thanks! It's up and running, but I'm not sure about the addPoint question you mentioned in your first post as I don't see any code for that. Am I missing something?

 

[Vehin VElat Eker]

39 minutes ago, OSUblake said:

Thanks! It's up and running, but I'm not sure about the addPoint question you mentioned in your first post as I don't see any code for that. Am I missing something?

 

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)

[OSUblake]

I would recommend creating your animations after your object has loaded. Then you can add the addPoint function where you want. 

 

One problem with your current setup is that you are nesting ScrollTriggers inside a timeline. A timeline should only have 1 ScrollTrigger associated with it, and it should be in the creation like....

 

gsap.timeline({
  scrollTrigger: { ... }
})

 

See the Most Common ScrollTrigger Mistakes for more information.

 

 

 

So I'm not exactly sure what you were going for, but I just created a single timeline for the animations. That would probably be the best option, at least for the scene animations.

 

https://codesandbox.io/s/silly-newton-xeyr3?file=/script.js

 

[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?

[OSUblake]

I honestly wouldn't know how to do that as I'm not that familiar with three.js. That sounds like something that someone on their forum might able to help with.

https://discourse.threejs.org/