naman Posts - Answer Overflow

naman

•Created by naman on 3/14/2024 in #front-end

(three.js) MeshTransmissionMaterial not working

import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { pcss, MeshTransmissionMaterial } from '@pmndrs/vanilla';
console.log(pcss, MeshTransmissionMaterial);

THREE.ColorManagement.legacyMode = false;


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//RESIZE
function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width ||canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#logo-model'),
  alpha: true,antialiasing: true,
});



const loader = new GLTFLoader();
loader.load('./logo.glb', function(glb){
  console.log(glb);
  const logo = glb.scene;
  logo.scale.set(3.5, 3.5, 3.5);
  logo.material = Object.assign(new MeshTransmissionMaterial(10), {
    clearcoat: 1,
    clearcoatRoughness: 0,
    transmission: 1,
    chromaticAberration: 0.03,
    anisotrophicBlur: 0.1,
    roughness: 0,
    thickness: 4.5,
    ior: 1.5,
    distortion: 0.1,
    distortionScale: 0.2,
    temporalDistortion: 0.2
  })
  scene.add(logo);
});

//camera.position.z = 2.5;
camera.position.set( 0, 0, 2.5 )

const controls = new OrbitControls(camera, renderer.domElement);



const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(3, 3, 9);
scene.add(light);


function animate() {
  controls.update();

  resizeCanvasToDisplaySize();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { pcss, MeshTransmissionMaterial } from '@pmndrs/vanilla';
console.log(pcss, MeshTransmissionMaterial);

THREE.ColorManagement.legacyMode = false;


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//RESIZE
function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width ||canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#logo-model'),
  alpha: true,antialiasing: true,
});



const loader = new GLTFLoader();
loader.load('./logo.glb', function(glb){
  console.log(glb);
  const logo = glb.scene;
  logo.scale.set(3.5, 3.5, 3.5);
  logo.material = Object.assign(new MeshTransmissionMaterial(10), {
    clearcoat: 1,
    clearcoatRoughness: 0,
    transmission: 1,
    chromaticAberration: 0.03,
    anisotrophicBlur: 0.1,
    roughness: 0,
    thickness: 4.5,
    ior: 1.5,
    distortion: 0.1,
    distortionScale: 0.2,
    temporalDistortion: 0.2
  })
  scene.add(logo);
});

//camera.position.z = 2.5;
camera.position.set( 0, 0, 2.5 )

const controls = new OrbitControls(camera, renderer.domElement);



const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(3, 3, 9);
scene.add(light);


function animate() {
  controls.update();

  resizeCanvasToDisplaySize();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

the model shows up, but without the shader effects

3 replies

KPCKevin Powell - Community

•Created by naman on 2/19/2024 in #front-end

Setting barba.js

how to I setup barba up using the the functions mentioned below? I've added the comments on what each one does

function delay(n) {
    n = n || 1500;
    return new Promise((done) => 
        {
            setTimeout(() => {
                done();
            }, n);
        });
};

barba.init({
    sync: true,
    transitions: [
        {
            once(data) {
                console.log("once");
                loader(); //Initial page load, plays one time when user visits website
                navScroll();//Hides elements of the navbar on scroll
                textReveal();//text reveal, added this to reset the state on other page load
                lineReveal();//Reveals div borders scrollTrigger, added to reset state
                buttonAnimation();
            },
            async leave(data) {
                console.log("leave");
                // const done = this.async();
                transition();//animation between pages
                await delay(2000);
                // done();
            },
            async enter(data) {
                window.scrollTo(0,0);//doesn't seem to work
                console.log("scroll 0")
                textReveal();
                aboutReveal();
                navScroll();
            },
            async after(data) {
                console.log("after");
                navScroll();
                textReveal();
                valueSet();
                lineReveal();
            },
        },
    ],
})

function delay(n) {
    n = n || 1500;
    return new Promise((done) => 
        {
            setTimeout(() => {
                done();
            }, n);
        });
};

barba.init({
    sync: true,
    transitions: [
        {
            once(data) {
                console.log("once");
                loader(); //Initial page load, plays one time when user visits website
                navScroll();//Hides elements of the navbar on scroll
                textReveal();//text reveal, added this to reset the state on other page load
                lineReveal();//Reveals div borders scrollTrigger, added to reset state
                buttonAnimation();
            },
            async leave(data) {
                console.log("leave");
                // const done = this.async();
                transition();//animation between pages
                await delay(2000);
                // done();
            },
            async enter(data) {
                window.scrollTo(0,0);//doesn't seem to work
                console.log("scroll 0")
                textReveal();
                aboutReveal();
                navScroll();
            },
            async after(data) {
                console.log("after");
                navScroll();
                textReveal();
                valueSet();
                lineReveal();
            },
        },
    ],
})

4 replies

KPCKevin Powell - Community

•Created by naman on 2/18/2024 in #front-end

GLB model not displaying in three.js

Hi all, I am trying to import a model and display it on my canvas, but it doesn't seem to work. What am i doing wrong?

import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log( GLTFLoader );


//RENDERER
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#logo'),
  alpha: true,antialiasing: true,
});


