본문 바로가기

분류 전체보기316

threejs, 파티클, 마우스 방향 이동 2024. 7. 23.
Raycaster() + gsap // raycaster 시작 const raycaster = new THREE.Raycaster();renderer.domElement.addEventListener('mousemove', onMouseMove)function onMouseMove(e){const mouse = { x : (e.clientX / renderer.domElement.clientWidth) * 2 - 1, y : -(e.clientY / renderer.domElement.clientHeight) * 2 + 1,}raycaster.setFromCamera(mouse, camera)const intersects = raycaster.intersectObjects(scene.children, true);if(inter.. 2024. 7. 19.
OBJLoader(), MTLLoader(). 블렌더에서 파일 가져오기 블렌더에서 -> 형태인 obj 와 재질인 mtl 파일로 export 하여 가져옴. 처음에 아무것도 안보여서 다른 개체를 다 삭제함. 그래도 안보여서 스케일을 1000배 키웠더니 검게 형태만 보임.빛을 추가하고 세기를 키웠더니 그제서야 보임 // OBJ Loaderconst OBJloader = new OBJLoader() // MTLLoader에서 로드한 materials 파일을 설정합니다.let ObjGroup = new THREE.Object3D()// MTL Loaderconst mtlLoader = new MTLLoader()mtlLoader.load('../static/img/lemon.mtl', (mtl) => {mtl.preload()OBJloader.setMaterials(mtl);OBJl.. 2024. 7. 19.
threejs GLTFloader.load() 블렌더에서 파일 가져오기 블랜드에서 파일을 gltf 확장자로 export 한후 가져옴 로드import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // GLTF loader const GLTFMaterial = new THREE.MeshPhysicalMaterial({ clearcoat: 0.9, clearcoatRoughness:0.1, metalness: 0.9, roughness:0.5, color: 0xd11b1b, envMap: envmap.texture, }) const GLTFloader = new GLTFLoader() let GLTFObjGroup = new THREE.Ob.. 2024. 7. 19.
threejs skybox 배경 // 하늘 시작 배열 const skyMaterialArray = [] const texture_ft = new THREE.TextureLoader().load( '../static/img/skybox_front.png') const texture_bk = new THREE.TextureLoader().load( '../static/img/skybox_back.png') const texture_up = new THREE.TextureLoader().load( '../static/img/skybox_up.png') const texture_dn = new THREE.TextureLoader().load( '../static/img/skybox_down.png') const texture_r.. 2024. 7. 18.
threejs Fog() 안개 const FogColor = 0x0d99cd;scene.background = new THREE.Color(FogColor);// scene.fog = new THREE.Fog(FogColor, 150, 1000); //색상, 가까운, 멀리scene.fog = new THREE.FogExp2(FogColor, 0.0015); // 밀도 2024. 7. 18.
OrbitControls(), 마우스휠 확대축소 제한, 로테이션 제한 2024. 7. 18.
threejs 텍스처 2024. 7. 18.
replace(), 유튜브 클릭시 오토플레이 유튜브 주소 뒤에 ?autoplay=1 붙이기 var currentUrl = $('iframe').attr('src');$('.video').click(function(e){ e.preventDefault(); $('#overlay').addClass('visible'); var newStr = '?autoplay=1'; var newUrl = currentUrl.concat(newStr); $('iframe').attr('src', newUrl);});$('.close').click(function(e){ e.preventDefault(); currentUrl = $('iframe').attr('src'); $('#overlay').removeClass('vi.. 2024. 7. 17.
숫자 카운터 var box = $('.box'), boxin = box.find('.boxin'), rate = box.find('.rate'), rateNum = rate.attr('data-rate'); boxin.animate({width:rateNum + '%'}, 2000);//첫번째 // setInterval(textAni, 100);// function textAni(){// var currentRate = boxin.width() / box.width() * 100;// rate.text( Math.ceil(currentRate) + '%');// }//두번째 animate 사용자속성 만들어 넣기 // $({rate:0}).animate({rate:rateNum},{// .. 2024. 7. 17.
hasClass를 이용한 이미지 체인지 var $window = $(window), $header = $('.header'), $logo = 'img/logo.svg', $mlogo = 'img/mlogo.svg';$window.scroll($.throttle(1000/15, function(){ if ($(this).scrollTop() >= 100 ){ if(!$header.hasClass('small')){ $header.addClass('small'); switchLogo($mlogo); } } else { if($header.hasClass('small')){ $header.removeClass('small');.. 2024. 7. 17.
throttle(), clone() var $window = $(window), $header = $('.header'), $haderClone = $header.contents().clone(), $headerCloneContainer = $(''), $threshold = $header.offset().top + $header.outerHeight();$headerCloneContainer.append($haderClone);$headerCloneContainer.appentTo('body');$window.scroll($.throttle(1000/15, function(){ if ($(this).scrollTop() >= $threshold ){ $headerCloneContainer.addCl.. 2024. 7. 17.
skybox 이미지 https://opengameart.org/content/skiingpenguins-skybox-pack skiingpenguins' skybox packFrom 512² to 2048², JPEG format. It was made using a paid version of Terragen, which allows commercial use.opengameart.org 2024. 7. 16.
blobmixer https://blobmixer.14islands.com/ BlobmixerA toy for creating and sharing 3D blobsblobmixer.14islands.com 2024. 7. 15.
lottieFiles https://lottiefiles.com/interactivity Lottie Player - Interactivity GuideThis is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applicationslottiefiles.com    스크롤 LottieInteractivity.create({ player: '#test', mode: 'scroll', actions: [ { visibility:[0.2, 0.7], //컨테이너의 20.. 2024. 7. 15.
Lottie.js, scroll 연동 사용법 : https://airbnb.io/lottie/#/1. 에프터이펙트에서 제작한 애니를 json으로 변환한다. bodymovin 플러그인이 파일을 인식 못하고 작동이 안되어 찾아봤더니 lottieFiles 가 생기면서 이제는 lottieFiles 플러그인으로 대체되었다고 한다. https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통lottiefiles.com 기본 작동법let clickAni = doc.. 2024. 7. 15.
modern graphics https://modern-graphics.de/ 2024. 7. 14.
do you read me? https://www.instagram.com/doyoureadme_berlin/ 2024. 7. 14.
swiper.on('slideChange'), letters const swiper = new Swiper('.swiper', { mousewheel: true, direction: 'vertical', speed: 1700, parallax: true});//글자 한자씩 쪼개기 document.querySelectorAll('.header-content h1').forEach(e => { e.innerHTML = e.textContent.replace(/ (-|#|@){1}/g, s => s[1]+s[0]).replace(/(\S*)/g, m => { return m.replace(/\S(-|#|@)?/g, '$&') }) e.querySelectorAll('.letter').forEach(function(l, i) { l.setAttribute('style.. 2024. 7. 14.
카럴 마르턴스 https://www.instagram.com/martens__martens 2024. 7. 13.
타일브랜드 eccentri https://eccentri.co/ Collezioni in gres porcellanato di qualità superiore - EccentricoDalla qualità di Galileo srl nasce l’eccellenza Eccentrico, un progetto nato per offrire un gres porcellanato di qualità superioreeccentri.co 2024. 7. 12.
오시다 유니 https://www.instagram.com/yuni_yoshida/ 2024. 7. 12.
gsap, draggable, photoswipe window.onload = function() { setTimeout(function() { document.body.classList.add('loaded') if (window.matchMedia('(min-width: 992px)').matches) { // If not mobile Draggable.create('.gallery', { bounds: 'body', inertia: true }) } }, 200)}// 이미지 링크 주소 가져오기 document.querySelectorAll('.gallery__item').forEach(function(e) { let img = new Image(), hrefURL = e.getAttribute('href') img.on.. 2024. 7. 10.
백그라운드 영상과 swiper 연계 const video = document.querySelector('.video-background')const swiperText = new Swiper('.swiper', { speed: 1600, loop:true, mousewheel: { }, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }})swiperText.on('slideChange', function() { gsap.to(video, 1.6, { currentTime: (video.duration / (this.slides.len.. 2024. 7. 9.
ffmpeg https://github.com/BtbN/FFmpeg-Builds/releases Releases · BtbN/FFmpeg-BuildsContribute to BtbN/FFmpeg-Builds development by creating an account on GitHub.github.com 설치법  아래 텍스트를 cmd 창에 한줄씩 복붙한다. md "%ProgramFiles%\ffmpeg"powershell.exe -Command "& {Invoke-WebRequest -OutFile $env:ProgramFiles\ffmpeg\ffmpeg-master-latest-win64-gpl.zip -Uri "https://github.com/BtbN/FFmpeg-Builds/releases/download/.. 2024. 7. 9.
pexels 무료 사진 동영상 자료 다운 https://www.pexels.com/ 2024. 7. 9.
vsCode에서 css 컬러에 피커가 안보일때 갑자기 vsCode에서 컬러 피커가 안보일때설정 -> 검색창에 hover 입력 ->  Editor hover Enabled 에 체크한다.  그러면 컬러 피커가 이제 보인다. 2024. 7. 9.
page transition var $context = $('body'),$navItem = $('#main-nav-menu li'),$navItemMenu = $('#main-nav-menu li a'),$navUnderline = $('#nav-underline'),$activeItem = $('#main-nav-menu li.active'),animating = false;$navUnderline.css({ left: $activeItem.position().left, width: $activeItem.outerWidth(), });$navItem.mouseenter(function(){ $navUnderline.stop().css({ left: $(this).position().left, .. 2024. 7. 9.

티스토리툴바