티스토리 뷰

code/three.js

03. Basic scene

golee922 2021. 6. 27. 10:32
  • index.html 
    <!DOCTYPE html>
<html lang="en">
<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>03 - Basic Scene</title>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="./three.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
  • script.js
const scene = new THREE.Scene();

// Red cube
const geometry = new THREE.BoxGeometry(1, 1, 1); // geometry (the shape)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // material (how it looks)
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Sizes
const sizes = {
  width: 800,
  height: 600,
};

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
// first param : the field of view (fov) vertical vision angle 광각 표준 망원, degree로 표현
// second param : the aspect ratio 화면비, 가로 / 세로
camera.position.z = 3; // z going backwards, it takes our camera out of the box
//camera.position.x = 2; // x going right
//camera.position.y = 2; // y going up
scene.add(camera);

// Renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);

renderer.render(scene, camera);

결과

'code > three.js' 카테고리의 다른 글

06. Animations  (0) 2021.07.02
05. Transform objects  (0) 2021.06.27
What is WebGL?  (0) 2021.06.27
Three.js journey 시작!  (0) 2021.06.26