묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨떠먹는 Three.js
소스코드 공유는 없을까요?
강의 대부분이 내용 skip이 되며, 이번 강의에서는 css파일 등이 공개가 되어 있지 않아똑같이 따라하기가 너무나 힘듭니다. ㅠㅠ 기술을 배워 응요하는 것도 좋지만, 처음 학습시에는 시청한 강의와 똑같은 내용으로 만들어보고자 합니다. 해당 소스코드 (모델들, 세팅 index.js 소스코드, reset css)가 어딘가 공유가 되어있는지, 또는 공유가 가능한지 알고 싶습니다.강의 내용 중 사용된 material 등도 제공 가능하신지 알고 싶습니다.
-
해결됨떠먹는 Three.js
강의 영상에서 보이는 색과 다른 색상이 나옵니다.
과일과 나무 만들기 실습 중에 있습니다. 그런데 강의에서 보이는 bodyMaterial과 THREE.DirectionalLight에 들어가는 색상 코드를 그대로 사용했는데 색이 다르게 나오는 건 왜 그런 건가요..?이전 강의들에서도 색상이 다르게 나왔었습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Studiomeal 소스코드가 궁금합니다.
안녕하세요! 클론코딩형식으로 studiomeal을 구현해보고싶은데 방명록 작성이나 동영상을 띄우는 부분이 너무 궁금해서 혹시 소스가 오픈되어있는지 궁금합니다.! 추가적으로 해보려고 하는게 사용자가 사진과 제목과 내용을 작성하면 이미지, 제목, 내용이 액자처럼 되어서 마치 미술관에 전시된 그림과 제목과 내용을 확인할 수 있는 것처럼 구현해보고 싶은데 조언 부탁드립니다!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
물리엔진 사용
현재 모듈형으로 진행해오고 있었는데cannon-es.js의 경우 npm으로만 연결이 가능한건가요..?ㅠ
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
색칠 이후에 적용이 되지않습니다...
색칠 이후에 오브젝트 모드로 진입하면 캐릭터에 적용이 되지 않습니다...
-
해결됨떠먹는 Three.js
섹션2 Material 학습 중에 마우스 드래그로 돌려보는 기능?
섹션2 Material 학습 중에 있는데요, 강사님 영상에서는 마우스 드래그를 통해 오브젝트가 회전하는데, 저는 안됩니다.^^; 뭔가 세팅을 하는 게 있을 것 같은데, 아마 다 공부하고 나면 알 수 있는거겠죠?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
로드 이후 gltf wireframe 속성 변경이 가능할까요?
수업 너무 재밌게 잘 들었습니다! 수업듣고 혼자 프로젝트 만들어보다 궁금증이 생겼는데요! gltf로 캐릭터 로드 후 특정 영역안에 들어갈 시 traverse를 이용해서 캐릭터 wireframe을 true로 바꾸고 싶은데요 이미 로드된 캐릭터는 wireframe을 변경할 수 없을까요..?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
mesh가 전부 흰색으로 보입니다
Mesh에 rgb값이 적용되지 않는 것 같습니다..!새로고침이나 서버 다시 시작 등은 해봤습니다,,혹시 한 번 봐주실 수 있을까요?ㅠㅠ// Mesh const geometry = new THREE.BoxGeometry(1,1,1); let mesh; let material; for( let i=0;i<20;i++){ material = new THREE.MeshStandardMaterial({ color: `rgb( ${ 50 + Math.floor(Math.random() * 205) }, //r값 // Math.floor()은 내림 함수 ${ 50 + Math.floor(Math.random() * 205) }, //g값 ${ 50 + Math.floor(Math.random() * 205) } //b값 )` }); mesh = new THREE.Mesh(geometry,material); mesh.position.x = (Math.random()-0.5)*5;//-2.5에서 2.5 사이의 범위 mesh.position.y = (Math.random()-0.5)*5; mesh.position.z = (Math.random()-0.5)*5; scene.add(mesh); }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
lookAt(mesh.position) 관련 질문입니다!
GUI컨트롤 강의에서 8:05에 lookAt(mesh.position)을 했는데 왜 lookAt(mesh)를 하면 화면에 아무것도 안 보이는건가요??+애니메이션이 계속 업데이트 되기 때문에 camera.lookAt(mesh.position)을 draw()함수에 넣어야된다고 하셔서 애니메이션을 끄고 실행해보려고 draw()함수를 주석처리하고 camera.lookAt(mesh.position)을 다음과 같이 넣었더니 GUI를 움직여도 변화가 없는데 이건 왜인가요??ㅠㅠ // GUI const gui = new dat.GUI(); gui.add(mesh.position, 'y', -5, 5, 0.01).name('y 위치'); //조정할 속성, 속성값, 최솟값, 최댓값, 조정 단위 gui .add(mesh.position, 'z') .min(-10) .max(3) .step(0.01) //위와 같은데 쓰는 방식만 다른거임 .name('메쉬의 z위치'); //조정 이름 설정 gui.add(camera.position, 'x', -10, 10, 0.01).name('카메라 x'); camera.lookAt(mesh.position); // 그리기 const clock = new THREE.Clock(); // function draw() { // const time = clock.getElapsedTime(); // mesh.rotation.y = time; renderer.render(scene, camera); // renderer.setAnimationLoop(draw); // }
-
미해결Three.js 3D 인터랙티브 바로 시작하기
TextureLoader관련 질문 드립니다.
TextureLoader를 사용하는게 맞는 방법인지는 모르겠는데 TextureLoader로 사진을 로딩하여 모델의 특정 영역에만 사진을 표시 할려면 어떤 방법을 사용해야 하는지 궁금 하여 문의 드립니다.해야 되는 작업은 상품 상세 페이지에서 사용자가 업로드한 이미지를 컵, 텀블러, 우산 이런 모델 데이타를 로딩하고 거기에 특정 영역에만 사용자가 업로드한 이미지를 보여주고 주문 전에 미리보기 할수 있는 페이지를 만들어야 하는작업인데.. 특정 영역에만 사진을 넣기 위해서 모델 디자인 하는 업체에 어떻게 만들어 달라고 요청을 해야 하는지도 궁금 하고 TextureLoader로 로딩해서 만드는 지도 궁금합니다.강의 구매전에 스크롤 해서 캔 위치 이동하는 강의를 보고 캔에 사진 넣는 강의라고 생각해서 보고 힌트를 얻을수 있을까 했는데.. 아니였네요....
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
두 개의 glb 파일에서 skinnedMesh 추출하여 하나에 합치기
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. hair.glb, body.glb 두 개의 모델은 동일한 bone 구조를 가지고 있습니다.body.glb 모델에 hair.glb의 머리 모양을 결정하는 skinnedMesh 를 가져와 넣어 주었는데요hair.glb 모델을 단독으로 import 해서 띄웠을 때와 다른 크기와 위치에 skinnedMesh가 적용되어 나타납니다.이렇게 머리에 헤어 스타일이 적용된게 기대값이었는데요hair.glb 파일을 단독 import하면 body.glb에 맞는 위치, 크기로 import 되지만위에 기재한 대로 skinnedMesh를 가져오면이렇게 보여집니다. 뒤에 하얗게 보이는게 hair.glb의 skinnedMesh 입니다.기대값으로 원하는 모델과 같은 위치에 skinnedMesh를 넣었으나 적용이 되지 않는데 어떻게 해야할까요??
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm 개념 관련 질문
npm node.js의 개념이 명확히 와닿지 않아서 여쭤봅니다.전에 봤던 어떤 기초 강의에서//Basic Tools (VScode, Atom, Intelli J등) //Front End (HTML CSS JS)//Tools (Package Manager- npm,yarn, Module Bundler - Webpack, Rollup, Parcel) //Testing//Publish (Netlify 등)위 순서대로 웹빌딩이 진행된다는 내용을 본 적이 있는데 전에 혼자 웹빌딩을 했을 때는 Front End -> Publish(깃허브) 순으로 진행하고 끝냈어서 중간 단계에 있는 Tools 내용부터는 이해가 잘 되지 않습니다ㅠㅠ npm이랑 webpack이 이번 수업에도 등장했는데 왜 설치를 해야하는지, 설치한 npm은 publish할 때 어떻게 해야하는지 등의 부분이 이해가 되지 않아서 여쭤봅니다
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
modelMesh 질문있습니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.선생님 현재 물리엔진 적용중, Player에 mass 30적용시 Pillar를 뚫고 밑으로 떨어지는 문제가 발생하고있습니다. 강의를 여러번 다시 되돌리면서 확인도 해보구, 완성된 코드랑 비교도 하면서 오타가있나 복사 붙여넣기를 해봐도 도저히 문제를 찾을 수 없었습니다..ㅠㅠ 어디부분을 수정해야 이러한 문제를 고칠 수 있는지 알려주시면 감사하겠습니다!ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
mesh 변수 질문
안녕하세요. 선생님 질문있습니다. 강의에 보면 let mesh로 변수를 선언해서 반복문내에서 사용하셨는데const meshes = []; let mesh; for (let i = 0; i < 10; i++) { mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }다음과 같이 반복문 내에 const로 선언하고 사용해도 같은 결과가 나오는데 반복문 밖에서 선언 후 사용하신 이유가 따로 있을까요?const meshes = []; for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Uncaught TypeError (uuid) 에러
이전 수업에서 ilbuni.glb를 로드했을 땐 정상적으로 작동했는데, test.glb로 바꾸니까 이런 에러가 뜨네요 ...uuid가 토큰같은 id처럼 보이는데 ,, 어떻게 해결해야 할까요? ㅜㅜ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Chapter 9의 커스텀 모델 로드하기에서 오류가 뜹니다.
안녕하세요 1분코딩님 강의에서처럼import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // gltf loader const loader= new THREE.GLTFLoader; GLTFLoader.load( '/models/ilbuni.gltf', gltf => { console.log(gltf) } ); 이렇게 입력했는데, localhost:8080에서export 'GLTFLoader' (imported as 'THREE') was not found in 'three' 와 같은 오류가 뜹니다. three.js의 폴더는 평소에 잘 실행 된 것 처럼 위치해 있는 거 같은데, 무엇이 잘못되었는지를 모르겠습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
캐릭터에 빛이 반대로 비쳐져요
선생님이 만든 캐릭터는 캐릭터에 그림자가 정상적으로 생기던데, 제가 만들면서 빠뜨린 게 있을까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
캔버스내 클릭 무반응
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 커스텀하여 만들고있는데 캐릭터를 아래로 이동시키고자 화면 하단을 클릭하면 데스티네이션 포인트가 안생기고 클릭이 안되는부분이 있습니다. 캐릭터 가 위치한 높이 아래로 어느정도 거리 이상 클릭시 클릭자체가 안되는것같은데 어떻게 해결해야할까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
localhost:8080 에서 콘솔 창에 오류 메세지 해결방안좀 알려주세요
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform 화면 캡쳐 첨부 합니다
-
해결됨Three.js 3D 인터랙티브 바로 시작하기
이미지 클릭 시 페이지 이동
강의대로 const dataArr = [ { "image": "https://i.postimg.cc/ZqSD48GC/image.jpg", "link": "https://gokweol13.yikyung.repl.co", },코드를 사용하여 페이지에 삽입한 이미지를 클릭하면 새 창으로 페이지가 새로 만들어지는데, 혹시 한 웹사이트 내에서 페이지 간 이동 할 수 있도록 하려면 어떡해야하나요?