[Return function when its scroll]

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?

[Return function when its scroll]

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)

[Return function when its scroll]

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.

[Return function when its scroll]

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 

[Return function when its scroll]

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