173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
블렌더에서는 텍스처가 적용된걸로 보이는데, export한 후에 three.js에서 렌더링 하면 텍스처가 적용되지 않은 모델로 보입니다 ㅜㅜ 제공된 ilbuni.glb 파일을 사용하면 문제가 없는걸로 보아 코드 문제는 아니고, 블렌더에서 뭔가 잘못된거 같은데 이유를 모르겠습니다..! 아시는분들 답변부탁드립니다!! 익스포트 설정
미해결
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
비공개 영상인데, 어떻게 영상을 볼 수 있나요?
미해결
웹 애니메이션의 새로운 표준, Web Animations API
스크롤 이미지 영역 넘어갈시 가로가 움직여서 여러개의 이미지영역이 보이는게 안되여ㅠㅠ 선생님 완성본 02.html도 안되는거같아요 css @charset 'utf-8'; html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption { margin: 0; padding: 0; border: 0; } div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav, h1, h2, h3 { box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul, li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; height: auto; } html { font-size: 20px; font-family: Roboto; line-height: 1.6; } body { background: dodgerblue; } .wrap{ contain: paint; } .para { padding: 1em; font-size: 50px; } .gallery{ display: flex; align-items: center; position: sticky; top: 0; width:350vw; max-width: 4000px; height: 100vh; border: 10px dashed deeppink; } .gallery-item{ width:70vw; max-width: 800px; flex-shrink: 0; } .gallery-timeline{ height:2000px; border:10px dashed mediumaquamarine; } 02.js import './scroll-timeline.js' const gallery = document.querySelector('.gallery'); const galleryTimeline = document.querySelector('.gallery-timeline'); gallery.animate( [ {transform : 'translayeX(0)'}, {transform : 'translayeX(-100%)'} ], { fill : 'both', timeline : new ScrollTimeline ({ scrollOffsets : [ {target : galleryTimeline, edge : 'start' , threshold : 1}, {target : galleryTimeline, edge : 'end' , threshold : 1} ] }) } );
미해결
웹 애니메이션의 새로운 표준, Web Animations API
선생님 안녕하세요 svg를 vscode에서 불러오기를 했는데, vscode에서 이미지로 열립니다 소스로 안열리는데 소스로 열리게 하는법이 있을까요?
미해결
애플 웹사이트 인터랙션 클론!
function setCanvasImages() { let imgElem; for(let i = 0; i < sceneInfo.values.videoImageCount; i++) { imgElem = new Image(); imgElem.src = `./images/picdiet 1/${1 + i}.jpg`; sceneInfo[0].objs.videoImages.push(imgElem); } // /home/ibmuser01/src/images/picdiet 1/1.jpg } setCanvasImages(); function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence], 0, 0); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.25) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.57) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.83) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight){ enterNewScene = true; if(currentScene === 0) return; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); })(); main.js:181 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at playAnimation (main.js:181:30) at scrollLoop (main.js:292:9) at main.js:297:9 이러한 에러가 나요. 이미지 파일은 여기에 저장되어있슴돠.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
각 Glass 객체의 position X 값을 -1, 1로 설정하셨는데, 어떤 계산이 들어간걸까요? 아니면 값을 넣어보면서 맞추는건가요? // 유리판 for (let i = 0; i < numberOfGlass; i++) { const glass1 = new Glass({ name: 'glass', x: -1, y: 10.5, z: i * glassUnitSize * 2 - glassUnitSize * 9, }); const glass12 = new Glass({ name: 'glass', x: 1, y: 10.5, z: i * glassUnitSize * 2 - glassUnitSize * 9, }); }
미해결
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
커서를 따라다니는 나비 화면에서 mousemove 이벤트에만 커서가 움직이고, 마우스휠(wheel 이벤트)을 할 경우에는 나비 이미지가 움지이지 않아 대략 아래와 같이 패턴으로 마우스 휠의 경우에도 움직임을 추가해 봤습니다. 그런데 wheel 이벤트의 경우에는 나비가 커서 위치에 제대로 붙지 않고, 마우스를 조금이라도 움직여야 제대로 위치를 잡더라고요. 마우스 휠 이벤트일 때 어떻게 보완하면 좋은지 조언 부탁드립니다. const cursor = document.querySelector('.box'); let x = 0; let y = 0; window.addEventListener('mousemove', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); window.addEventListener('wheel', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); function cursorMove() { cursor.style.transform = `translate(${x}px , ${y}px)`; }
미해결
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
(사진)
미해결
Three.js로 시작하는 3D 인터랙티브 웹
강의 코드를 그대로 따라하면 mesh 색이 어두운 회색으로 표현되고 그림자가 생기지 않는 문제가 있습니다. 그래서 SpotLight의 위치와 강도를 조정했더니 그림자는 나타나는데 강의영상처럼 모든 집에대한 그림자가 동일하게 나오는 것이 아니라 맨 처음 집에 대한 그림자만 선명히 나타납니다! 빛을 한방향에서만 쏘기 때문에 저 처럼 표현되는게 맞는 것 같은데, 강의영상처럼 모두 동일한 그림자를 표현하려면 어떻게 해야할까요..? import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/Addons.js'; import { House } from './House'; import gsap from 'gsap'; // ----- 주제: 스크롤에 따라 움직이는 3D 페이지 // Renderer const canvas = document.querySelector('#three-canvas'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); renderer.shadowMap.enabled = true; // 그림자 설정, mesh도 함께 설정해야함 renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 그림자 부드럽게 // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color('white'); // 백그라운드 하얀색 // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(-5, 2, 25); scene.add(camera); // Light const ambientLight = new THREE.AmbientLight('white', 2); scene.add(ambientLight); const spotLight = new THREE.SpotLight('white', 500); spotLight.position.set(-5, 10, 30); // 그림자 설정 spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; // 그림자 퀄리티 조정(성능에 크게 영향을 미치지 않는 정도) spotLight.shadow.mapSize.height = 1024; // 그림자 퀄리티 조정(성능에 크게 영향을 미치지 않는 정도) spotLight.shadow.camera.near = 1; spotLight.shadow.camera.far = 1000; scene.add(spotLight); const spotLightHelper = new THREE.SpotLightHelper(spotLight, 'red'); scene.add(spotLightHelper); // --- (2) HemisphereLight 추가 --- // const hemiLight = new THREE.HemisphereLight('white', 'white', 2); // scene.add(hemiLight); const gltfLoader = new GLTFLoader(); // Mesh const floorMesh = new THREE.Mesh( new THREE.PlaneGeometry(100, 100), new THREE.MeshStandardMaterial({ color: 'white', roughness: 0.4, // 필요에 따라 조절 metalness: 0.2, // 필요에 따라 조절 toneMapped: false, }) // 강의에는 MeshStandartMaterial 사용했는데, 이거 사용시 floorMesh가 하얀색이 아닌 회색으로 보여서 변경 ); floorMesh.rotation.x = -Math.PI / 2; // 180//2 = 90도 floorMesh.receiveShadow = true; // floorMesh에 그림자가 그려지기 때문에 recieveShadow 사용 scene.add(floorMesh); // 하우스를 통해 그림자가 만들어져야 하므로 -> castShadow const houses = []; houses.push( new House({ gltfLoader, scene, modelSrc: '/models/house.glb', x: -5, z: 20, height: 2, }) ); houses.push( new House({ gltfLoader, scene, modelSrc: '/models/house.glb', x: 7, z: 10, height: 2, }) ); houses.push( new House({ gltfLoader, scene, modelSrc: '/models/house.glb', x: -10, z: 0, height: 2, }) ); houses.push( new House({ gltfLoader, scene, modelSrc: '/models/house.glb', x: 10, z: -10, height: 2, }) ); houses.push( new House({ gltfLoader, scene, modelSrc: '/models/house.glb', x: -5, z: -20, height: 2, }) ); // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); renderer.render(scene, camera); renderer.setAnimationLoop(draw); spotLightHelper.update(); } let currentSection = 0; function setSection() { // console.log('setSection 실행!'); // setSection 스크롤할때마다 실행됨 const newSection = Math.round(window.scrollY / window.innerHeight); // 0,1,2,3,4 if (currentSection !== newSection) { console.log('animation!'); // section값이 바뀔때만 애니메이션이 동작하도록 gsap.to(camera.position, { duration: 1, x: houses[newSection].x, z: houses[newSection].z + 5, }); currentSection = newSection; } } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener('scroll', setSection); window.addEventListener('resize', setSize); draw();
미해결
Three.js로 시작하는 3D 인터랙티브 웹
현재 애니메이션 기본 수업부터 scale까지 봤는데, setAnimationLoop 가 draw 안에 등록되서 매번 반복으로 실행되는것 같은데, 화면갱신에 관련된 render만 반복시키고 setAnimationLoop는 바깥에서 한번만 등록하는게 옳은 방법이 아닌가 하고 의문이 드는데 어떤게 맞는건가요? 동작은 둘다 똑같이 되긴 합니다. const draw = () => { /* 메쉬 애니메이션 처리 코드 들어갈 위치 ... */ renderer.render(scene, camera); } renderer.setAnimationLoop(draw);
미해결
Three.js 3D 인터랙티브 바로 시작하기
안녕하세요 Three.js 강의 열심히 듣고 있습니다. 강의를 듣다가 궁금한점이 일반적으로 Three.js 를 사용할때 z좌표의 이해강의부분에 있는 JS 코드처럼 저 코드를 전부다 해석이 가능할정도로 알아야 되는지 아니면 보통은 복붙을 하고 자주 쓰이는 부분의 코드만 만지는것인지 궁금합니다.
해결됨
인터랙티브 웹 개발 제대로 시작하기
let currentItem; function activate(elem){ // 활성화 : 문열기 elem.classList.add('door-open'); currentItem = elem; } function inactivate(elem){ // 비활성화 : 문닫기 elem.classList.remove('door-open'); } 이 부분에서요, let, const 변수는 범위가 {} 기준이라고 알고있습니다. 그런데, activate()에서 currentItem에 elem값을 넣어주면서 {} 범위가 끝났는데, inactivate()에서 currentItem의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
perspective : 800px을 .stage에 넣으면, 다르게 회전이 되어야 하는데 저는 .door에 넣은 것처럼 똑같이 일정하게 회전 됩니다. 이유를 모르겠어요~
미해결
애플 웹사이트 인터랙션 클론!
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요? 선생님은 <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데 만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면 캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서 어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); }; 강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요. 강의를 통해 gsap을 입문한 학생입니다. 현재 강의는 스크롤 시 실선이 나타나는데 점선으로 나타내고 싶습니다. 현재 강의에서의 설정부분인데 pathLength = document.querySelector(element).getTotalLength(); gsap.set(element,{ strokeDasharray:pathLength, strokeDashoffset:pathLength, }) strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요. 드래그하면서 실선이 그려져야하는데... 실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다
미해결
실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
완성된 부분까지 코드를 메일로 첨부하였어요. javascript부분에서 scrollPos가 동작하지 않는 거 같아요~
미해결
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.page'); let pageCount = 0; function getTarget(target,className) { while (!target.classList.contains(className)) { target = target.parentNode; if (target.nodeName === 'BODY') { return; } } return target; } leaflet.addEventListener('click', (e) => { let pageElem = getTarget(e.target, 'page'); pageElem.classList.add('page-flipped'); pageCount++; if (pageCount === 2) { document.body.classList.add('leaflet-opened'); } let closeElem = getTarget(e.target, 'close-btn'); if (closeElem) { console.log(pagesElem); closeElem.classList.remove('leaflet-opened'); pageElem.classList.remove('page-flipped'); pageCount = 0; } }); })(); page 첫번째를 선택을 해줘도 close 버튼을 클릭했을때 3번째 페이지의 page-flipped가 제거 되면서 세번째 페이지가 접어 지는데 이유가 뭔가요?
미해결
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
안녕하세요 현재 강의에서 let x = 0; let y = 0; let targetX = 0; let targetY = 0; let speed = 0.03; 이 부분과 x = e.pageX; y = e.pageY; 이 부분 그리고 targetX += (x - targetX) * speed; targetY += (y - targetY) * speed; 이 부분이 왜 작성이 된 것인지 이해가 잘 되지 않습니다.
미해결
Three.js로 시작하는 3D 인터랙티브 웹
(사진)
