ODeorain

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

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

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

npm 에러가 발생합니다 ㅠㅠ

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

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

<p>와 덕분에 재귀적으로 이진법 변환하는거 배워갑니다!!&nbsp;<br />작성해주신 코드 보면서 중복되는 부분이 있어서 더 줄여봤어요!</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">toBinary</span>(<span style="color: #9cdcfe;">val</span>){</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">val</span> = <span style="color: #dcdcaa;">parseInt</span>(<span style="color: #9cdcfe;">val</span>);</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #c586c0;">if</span>(<span style="color: #9cdcfe;">val</span> <= <span style="color: #b5cea8;">1</span>){<span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">String</span>(<span style="color: #9cdcfe;">val</span>);}</div>
<br />
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">quotient</span> = <span style="color: #4ec9b0;">String</span>(<span style="color: #dcdcaa;">parseInt</span>(<span style="color: #9cdcfe;">val</span> / <span style="color: #b5cea8;">2</span>));</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">remainder</span> = <span style="color: #4ec9b0;">String</span>(<span style="color: #9cdcfe;">val</span> % <span style="color: #b5cea8;">2</span>);</div>
<br />
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">toBinary</span>(<span style="color: #4fc1ff;">quotient</span>) + <span style="color: #4fc1ff;">remainder</span>;</div>
<div>}<span style="color: #6a9955;">//toBinary</span></div>
</div>

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

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

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

paused를 했을 때

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

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

ODeorain

投稿