글

작성일자

three.js에서 폴리곤, 폴리라인 그리기

three.js에서 폴리곤(Polygon)을 렌더링하는 코드입니다. 선의 굵기에 대한 API는 지원하지만 실제로 반영되지 못하는 점이 아쉽습니다.

const starShape = new THREE.Shape();
starShape.moveTo(0, 5);
starShape.lineTo(1, 1);
starShape.lineTo(5, 0);
starShape.lineTo(1, -1);
starShape.lineTo(0, -5);
starShape.lineTo(-1, -1);
starShape.lineTo(-5, 0);
starShape.lineTo(-1, 1);

const geometry = new THREE.ShapeGeometry( starShape );
const material = new THREE.MeshBasicMaterial( { 
    color: 0x00ff00, 
    wireframe: true 
});

const mesh = new THREE.Line( geometry, material ) ;
scene.add( mesh );

this.mesh = mesh;

실행 결과는 다음과 같습니다.

다음은 폴리라인(Polyline)을 렌더링하는 코드입니다. 마찬가지로 선의 굵기 지정을 위해 값을 설정해도 굵기는 항상 1로 표현됩니다.

const points = [
    new THREE.Vector3(-10, -5, 0), // {x: -10, y: -5, z: 0},
    new THREE.Vector3(-3, 5, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(3, 5, 0),
    new THREE.Vector3(10, -5, 0)
    ];

const geometry = new THREE.BufferGeometry()
geometry.setFromPoints(points);

const material = new THREE.LineBasicMaterial({color: 0xffff00, linewidth: 3});

const line = new THREE.Line(geometry, material);
scene.add(line);

실행 결과는 다음과 같습니다.

작성일자

three.js start project 코드

자바스크립트의 모듈 기반으로 three.js를 도입하기 위한 뼈대입니다. App이라는 클래스를 하나 만들 것이고 이 App 클래스를 통해 three.js의 초기화 및 정육면체를 회전시켜 보겠습니다.

먼저 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="app.js">
</head>
<body>
</body>
</html>

DOM은 없고 css와 js 파일만을 참조하고 있습니다. DOM은 js 파일인 app.js에서 동적으로 추가해 줍니다. 먼저 css에 대한 style.css 파일의 코드는 다음과 같습니다.

* {
    outline: none;
    padding: 0;
    margin: 0;
}

3차원 출력이 웹 브라이저 전체 화면을 차지하는 경우라면 html과 css는 변경되지 않으며 모든 작업은 js 파일에서 처리됩니다. 이제 app.js 파일을 살펴보면 다음과 같습니다.

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.module.min.js'

class App {
    constructor() {
        this.initialize();
        this.render();
    }

    initialize() {}
    update() {}
    render() {}
    resize() {}
}

window.onload = function() {
    new App()
}

App 클래스는 4개의 매서드를 갖습니다. initialize는 WebGL을 위한 객체 초기화 및 Mesh, Camera, 화면 크기 변경에 따른 이벤트 등록을 담당하는데 코드는 다음과 같습니다.

initialize() {
    this.domWebGL = document.createElement('div');
    document.body.appendChild(this.domWebGL);

    let scene = new THREE.Scene();
    let renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0x000000, 1.0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    this.domWebGL.appendChild(renderer.domElement);  
    window.onresize = this.resize.bind(this); 

    let cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    let cubeMaterial = new THREE.MeshNormalMaterial();
    let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;

    scene.add(cube);

    let camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.x = 3;
    camera.position.y = 3;
    camera.position.z = 3;
    camera.lookAt(scene.position);
    scene.add(camera);

    this.camera = camera;
    this.renderer = renderer;
    this.scene = scene;
    this.cube = cube;
}

render 매서드는 실제 3차원 화면을 렌더링을 수행하며 애니메이션 처리를 위해 내부적으로 update를 호출합니다. 이 두 매서드는 다음과 같습니다.

update() {
    this.cube.rotation.x += 0.01;
    this.cube.rotation.y += 0.02;
}

render() {
    this.update();
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.render.bind(this));

}

웹 브라우저의 크기가 변경될 때 3차원 렌더링 되는 화면 크기도 그에 맞춰 변경해줘야 합니다. 이를 위한 resize 매서드는 다음과 같습니다.

resize() {
    let camera = this.camera;
    let renderer = this.renderer;
    let scene = this.scene;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
}

실행해 보면 아래처럼 정육면체의 매쉬가 회전하는 화면을 볼 수 있습니다.

작성일자

JavaScript로 웹 브라우저의 콘솔 로그(Console Log) 스타일 지정하기

자바스크립트로 웹 앱을 개발할 때 디버깅 방법 중 콘솔에 필요한 로그를 출력하는 것은 매우 유용합니다. 이런 유용함에 더해 원하는 로그에 대한 문자열의 색상 등과 같은 스타일을 지정할 수도 있는데요. 아래의 코드가 바로 그 예시입니다.

console.log(
    '%cHello %cWorld. %cMy Name is %cDip2K.', 
    'color: red', 
    'color: yellow',
    'color: gray',
    'color: white;font-weight: 900'
)

출력 결과는 다음과 같습니다.

작성일자

backdrop-filter로 반투명 효과 주기

유리 효과는 현대적인 UI를 개발하는데 사용하는 효과 중 대표적인 기술 중 하나입니다. 아래와 같은 결과를 얻고자 합니다.

먼저 DOM 요소입니다.

다음은 스타일 요소입니다.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 700px;
    height: 250px;
    position: relative;
}

div div {
    position: absolute;
    display: inline-block;
}

.left-circle {
    left: 0px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(#f9d924, #ff2c24)
}

.right-circle {
    right: 0px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(#01d6ff, #0f24f9)
}

.center-box {
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 250px;
    border-radius: 45px;
    z-index: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.1);
}