transform rotation 강의를 보고 궁금한 점 문의합니다.mesh의 중심으로 회전이 되고 있는데,회전의 기준점을 바꿀 수 있는지 질문 드립니다.

웹팩(Webpack) 살펴보기 강좌를 진행 중에 있습니다. node.js는 20.11.1 LTS를 다운로드받아서 설치했습니다. 여기서 서버를 구동하기 위해, 터미널에서 npm start를 입력하면 아래와 같은 에러가 발생하고 더 이상 진행되지 않습니다.어떻게 문제를 해결해야 할까요? 

물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.

계속 이렇게 오류가 떠서 캐시 지워서 해보고 다시 설치도 해보고 명령어도 입력해봐도 해결이 안되네요 ㅜㅜ뭐가 문제일까요..

영상 : [손쉬운 조작 OrbitControls] 에서 three의 경로 설정 중 THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163WebGL 1 지원은 r153에서 사용 중단되었으며 r163에서 제거될 예정입니다.라는 메세지가 나왔습니다. 질문 : 이게 나중에는 오류가 날 수 있다는 뜻인가요? 맞다면 어떻게 대비를 해야 하는지 궁금합니다.

 현재 [섹션0]까지 수강 완료하였습니다.index.html 파일 실행 시 이렇게 CORS 문제가 발생됩니다.어떻게 해결할 수 있을까요?ㅠㅠ

renderer에서 camera를 render 해주는데, scene에 add가 꼭 필요한건지 궁금해요!scene.add(camera) 를 지웠을 때도 에러메세지 없이 잘 작동이 되는 것 같은데 필요한 코드인가요?만약 필요한 코드라면, scene에 add 된 light와 mesh는 왜 따로 render을 해주지 않는건가요?

사용방법 3 듣는중인데요 main.css를 연결하려고 하는데 저렇게 뜨는데 무슨 문제일까요?

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님. 강의 따라하다가 색상이 너무 이상해서 문의드립니다. 제가 따라한 코드가 이상한 건가 싶어서 완성파일 main.js를 실행했는데 똑같이 색상이 이상합니다. 수정방향을 알려주시면 감사하겠습니다.

PlaneGeometry 브라우저 화면 크기에 맞게 셋팅하는 법이 있을까요? width, height를 계산해서 넣어야하는데 계산식이 어떻게 되는지 모르겠네요...OrthographicCamera를 사용 중입니다!답변 주시면 감사하겠습니다!  

Mesh에 Camera를 붙일 수 있나요??아니면 아래 선생님 사이트처럼 동영상 대신 해당 위치에 Camera를 셋팅할 수 있나요??답변 부탁드리겠습니다!!!

강의 너무 재밌게 잘 듣고 있습니다!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');  

안녕하세요. 1분코딩 선생님 강의를 수강 중인 수강생입니다. 현재 아래 사이트의 화면과 비슷한 기능을 구현해야 하는 상황인데 어떤 카메라 컨트롤을 써야 할지 감이 잡히지 않아 질문 드립니다...https://www.lamborghini.com/en-en/3dFlyControls와 PointerLockControls로 테스트를 해보았는데 FlyControls의 경우는 비슷하게 구현은 되었지만 화면을 계속 움직이다보면 화면이 기울어버리는 경우가 생기고,PointerLockControls의 경우는 움직이려면 lock(); 함수를 실행시키면 마우스가 사라져서 문제가 되었습니다.카메라 컨트롤 셋팅은 glb파일의 카메라 객체를 넣어 생성하였습니다.위의 사이트와 비슷한 기능을 만들려면 어떤 카메라 컨트롤러가 적합할까요...?카메라 객체로 컨트롤 셋팅을 하고 따로 셋팅을 해줘야하는 값들이 있을까요...?답변 및 조언 주시면 정말 감사하겠습니다!

위의 사진처럼 강의보다 훨씬 밝게 나오는데 문제가 무엇일까요..? 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(); }

아무것도 뜨지 않습니다 왜그럴까요?

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(); }

제가 3D를 잘 몰라서 그런지 강사님이 설명해주신것과 실제 화면상의 결과물이 다소 다르게 보입니다.제가 생각한 것으로는 reorder() 메서드를 사용하면 mesh의 각 면의 x, y, z 방향을 재정리해서 y축 방향으로 45도 돌아간 상태가 새로운 기준이 된다고 생각했는데 몇번 테스트해보면서 써보니 그게 아닌 것 같아요.혹시 reoreder()가 정확히 어떻게 동작하는지 조금 더 자세히 설명해주실 수 있나요?또 reorder() 메서드에서 인자로 줄 수 있는 "XYZ", "YXZ", "XZY" 등등은 무슨 차이가 있는지 궁금합니다.

강의 따라해서 만든 three.js 프로젝트를 제가 가지고 있는 spirng 프로젝트의 jsp페이지에서 include?? 하는 식으로 가져와서 사용하는 것이 어렵나요?호환이나 이런부분에 대해서 해결할 줄알아야 가능한걸까요?ㅠㅠspring 프로젝트를 톰캣에서 돌리고 메뉴를 클릭하였을 때 three.js 강의로 만든 페이지가 렌더링 되서 나왔으면 좋겠거든요.가능한 걸까요? 어떤식으로 하면 될지 힌트 좀 주실 수 있을까요?

안녕하세요 1분 코딩님 완강하고 저 만의 포트폴리오를 만들어보려고 노력하고 있습니다.다만 제가 이쪽 분야는 잘 몰라서 어떻게 올려야 할지 감이 안 잡힙니다. 일단 vultr 에서 서버를 구하고 가비아에서 도메인까지 1년으로 구매했는데 해도 html 하나 올려서 외부에 뿌리는 것도 어렵네요. 혹시 어떻게 해야 할지 조언을 구해도 될까요?

이게 크롬에 따라 다른지 기기에 따라 다른지 모르겠지만 spotlight 빛이 1로 하면 거의 안 보이는 이슈가 있네요. 10000정도 해야 강의와 비슷하게 나옵니다. 코드가 잘못되었나 해서 spotlighthelper로 테스트 했습니다.