월 33,000원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
dat.gui
react에 three.js를 따라하고 있습니다. 그런데 다른건 다 잘 되는데 dat.GUI는 똑같이 따라 하니 안되네요 혹시 다른 방법을 더 추가 해야 할까여 import * as THREE from 'three'; import dat from 'dat.gui'; export default function example() { const scene = new THREE.Scene(); const renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio>=1 ? 2 : 1); document.body.innerHTML=""; document.body.appendChild(renderer.domElement); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1; camera.position.z = 5; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight('white', 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight('white', 1); directionalLight.position.x = 1; directionalLight.position.z = 2; scene.add(directionalLight); // Mesh const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 'seagreen' }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // Dat GUI const gui = new dat.GUI({ name: "My GUI" }); console.log(gui) gui.add(mesh.position, 'y', -5, 5, 0.01).name('큐브 Y'); 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; camera.lookAt(mesh.position); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } 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 인터랙티브 웹
섹션3. 회전 강의에서 reorder 메서드가 잘 이해되지 않습니다.
제가 3D를 잘 몰라서 그런지 강사님이 설명해주신것과 실제 화면상의 결과물이 다소 다르게 보입니다.제가 생각한 것으로는 reorder() 메서드를 사용하면 mesh의 각 면의 x, y, z 방향을 재정리해서 y축 방향으로 45도 돌아간 상태가 새로운 기준이 된다고 생각했는데 몇번 테스트해보면서 써보니 그게 아닌 것 같아요.혹시 reoreder()가 정확히 어떻게 동작하는지 조금 더 자세히 설명해주실 수 있나요?또 reorder() 메서드에서 인자로 줄 수 있는 "XYZ", "YXZ", "XZY" 등등은 무슨 차이가 있는지 궁금합니다.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
강의를 이제 막 수강하고 있는데요~
강의 따라해서 만든 three.js 프로젝트를 제가 가지고 있는 spirng 프로젝트의 jsp페이지에서 include?? 하는 식으로 가져와서 사용하는 것이 어렵나요?호환이나 이런부분에 대해서 해결할 줄알아야 가능한걸까요?ㅠㅠspring 프로젝트를 톰캣에서 돌리고 메뉴를 클릭하였을 때 three.js 강의로 만든 페이지가 렌더링 되서 나왔으면 좋겠거든요.가능한 걸까요? 어떤식으로 하면 될지 힌트 좀 주실 수 있을까요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
이런 사이트를 올리려면 필요한 작업
안녕하세요 1분 코딩님 완강하고 저 만의 포트폴리오를 만들어보려고 노력하고 있습니다.다만 제가 이쪽 분야는 잘 몰라서 어떻게 올려야 할지 감이 안 잡힙니다. 일단 vultr 에서 서버를 구하고 가비아에서 도메인까지 1년으로 구매했는데 해도 html 하나 올려서 외부에 뿌리는 것도 어렵네요. 혹시 어떻게 해야 할지 조언을 구해도 될까요?
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
spotlght 빛 세기 이슈
이게 크롬에 따라 다른지 기기에 따라 다른지 모르겠지만 spotlight 빛이 1로 하면 거의 안 보이는 이슈가 있네요. 10000정도 해야 강의와 비슷하게 나옵니다. 코드가 잘못되었나 해서 spotlighthelper로 테스트 했습니다.
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
Studiomeal 소스코드가 궁금합니다.
안녕하세요! 클론코딩형식으로 studiomeal을 구현해보고싶은데 방명록 작성이나 동영상을 띄우는 부분이 너무 궁금해서 혹시 소스가 오픈되어있는지 궁금합니다.! 추가적으로 해보려고 하는게 사용자가 사진과 제목과 내용을 작성하면 이미지, 제목, 내용이 액자처럼 되어서 마치 미술관에 전시된 그림과 제목과 내용을 확인할 수 있는 것처럼 구현해보고 싶은데 조언 부탁드립니다!
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
물리엔진 사용
현재 모듈형으로 진행해오고 있었는데cannon-es.js의 경우 npm으로만 연결이 가능한건가요..?ㅠ
- 미해결Three.js로 시작하는 3D 인터랙티브 웹
선생님 강의 중에 사용하시는 그림판 궁금해요!
맥북 그림판 켜서 그림 그려주시는데 어떤 앱인지 궁금합니다!!
- 해결됨Three.js로 시작하는 3D 인터랙티브 웹
색칠 이후에 적용이 되지않습니다...
색칠 이후에 오브젝트 모드로 진입하면 캐릭터에 적용이 되지 않습니다...
- 미해결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 인터랙티브 웹
npm 에러가 발생합니다 ㅠㅠ
scroll_page도, scroll_page_fin도 npm으로 필요한거 다 설치하고 npm start했을때 자꾸 이런 에러가 발생합니다 ㅠㅠ 캡쳐는 scroll_page_fin 에서 npm start를 해본 경우입니다...ㅠㅠㅠㅠㅠ....약 한시간동안 이것저것 찾아봤는데 낫놓고 기역자 모르는 상황이라 공중제비를 돌 것 같아서 질문을 남깁니다...ㅠㅠ
- 미해결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 인터랙티브 웹
캐릭터에 빛이 반대로 비쳐져요
선생님이 만든 캐릭터는 캐릭터에 그림자가 정상적으로 생기던데, 제가 만들면서 빠뜨린 게 있을까요?