묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Mesh에 Camera를 붙일 수 있나요??
Mesh에 Camera를 붙일 수 있나요??아니면 아래 선생님 사이트처럼 동영상 대신 해당 위치에 Camera를 셋팅할 수 있나요??답변 부탁드리겠습니다!!!
-
해결됨친절한 블렌더 - [LV.1] 기초 모델링
화분 Origin과 Plane Origin이 같아요
-8:08, 화분에 가운데에 맞춰 Plane도 정확히 화분 가운데에 위치해서, 모양을 만들 수가 없어요.
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
reorder('YXZ') 동작
강의 너무 재밌게 잘 듣고 있습니다!roatation에서 reorder를 했을때 어떻게 동작하는 것인지 정확히 이해가 가지 않아서 질문 남겨봅니다~reorder('YXZ') 는 어떤 것을 위해 설정한 것인지, YXZ 순서가 무엇을 의미하는지 궁금합니다~ (rotation.x, rotation.y 로 값을 설정하는데, YXZ 순서는 어떤 것을 설정해주는 것인지요?)아래 코드처럼 테스트했을때, 1,2번 위치에 설정했을때는 잘 동작하고, 마지막에 설정했을때는 기존처럼 동작하는데, reorder() 해주는 위치도 궁금합니다. (한번 설정하면 계속 동작하는 것인지?)// 1. 회전 전에 설정 mesh.rotation.reorder('YXZ'); mesh.rotation.y = THREE.MathUtils.degToRad(45); // 2. 중간에 설정 mesh.rotation.reorder('YXZ'); mesh.rotation.x = THREE.MathUtils.degToRad(20); // 3. 마지막에 설정 mesh.rotation.reorder('YXZ');
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
카메라 컨트롤을 어떤 걸 사용해야 할지 모르겠습니다...!
안녕하세요. 1분코딩 선생님 강의를 수강 중인 수강생입니다. 현재 아래 사이트의 화면과 비슷한 기능을 구현해야 하는 상황인데 어떤 카메라 컨트롤을 써야 할지 감이 잡히지 않아 질문 드립니다...https://www.lamborghini.com/en-en/3dFlyControls와 PointerLockControls로 테스트를 해보았는데 FlyControls의 경우는 비슷하게 구현은 되었지만 화면을 계속 움직이다보면 화면이 기울어버리는 경우가 생기고,PointerLockControls의 경우는 움직이려면 lock(); 함수를 실행시키면 마우스가 사라져서 문제가 되었습니다.카메라 컨트롤 셋팅은 glb파일의 카메라 객체를 넣어 생성하였습니다.위의 사이트와 비슷한 기능을 만들려면 어떤 카메라 컨트롤러가 적합할까요...?카메라 객체로 컨트롤 셋팅을 하고 따로 셋팅을 해줘야하는 값들이 있을까요...?답변 및 조언 주시면 정말 감사하겠습니다!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
강의에서 나온 이미지 색상보다 더 밝게 나와요
위의 사진처럼 강의보다 훨씬 밝게 나오는데 문제가 무엇일까요..? import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // ----- 주제: 여러 이미지 텍스쳐가 적용된 큐브 export default function example() { // 로딩 매니저 const loadingManager = new THREE.LoadingManager(); loadingManager.onStart = () => { console.log("시작"); }; loadingManager.onLoad = () => { console.log("로드 완료"); }; loadingManager.onProgress = (img) => { console.log(img + "로드 중"); }; loadingManager.onError = () => { console.log("로드 에러"); }; // 텍스쳐 이미지 로드 const textureLoader = new THREE.TextureLoader(loadingManager); const rightTex = textureLoader.load("/textures/mcstyle/right.png"); const leftTex = textureLoader.load("/textures/mcstyle/left.png"); const topTex = textureLoader.load("/textures/mcstyle/top.png"); const bottomTex = textureLoader.load("/textures/mcstyle/bottom.png"); const frontTex = textureLoader.load("/textures/mcstyle/front.png"); const backTex = textureLoader.load("/textures/mcstyle/back.png"); const materials = [ new THREE.MeshBasicMaterial({ map: rightTex }), new THREE.MeshBasicMaterial({ map: leftTex }), new THREE.MeshBasicMaterial({ map: topTex }), new THREE.MeshBasicMaterial({ map: bottomTex }), new THREE.MeshBasicMaterial({ map: frontTex }), new THREE.MeshBasicMaterial({ map: backTex }), ]; // 픽셀화 rightTex.magFilter = THREE.NearestFilter; leftTex.magFilter = THREE.NearestFilter; topTex.magFilter = THREE.NearestFilter; bottomTex.magFilter = THREE.NearestFilter; frontTex.magFilter = THREE.NearestFilter; backTex.magFilter = THREE.NearestFilter; // 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); // 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.y = 1.5; camera.position.z = 4; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight("white", 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight("white", 1); directionalLight.position.set(1, 1, 2); scene.add(directionalLight); // Controls const controls = new OrbitControls(camera, renderer.domElement); // Mesh const geometry = new THREE.BoxGeometry(2, 2, 2); const mesh = new THREE.Mesh(geometry, materials); scene.add(mesh); // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); 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 인터랙티브 웹
three.js 사용방법 1
아무것도 뜨지 않습니다 왜그럴까요?
-
미해결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(); }
-
미해결[LV1] 왕초보 이펙트 (VFX) 기초부터 튼튼하게! (UE5, Blender)
Targa로 저장하려니 이런 옵션
Targa로 저장하려니 이런 옵션이 뜨는데, 강사님은 어떤 걸로 저장하시나요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
섹션3. 회전 강의에서 reorder 메서드가 잘 이해되지 않습니다.
제가 3D를 잘 몰라서 그런지 강사님이 설명해주신것과 실제 화면상의 결과물이 다소 다르게 보입니다.제가 생각한 것으로는 reorder() 메서드를 사용하면 mesh의 각 면의 x, y, z 방향을 재정리해서 y축 방향으로 45도 돌아간 상태가 새로운 기준이 된다고 생각했는데 몇번 테스트해보면서 써보니 그게 아닌 것 같아요.혹시 reoreder()가 정확히 어떻게 동작하는지 조금 더 자세히 설명해주실 수 있나요?또 reorder() 메서드에서 인자로 줄 수 있는 "XYZ", "YXZ", "XZY" 등등은 무슨 차이가 있는지 궁금합니다.
-
해결됨블렌더 3D 아이소메트릭 방 만들기
수강 완료
강의 잘 들었습니다:)완전 만족!제 생각은 잠시 넣어두고 강의랑 최대한 비슷한 느낌으로 만들어봤어요~아 그리고 궁금한 게 있는데,블렌더 이용해서 갈 수 있는 분야가 어떻게 될까요? (취업)얼마전까지 게임 캐릭터 모델링 작업을 하다가 최근 블렌더에 관심이 생겨서 공부중인건데,생각해보니까 굳이 게임 쪽 아니더라도 상관 없을 것 같아서요!도넛 가게 강의도 들을 예정인데 기대중이에요:)좋은 강의 감사합니다!
-
해결됨친절한 블렌더 - [LV.0] 입문 필수
재밌었어요!
즐거운 시간이었습니다~!다음 강의 듣고싶어요 올라왔을까요?
-
해결됨친절한 블렌더 - [LV.0] 입문 필수
수업노트는 어디에서 다운 받나요?
아래와 같은 방법으로 해보시고 상황을 자세하게 적어서 질문해주세요.1. Ctrl Z로 몇 번 실행취소를 한 다음에 다시 만들어보기2. 해당 오브젝트만 지우고 새로 만들기3. (필수 아닌 권장) 새 파일을 열어서 전부 새로 만들기 블렌더 특성상 새로 만들면 옵션이 초기화되기 때문에 잘못 선택했던 옵션들이 원래대로 돌아가기 때문에 잘 작동할 수도 있고 배우는 과정에서 여러 번 만들면 익숙해지는데 도움이 되기 때문에 추천합니다. 지금까지 만든게 너무 아깝거나 내가 틀린 이유가 궁금하다면 이 과정은 패스해도 됩니다! 4. 막힌 부분의 시간(예를들면 3:24)과 안 되는 부분과 현상을 자세히 써주셔야 해결이 빠릅니다. - 3:24, 여기서 막혔어요 (X) - 3:24, 영상에서는 원형인데 저는 타원형으로 만들어져요. (O) - 3:24, 베벨과 익스투르드까지는 적용이 되는데 미러 모디파이어는 반응이 없어요. (O)
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
강의를 이제 막 수강하고 있는데요~
강의 따라해서 만든 three.js 프로젝트를 제가 가지고 있는 spirng 프로젝트의 jsp페이지에서 include?? 하는 식으로 가져와서 사용하는 것이 어렵나요?호환이나 이런부분에 대해서 해결할 줄알아야 가능한걸까요?ㅠㅠspring 프로젝트를 톰캣에서 돌리고 메뉴를 클릭하였을 때 three.js 강의로 만든 페이지가 렌더링 되서 나왔으면 좋겠거든요.가능한 걸까요? 어떤식으로 하면 될지 힌트 좀 주실 수 있을까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
이런 사이트를 올리려면 필요한 작업
안녕하세요 1분 코딩님 완강하고 저 만의 포트폴리오를 만들어보려고 노력하고 있습니다.다만 제가 이쪽 분야는 잘 몰라서 어떻게 올려야 할지 감이 안 잡힙니다. 일단 vultr 에서 서버를 구하고 가비아에서 도메인까지 1년으로 구매했는데 해도 html 하나 올려서 외부에 뿌리는 것도 어렵네요. 혹시 어떻게 해야 할지 조언을 구해도 될까요?
-
해결됨친절한 블렌더 - [LV.0] 입문 필수
완성작 공유합니다!
유튜브에서 떠돌며 이런저런 기초강좌를 보면서아무래도 흥미위주의 따라하기가 많다보니 기본 개념이 궁금해졌었습니다.어디서부터 어디까지를 기본개념으로 익혀야 하나 고민하다시작하다 말기를 여러차례 반복하다이 강의로 기본을 제대로 익힌것 같아 뿌듯합니다.강의를 보면서 몇번이나 '아~!', '그렇구나' 감탄을 했는지 모릅니다.다음강의도 잘 부탁드리겠습니다.결과물을 공유하며 질문을 드립니다.다음강의를 기다리며 나름대로 좀 더 공부를 해보고 더 알아보고 싶습니다.선생님께서 처음 블렌더를 접하시면서 자주 찾았던 다른 강좌나 튜토리얼, 커뮤니티등은 어떤게 있었나요?기다리는동안 봐두면, 들리면 좋을만한곳 알려주시면 열심히 예습 복습하고자 합니다!좋은강의 만들어 주셔서 감사합니다!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
spotlght 빛 세기 이슈
이게 크롬에 따라 다른지 기기에 따라 다른지 모르겠지만 spotlight 빛이 1로 하면 거의 안 보이는 이슈가 있네요. 10000정도 해야 강의와 비슷하게 나옵니다. 코드가 잘못되었나 해서 spotlighthelper로 테스트 했습니다.
-
해결됨친절한 블렌더 - [LV.0] 입문 필수
완성!
생각보다 이쁘네요 강의 잘 들었습니다.
-
해결됨친절한 블렌더 - [LV.0] 입문 필수
오브제 모델링2에서 shade auto smooth를 사용하신 이유가 궁금 합니다.
오브제 모델링2 14분 정도에서 shade smooth가 아니라 shade auto smooth를 사용하신 이유가 궁금 합니다. 강좌에서 큐브와 피라미드의 모서리과 꼭짓점을 둥글게 만들기 위해서 shade auto smooth를 사용하시는데 이 상황에서는 일부분을 각지게 하는 것이 아니라 모든 꼭짓점과 모서리를 둥글게 만들어야 하니까 shade smooth가 더 적합한 거 아닌가요?
-
해결됨블렌더 3D 아이소메트릭 방 만들기
침대 만들때 깨지는 오류
안녕하세요 선생님.강의 잘 보고 있습니다-!최근에 블랜더 프로그램에 관심이 생겨서 열심히 강의보면서 따라하고 있습니다 ^-^하다가 질문이 생겨서 질문 남깁니다!******************************************************************************************침대가 shade smooth 주면 위 첫번째 사진처럼 매번 다른 오류(?)가 뜨더라구요. 그래도 베벨을 주고 세그먼트를 늘리고 그냥 진행하면 아래 두 사진처럼 찌그러지는 현상이 생겨서 침대가 안만들어집니다..ㅠ 혹시 침대 머리 끝에 베벨 줄때 줄여놓은 버택스랑 만나서 그런것인지.. 아니면 너무 쫍게 만들어서인지,, 똑같이만들었는데 말이죠 :( 그리고 침대 머리 끝 선을 베벨을 주는데 위쪽 중심으로 줄어들어서 줄여놓은 선과 만나게 되더라구요 ? 강의와는 다르게,, 그래서 문제인지ㅠ 무엇이 문제인지 알고싶습니다 :(
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Studiomeal 소스코드가 궁금합니다.
안녕하세요! 클론코딩형식으로 studiomeal을 구현해보고싶은데 방명록 작성이나 동영상을 띄우는 부분이 너무 궁금해서 혹시 소스가 오픈되어있는지 궁금합니다.! 추가적으로 해보려고 하는게 사용자가 사진과 제목과 내용을 작성하면 이미지, 제목, 내용이 액자처럼 되어서 마치 미술관에 전시된 그림과 제목과 내용을 확인할 수 있는 것처럼 구현해보고 싶은데 조언 부탁드립니다!