728x90
Three.js – JavaScript 3D Library
threejs.org
Three.js 들어가기
왼쪽 메뉴바에 github클릭
code부분 클릭해서
Download ZIP 클릭해서 다운
다운받은 three.dev 압축 풀기
패키지 안에 static정적 폴더 만들고
다운받은 폴더 안에
build, examples, files를
static폴더 안에 복사한다.
그 이유는
해당 폴더의 경로를 못찾아서 페이지에서f12눌러 확인해보면
경로 설정하라고 나온다.
거기에 맞게 경로 설정하면 OK
여기까지 됬으면
static폴더 안에있는 examples(예시폴더를 실행해본다)
이렇게 실행되면 OK
그럼 이중 제일 만만한거 선택해서 연습해본다 연습방법은
만만한 html선택 복사해서 이름을 바꿔준다
나는 이렇게 지음
그럼 연습방법 설명해봄
복사해왔으면 오른쪽 클릭해서
Generic Text Editor로 연다
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
let camera, scene, renderer;
let mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 2;
scene = new THREE.Scene();
const texture = new THREE.TextureLoader().load( 'textures/채원.PNG' );
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
//가운데로 옮겨주는 명령어
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.z += 0.005;
//camera.position.z += 0.005;
//mesh.position.z += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
//renderer는 그림을 그려주는 것(scene과camera가 필요하다)
}
</script>
</body>
</html>그럼 이렇게 색이 있는 html코드로 열린다.
여기서 하나씩 주석처리 해가면서 뭐가 무엇인지 공부해가면서
ㄱㄱ
결과
'Python > Three.JS' 카테고리의 다른 글
| Three.js EX07 우주만들어보기 (0) | 2023.07.15 |
|---|---|
| Three.js EX05,EX06 SphereGeometry (0) | 2023.07.14 |
| Three.js EX04 PlaneGeometry (0) | 2023.07.14 |
| Three.js EX03 CylinderGeometry (0) | 2023.07.14 |
| Three.js EX02 CircleGeometry (0) | 2023.07.14 |
