분류 전체보기15 [html/css] div와 span의 차이 div는 가능한 모든 가로 면적을 100%활용하는 반면, span은 최소한의 필요한 면적만 차지한다. 예시를 들어 확인해보면 width값을 지정하지 않았을 때, div와 span은 아래와 같이 나타난다. 코드(접은 글) 더보기 html div span css .box{ /*design*/ background-color: pink; } div span div는 알아서 자리를 채워줘야 할 때 유용하고 span은 내용에 적합한 자리만 필요할 때 유용할 것이다 2023. 10. 15. [three js] 외부 3d 객체 불러오기 [0. 초기 설정] 1. 3d모델 - 별star 모양을 렌더링하기 위해 3d 객체를 블렌더를 통해 만들었다. 앞 옆 위 - 아래 첨부파일을 통해 다운받으면 된다 - 이때 프로젝트 파일 내에 3dmodel이라는 폴더를 새로 생성하여 옮겨준다 기초 코드 (접은 글) 더보기 index.html star.js import * as THREE from 'three'; //exposure const scene = new THREE.Scene(); scene.background=new THREE.Color('0xffffff');//배경화면을 하얀색으로 미리 바꿨다 //camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.inn.. 2023. 10. 15. [three js] 개체 위치 설정하기, 이동시키기 [0. 선요약] 1. 화면에 보이는 모습을 정리하면 아래와 같음 "정면"에서 보는 화면 "위"에서 보는 화면 2. 위치 변경은 다음과 같이 가능하다 (1) x, y, z를 각각 바꾸기 개체.position.setX(x위치); 개체.position.setY(y위치); 개체.position.setZ(z위치); (2) x, y, z를 한 번에 바꾸기 개체. position.set(x위치, y위치, z위치); [1. 개체(카메라, 3d모델)의 초기 위치] 아래와 같이 코드를 작성하면, 정육면체가 전혀 보이지 않는다. 코드 보이는 화면 - 그 이유는 카메라와 개체(큐브) 모두 중앙에 위치하고 있기 때문이다. - alert를 사용해 개체(큐브)의와 카메라의 위치를 확인해보았다 alert로 박스 위치 확인하기 박스 .. 2023. 10. 9. [three js] 정육면체 렌더링하기 [three js] 카메라, 렌더링 (tistory.com) [1. 큐브 생성] 1. BoxGeometry(width, height, depth) - 큐브를 생성하는 기능 - width = 너비 - height = 높이 - depth = 깊이 2. MeshBasicMaterial() - 객체의 색상 설정 3. Mesh - 객체에 재질을 적용하고 움직일 수 있게 하는 역할 4. scene.add(객체) - scene=THREE.Scene - 장면에 객체 삽입 5. 코드 - BoxGeometry의 명칭 = geometry - MeshBasicMaterial의 명칭 = material - Mesh의 명칭 = cube // main.js const geometry = new THREE.BoxGeometry(1,.. 2023. 9. 5. [three js] 카메라, 렌더링 [three js] npm 기반 불러오기 (tistory.com) [1. Camera] "정면"에서 보는 화면 "위"에서 보는 화면 1. PerspectiveCamera - 3D객체를 보여주기에 가장 적합한 카메라 기능 - PerspectiveCamera(fov, aspect ratio, near, far) - fov(field of view) = 시야각: 화면이 보이는 정도, 정도를 높일 수록 카메라와 화면이 가까워진다. 시야각 : 60 시야각 : 90 - aspect ratio = 종횡비: 화면 너비와 높이의 비율 - near, far: near보다 가까이에 있거나 far보다 멀리에 있는 물체는 보이지 않도록 설정 (생략 가능) 2. 코드 - 명칭은 camera로 한다. // main.js const.. 2023. 9. 5. [three js] npm 기반 불러오기 [1. 준비사항] 1. node.js - npm으로 three js를 설치해야한다 2. visual studio code - 폴더명: threeTutorial - main.js - index.html (기본 코드: 접은 글) 더보기 [2. three js 설치] 1. threeTutorial에서 터미널을 연다 2. 터미널에 npm install --save three 입력 3. 터미널에 npm install --save-dev vite 입력 4. 위 두가지 설치가 완료되면 node_modules/ 와 package.json 이 설치된다. 5. 터미널에 npx vite 입력 6. 설치가 완료되면 아래와 같이 뜨고, http://localhost:5173 는 작품이 실행되는 페이지로 ctrl+click으로 .. 2023. 9. 5. 이전 1 2 다음
