lookAt(mesh.position) 관련 질문입니다!

애니메이션이 계속 업데이트 되어야 변경된 GUI값을 화면에 반영할 수 있기 때문이 아닐까요...?function draw(){ renderer.render(scene,camera); renderer.setAnimationLoop(draw);camera.lookAt(mesh.position);}

npm 에러가 발생합니다 ㅠㅠ

챗지피티한테 이것저것 물어본 결과... 소스코드나 경로에 파일이 없는 문제는 아니고저 D드라이브에서 모자이크해놓은 해당 경로가 많이 복잡해서 발생한 문제 같습니다...ㅠㅠ이게 복불복인게 다른 강의는 문제가 안되는데 혹시나 해서 소스코드 받아보니, 13강 이후부터 실습예제 관련은 쭉 안되더라구요...ㅠㅠ...그냥 바탕화면에서 해보니 문제가 발생하지 않았습니다.정리벽이 있어서 폴더 분류하지 않으면 못참는데...낭패입니다 ㅠㅠ.....

OrbitControls가 VS code Live Server에서는 동작을 안합니다

[섹션1.three.js의 기본 요소 익히기]에서 [(참고) npm, webpack을 사용하지 않고 개발하는 방법]강의 영상대로 진행하셨는데도 안되시는건가요? 💦1. OrbitControls.js 파일의 가장 첫부분 (대략 9행)에 경로를 three에서 three.module.js파일이 있는 경로로 수정오빗컨트롤을 import 해오는 파일에서 경로가 올바른지 확인OrbitControls.js 파일이 2에 설정한 경로에 제대로 들어있는지 확인오빗컨트롤을 import 해오는 파일을 html script에서 불러올 때 type="module"인지 확인

2진법 변환 재귀적 접근 방법에 관해 질문 있습니다.

와 덕분에 재귀적으로 이진법 변환하는거 배워갑니다!! 작성해주신 코드 보면서 중복되는 부분이 있어서 더 줄여봤어요! function toBinary(val){ val = parseInt(val); if(val 1){return String(val);} const quotient = String(parseInt(val / 2)); const remainder = String(val % 2); return toBinary(quotient) + remainder; }//toBinary

패스와 로고를 반대로 마스킹 해도 결과는 같

paused를 했을 때

일단 작성하신 코드에서 keyframes 안에도 transform:translate(값) scale(1); 하시고.box:hover{transform:translate(값) scale(1.3); } 이런식으로 해주셔야 css 자체 충돌이 나지 않아요.그치만 테스트를 해보니 역시 되지 않네요 ㅎㅎ혹시나 해서 자바스크립트로 현재 translate의 값을 가져와서 강제로 반영시키면 되지 않을까 해서 해봤지만... 그래도 동작하지 않네요.아마 animation-play-state를 pause시키면 keyframes 안에 정의된 속성들은 후에 아무리 몇번이고 선언해도 강제로 멈춰버리는것 같아요. 만일 정말로 마우스를 올렸을 때 1) 움직임을 멈추고 2) 크기는 키우고 싶으시다면keyframes에서 움직이는걸 left, top값으로 하고, hover시 transform scale 값 주기또는keyframes에서 움직이는걸 transform의 translate 값으로 하고, hover시 width height 변화 주기 둘중에 하시면 될 것 같아요. 다음은 1번으로 진행한 예제입니다.background 색이 변하다 마는거 보시면 바로 이해하실거에요 DOCTYPE html> html lang="ko"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>마우스 올리면 멈추고 커짐title> style> *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;height:100vh;overflow:hidden;} #myDiv{ position:fixed; display:flex; justify-content:center; align-items:center; width:200px;height:200px; background:yellow; border:2px solid black; animation:moveBox 3s linear infinite alternate; transition:transform .5s; } @keyframes moveBox { 0%{left:0;top:0;} 50%{left:50%;top:0;} 100%{left:50%;top:50%; background:coral;} } #myDiv:hover{ animation-play-state:paused; transform:scale(2); color:white; background:black; /* keyframes 안의 속성들은 제대로 작동하지 않습니다. */ } style> head> body> div id="myDiv">HELLO WORLDdiv> body> html>

만일 위치를 일일히 계산하기가 귀찮으시다면 사용자지정 CSS를 사용해보세요

질문이 있어요! ㅜ

transform-origin이라는 속성도 있었어요 ^_^ 모든 속성 transform-origin 기본값은 center center에요 만일 질문자님처럼 transform Z축 자체에 왼쪽 오른쪽 위 아래를 변경하고 싶으시면 transform-origin의 값을 변경하시면 됩니다.근데 세월이 많이 지나서 이정도는 이미 알고계실것 같네여 ㅎㅎㅎhttps://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

transform-origin을 써서 왼쪽벽 오른쪽벽 세워도 되겠죠??