//RESIZE
function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width ||canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}


//CAMERA
const  camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
const scene = new THREE.Scene();


//OBJECT
const loader = new GLTFLoader();
loader.load('./public/logo.glb', function(glb){
  console.log(glb);
  const logo = glb.scene;
  logo.scale.set(10, 10, 10);
  scene.add(logo);
}, function(xhr){
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error){
  console.log('error');
});

const geometry = new THREE.BoxGeometry(300, 300, 200);
const material = new THREE.MeshPhysicalMaterial({  
  roughness: 0.7,   
  transmission: 1,  
  thickness: 1
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


//LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);


//RENDERER
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;

//ANIMATE
function animate(time) {
  time *= 0.001;
  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 0.5;
  
  resizeCanvasToDisplaySize();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log( GLTFLoader );


//RENDERER
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#logo'),
  alpha: true,antialiasing: true,
});


//RESIZE
function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width ||canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}


//CAMERA
const  camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
const scene = new THREE.Scene();


//OBJECT
const loader = new GLTFLoader();
loader.load('./public/logo.glb', function(glb){
  console.log(glb);
  const logo = glb.scene;
  logo.scale.set(10, 10, 10);
  scene.add(logo);
}, function(xhr){
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error){
  console.log('error');
});

const geometry = new THREE.BoxGeometry(300, 300, 200);
const material = new THREE.MeshPhysicalMaterial({  
  roughness: 0.7,   
  transmission: 1,  
  thickness: 1
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


//LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);


//RENDERER
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;

//ANIMATE
function animate(time) {
  time *= 0.001;
  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 0.5;
  
  resizeCanvasToDisplaySize();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

7 replies

KPCKevin Powell - Community

•Created by naman on 2/15/2024 in #front-end

including all html files in npm build package

24 replies

KPCKevin Powell - Community

•Created by naman on 12/13/2023 in #front-end

Scroll reactive marquee made using GSAP not working

3 replies

KPCKevin Powell - Community

•Created by naman on 10/7/2023 in #front-end

Animating multiple elements using gsap

Hey all! I am trying to animate the rotation of an element based on the scroll direction using gsap. While it works, it only works for the first element, and not the other instances. What are some changes I can make to fix it? Thank you in advance!

  const logo = document.querySelector("#union svg");

const t = gsap.to(logo, {
  rotation: -360,
  duration: 5,
  ease: "none",
  repeat: -1
});
t.iteration(1000);

const speedFactor = 1;
let tl;

var rotate = gsap.timeline({
  scrollTrigger: {
    trigger: "html",
    start: "top top",
    end: "+=10000",
    onUpdate: (self) => {
      tl && tl.kill();
      tl = gsap
        .timeline()
        .to(t, { timeScale: speedFactor * self.direction, duration: 0.1 })
        .to(t, { timeScale: self.direction, duration: 1 }, "+=0.5");
    }
  }
});

  const logo = document.querySelector("#union svg");

const t = gsap.to(logo, {
  rotation: -360,
  duration: 5,
  ease: "none",
  repeat: -1
});
t.iteration(1000);

const speedFactor = 1;
let tl;

var rotate = gsap.timeline({
  scrollTrigger: {
    trigger: "html",
    start: "top top",
    end: "+=10000",
    onUpdate: (self) => {
      tl && tl.kill();
      tl = gsap
        .timeline()
        .to(t, { timeScale: speedFactor * self.direction, duration: 0.1 })
        .to(t, { timeScale: self.direction, duration: 1 }, "+=0.5");
    }
  }
});

2 replies

KPCKevin Powell - Community

•Created by naman on 10/3/2023 in #front-end

Hiding other divs when hovering one of them

Hey all! As the title mentions, how do I go about this? Thank you in advance!

10 replies

KPCKevin Powell - Community

•Created by naman on 5/31/2023 in #ui-ux

Portfolio Website Help

Hey guys, I redid my portfolio website. Please let know know your thoughts. Please let me know if I can make any improvements. https://namanprat.com/

21 replies

KPCKevin Powell - Community

•Created by naman on 3/2/2023 in #back-end

Website using cached version

Hey guys, I've finally finished making my website. Whenever I make some changes, I have to press shift+reload to see the changes to clear the cache. I've tried everything to fix it form using head tags in my code to purging the cache from cloudflare. What are some other steps I can take?

1 replies

Gaming

Programming