3D 큐브를 그리는 three.js의 자세한 예-JS 튜토리얼-php.cn

3D 큐브를 그리는 three.js의 자세한 예

小云云

풀어 주다： 2017-12-19 16:34:12

원래의

2898명이 탐색했습니다.

이 글에서는 3D 큐브를 그리는 방법을 three.js를 통해 자세히 설명하겠습니다. Three.js는 오른쪽 좌표계를 기반으로 간단하거나 더 복잡한 3차원 그래픽을 생성하고 적용할 수 있는 3D JavaScript 라이브러리입니다. 다채로운 질감과 재료를 추가할 수 있습니다. 광원을 사용하면 3D 장면에서 개체를 이동하거나 스크립트 애니메이션 등을 추가할 수 있습니다. 이번 글에서는 three.js를 이용하여 3D 큐브를 그리는 방법을 소개하고 있으니 필요하신 분들은 참고하시면 됩니다.

소개

three.js는 WebGL 프레임워크로 캔버스에 3D 효과를 구현할 수 있습니다. 3D 효과의 구현은 중국에서는 아직 비교적 새로운 일이고 참고할 수 있는 정보가 많지 않습니다. 이 글은 3D 큐브를 그리는 방법을 소개하는 소개글일 뿐입니다.

Three.js의 기본 개념

Three.js에는 장면, 카메라, 렌더러의 3가지 기본 개념이 포함되어 있습니다.

장면은 그려야 하는 객체이고, 카메라는 보는 각도를 나타내며, 렌더러는 그리기의 전달자입니다(브라우저의 DOM 요소에 연결할 수 있음).

즉, 우리는 촬영합니다. 카메라를 통해 장면을 그린 다음 대상 매체로 이동합니다.

장면, 카메라 및 렌더러 만들기

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

로그인 후 복사

위 코드는 먼저 장면을 만든 다음 PerspectiveCamera(입체 카메라)를 만든 다음 WebGL 렌더러를 만듭니다(Three.js는 3D가 아닌 Canvas 2D 렌더러도 지원합니다). 그런 다음 HTML 문서 본문의 DOM 하위 요소에 연결합니다.

소개 후에 먼저 구현 렌더링을 보여드리겠습니다.

이것은 구현 렌더링입니다. 꽤 3차원적이죠?

그리기 전 준비

코드 작성 전 먼저 최신 three.js 프레임워크 패키지를 다운로드하고 자신만의 페이지를 소개해야 합니다.

구체적인 구현 과정

캔버스를 준비하세요

이 캔버스는 위 사진의 검은색 박스인 3차원 정사각형 전체를 표시하는 캔버스입니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相机</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script src="./libs/three.min.js"></script>
</body>
</html>

로그인 후 복사

그리기 아이디어 지우기

다음 그리기 프로세스에는 캔버스, 장면, 카메라, 렌더러 등 여러 개념이 포함됩니다.

그리기 과정의 코드를 더 잘 이해하고 기억을 돕기 위해 먼저 다음 개념을 이해합니다.

지금 여행 중인데 아주 아름다운 그림을 보고 이 3D 세계를 그리고 싶다고 가정해 보세요. 기록해 보세요