월 33,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
gsap 사용시에 requestAnimationFrame이 돌아가고 있어야하나요?
requestAnimationFrame()이나 setAnimationLoop()와는 독립적으로 돌아간다고 하셔서 draw function 전체를 지우고 renderer.render(scene, camera); 만 남긴 후에 실행을 하면 애니매이션이 동작을 안하는데 코드를 잘못된 순서로 넣어서 그런걸까요 아니면 움직임을 제어하는 코드부분만 독립적이란 말씀이고 requestAnimationFrame 자체는 돌아가는 상태여야는 하는건가요? 궁금합니다 아래부분 코드입니다 // gsap gsap.to( mesh.position, { duration: 1, y: 2, z: 3 } ); renderer.render(scene, camera); function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener('resize', setSize); // draw();
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
PointLight의 y좌표 설정시
PointLight의 y좌표를 플레인 하단부에 설정시에 플레인을 뜷고 sphere 과 box의 밑면이 빛나는데 light가 플레인을 못뜷게도 설정이 가능한가요 ?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
혹시 포인터 락 경우 click 말고 keydown이나 dbclick을 이용하고 싶습니다
혹시 포인터 락 경우 click 말고 keydown이나 dbclick을 이용하고 싶습니다 근데 위의 이벤트를 적용했을 경우 아무런 에러도 뜨지않고 반응을 하지 않아 질문을 드립니다. const controls2 = new PointerLockControls(camera, renderer.domElement); controls2.domElement.addEventListener('keydown', () => { controls2.lock(); }); controls2.addEventListener('lock', () => { console.log('lock'); }); controls2.addEventListener('unlock', () => { console.log('unlock'); });
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
혹시 gltfloader
수업 들은 예제들을 리액트 프로젝트에서 열어보려고 react-create-app 으로 프로젝트 생성한 다음 컴포넌트 만들고 canvas 태그 만든후 useRef로 접근하여 렌더러 생성해주었습니다. 그리고 gltfLoader 사용해서 만든 glb 파일 불러오려는데 GLTFLoader.js:185 SyntaxError: Unexpected token < in JSON at position 0 자꾸 이렇게 에러가 뜹니다 ㅠㅠ 어떤게 문제인가요..?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
WebGLRenderer
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. WebGLRenderer 과 WebGL1Renderer 차이가 무엇인가요 ? threejs.org 에서 r118이후 WebGLRenderer 는 WebGL 2 렌더링 컨텍스트 사용한다고 적혀있는데 WebGL1Renderer은 어떤것이 다른지 궁금해서 여쭙습니다
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
canvas 배경 색 질문입니다
캔버스를 로드하였을 때 저는 배경색이 하얀데 강사님 배경색은 왜 까만색인가요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
Module index.html 오류메세지
이제 처음 강의듣고 modul폴더에서 작업해 콘솔창에서 결과확인해 보려하니.. 아래와 같은 오류가 발행하는데... 소스를 여러번 돌려보고 따라 해봐도.. 타이핑 오류는 아닌것 같은데 선생님 소스 좀 확인 부탁드리겠습니다.~
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
shadow.mapSize의 width, height 관련 질문입니다.
혹시 mapSize 크기를 늘리는 것이 canvas 고해상도 관련 로직과 비슷한 느낌이라 고해상도 표현을 하기 위해 사이즈를 키워주는 건가요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
애니메이션 관련 질문있습니다.
선생님, 문득 궁금증이 든건데 gsap라이브러리를 활용해 애니메이션 처리해주는 것과 draw 함수 내부에서 애니메이션 처리해주는 것에 차이점이 간편하게 구현할 수 있다는 것 제외하면 없는건가요?? gsap에서 구현한 애니메이션을 draw 애니메이션 함수에서도 구현할 수 있겠죠??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
map에 관해 궁금한 것이 있습니다
map과 관련된 속성이 많은데, JS의 map과 뜻이 다른 것 같아서 질문을 남깁니다. Three.js에서 map이라는 단어가 가지는 의미가 뭔가요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
강의 18:34 일분이 mesh cannon 위치, 각도 설정 관련 질문
Player Class 내부에서 일분이 mesh 를 만들 때 box mesh 와 같이 container 로 묶으면 box mesh 가 cannon 위치, 각도를 카피하면 일분이 mesh 또한 따라서 움직이지 않나요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
수강전 문의 드렸었는데요 canvas 이미지 캡쳐 관련
사전 질문에 답변을 주셨는데 다시 좀 문의드려봅니다. three.js 를 이용하여 화면을 구성하고 html2canvas 와 php 를 이용해서 테스트를 해보았습니다. canvas 내의 화면을 캡쳐해서 저장하는 것은 되는데 문제는 3D 오브젝트는 함께 저장이 되지 않더라구요. 다만 공식 홈페이지에 보면 마우스 우클릭 하면 3D 오브젝트를 2D 이미지로 다운로드가 가능하던데요. http://www.bluemedia.co.kr/test/examples/#webgl_animation_skinning_blending 우측 하단에 보면 이미지저장 버튼과 저장 후 볼 수 있는 저장된 이미지 보기 링크가 있습니다
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
애니메이션 관련되어 질문있습니다.
draw 함수 내에서 구현한 애니메이션과 gsap을 통해서 구현한 애니메이션에 차이가 있을까요??
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
얼굴을 그리려고 브러쉬로 그리는데
얼굴을 그리려고 브러쉬 검은색으로 해서 그리는데 얼굴 앞면에 그렸는데 색칠이 반대편에 됩니다... ㅠㅠ 그래서 반대편으로 돌려서 뒤통수에 색칠하면 이번엔 원래 얼굴쪽에 색칠이 되구요.. 관통되서 반대편에서 색칠되는데 이건 어떻게 하나요..? ㅠㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
개별 planeMesh rotation
안녕하세요! 강의를 보다가 sphereMesh 의 각 vertex에 위치한 planeMesh 를 회전시켜보고 싶어서 시도해봤는데 잘 안되어 질문 남깁니다! 제가 시도한 건 1. draw() 함수 내에 plane.rotation.x...z에 접근해서 수업중 사용했던 getElapsedTime을 넣어준 것 -> 무반응 2. for문 밖에서 let rotation; 을 정의하고 안에서 plane.rotation.x...z에 rotation을 넣어준 뒤 draw() 함수 내에서 rotation = getElapsedTime (수업처럼 clock으로 변수선언 한 것 입니다) -> 모든 메쉬가 사라짐 두 방법을 plane 대신 planeMesh 변수로도 시도해봤지만 잘 안되네요...ㅠㅠ plane은 단지 sphereMesh의 vertex 값에 위치한 것 뿐인데 왜 회전하지 않는지...궁금합니다! 감사합니다!
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
rotation 궁금한 게 있습니다.
rotation xyz는 개념이 좀 다른가요? 저는 x는 좌우, y는 상하로 생각했는데 rotation y의 값을 변경하면 좌우로 돌고 rotation x의 값을 변경하면 상하로 돌아서 이게 제 얕은 지식으로는 이해가 안됩니다 ㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
안녕하세요. 배포 관련 질문이 있습니다.
제가 작업한 THREE.js 파일들을 npm run build 해서 배포는 했는데, dist 파일이 생성되더라구요.. dist 파일을 그대로 서버에 올리면 되는건지 궁금합니다 ㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
오브젝트 추가 관련 질문
안녕하세요 강의 잘 듣고있습니다^^ 이번 수업시간에 models 폴더안에 house.glb 라는 오브젝트를 씬에다가 추가를했는데 제가 3d툴로만든(3dmax) 오브젝트를 적용할려하면 어떻게 해야하나요? 일단 모델링후 FBX파일을 GLB파일로 변환후 경로에다가 넣어주고 52번 라인을 수정후 서버를 실행하니 제가만든 오브젝트는 보이질 않네요... 변환시켜준 gbl 파일은 모델링한대로 잘 나오긴합니다
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
walk 함수을 RAF 내부에 넣는 것과 이벤트 바인딩에 대해 질문 있습니다.
walk 함수를 정의하여 draw 함수에서 계속 호출하도록 하셨는데, keydown 이벤트 자체를 canvas에 걸어주는 것과 차이점이 있을까요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
질문있습니다!
안녕하세요. 강의 듣는 중에 질문사항이 있습니다. 마우스로 카메라를 컨트롤 한 후 현재 카메라가 보고있는 방향 기준으로 움직이려면 어떻게 하면 좋을까요? 예로, 카메라 방향이 위에서 밑을 보고있는데, moveForward() 함수는 카메라 방향이 아닌 처음 지정했던 방향의 앞으로 이동합니다. 어떻게 처리하면 좋을까요!?