JavaScript가있는 3D 엔진 구축

이 기사는 Tim Severien과 Simon Codrington이 검토 한 동료였습니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 동료 검토 자 덕분에! 웹 페이지에 이미지 및 기타 평평한 모양을 표시하는 것은 매우 쉽습니다. 그러나 3D 형상을 표시 할 때는 3D 지오메트리가 2D 지오메트리보다 복잡하기 때문에 사물이 덜 쉬워집니다. 이를 위해 WebGL 및 Three.js와 같은 전용 기술 및 라이브러리를 사용할 수 있습니다. 그러나 큐브와 같은 기본 모양을 표시하려면 이러한 기술이 필요하지 않습니다. 또한, 그들은 그들이 어떻게 작동하는지, 그리고 평면 화면에서 3D 모양을 표시 할 수있는 방법을 이해하는 데 도움이되지 않습니다.

. 이 튜토리얼의 목표는 WebGL없이 웹 용 간단한 3D 엔진을 구축 할 수있는 방법을 설명하는 것입니다. 먼저 3D 모양을 저장할 수있는 방법을 볼 것입니다. 그런 다음 두 가지 다른 견해로 이러한 모양을 표시하는 방법을 볼 수 있습니다. 키 테이크 아웃 JavaScript 만 사용하면 WebGL과 같은 고급 라이브러리가 필요하지 않고 간단한 3D 엔진을 만들 수 있으므로 큐브와 같은 기본 모양을 렌더링하는 데 적합합니다. 폴리 헤론은이 엔진 내 3D 모델링에 필수적이며, 복잡한 모양은 2D의 다각형과 유사한 평평한면을 사용하여 근사됩니다. 효율적인 메모리 관리는 정점을 복제하는 대신 정점에 대한 참조를 저장하여 달성되며, 각 정점이 여러면에서 공유되면서 메모리 사용량을 크게 줄입니다. 엔진은 정점에 직접 변경 사항을 적용하여 번역과 같은 형태의 기본 변환을 지원하며, 참조 시스템으로 인해 관련면을 자동으로 업데이트합니다.

. 두 가지 유형의 투영 방법에 대해 설명합니다. 깊이를 무시하여 3D에서 2D 변환을 단순화하는 직교 투영 및 깊이를 설명하고보다 현실적인 견해를 제공합니다.

. 렌더링은 디스플레이에서 모양의 올바른 위치와 방향을 보장하는 방법을 사용하여 3D 좌표를 2D로 돌출하고 캔버스에 그려주는 함수를 통해 처리됩니다.

3D 모양을 저장하고 변형시킵니다 모든 모양은 다면체입니다 가상 세계는 한 가지 주요 방식으로 실제 세계와 다릅니다. 예를 들어 화면에 완벽한 원을 표시 할 수 없습니다. 가장자리가 많은 일반 다각형을 그려서 접근 할 수 있습니다. 가장자리가 많을수록 "완벽한"원은 원입니다. 3D에서는 동일하며 다각형의 3D와 같은 3D와 함께 모든 모양에 접근해야합니다. 다면체 (구에서와 같이 곡선이 아닌 평평한면만을 찾는 3D 모양). 우리가 큐브처럼 이미 다면체 인 모양에 대해 이야기 할 때 놀라운 것은 아니지만 구와 같은 다른 모양을 표시하고 싶을 때 명심해야 할 사항입니다.

.

폴리 헤드론 저장 다면체를 저장하는 방법을 추측하려면 수학에서 그러한 일이 어떻게 식별 될 수 있는지 기억해야합니다. 당신은 확실히 학교 시절에 이미 기본적인 기하학을 해냈습니다. 예를 들어 사각형을 식별하려면 A, B, C 및 D가 사각형의 각 모서리를 구성하는 정점을 참조하는 ABCD라고 부릅니다. 3D 엔진의 경우 동일합니다. 우리는 모양의 각 정점을 저장하는 것으로 시작합니다. 그러면이 모양은 얼굴을 나열하고 각면은 정점을 나열합니다.

정점을 나타내려면 올바른 구조가 필요합니다. 여기서 우리는 정점의 좌표를 저장하는 클래스를 만듭니다.

이제 정점은 다른 개체와 마찬가지로 생성 될 수 있습니다.

다음으로, 우리는 다면체를 나타내는 클래스를 만듭니다. 큐브를 예로 들어 봅시다. 클래스의 정의는 다음과 같습니다.

이 클래스를 사용하여 중심과 가장자리의 길이를 표시하여 가상 큐브를 만들 수 있습니다.

큐브 클래스의 생성자는 표시된 중심의 위치에서 계산 된 큐브의 정점을 생성하여 시작합니다. 스키마가 더 명확하므로 우리가 생성하는 8 개의 정점의 위치를 ​​참조하십시오.

그러면 우리는 얼굴을 나열합니다. 각면은 정사각형이므로 각면에 4 개의 정점이 표시되어야합니다. 여기서 나는 배열이있는 얼굴을 대표하기로 결정했지만 필요한 경우 전용 클래스를 만들 수 있습니다.

얼굴을 만들 때 4 개의 정점을 사용합니다. 우리는 this.vertices [i] 객체에 저장되므로 그들의 위치를 ​​다시 표시 할 필요가 없습니다. 실용적이지만 우리가 그렇게 한 또 다른 이유가 있습니다.

기본적으로 JavaScript는 최소한의 메모리를 사용하려고합니다. 이를 달성하기 위해 함수 인수로 전달 된 객체를 복사하거나 배열에 저장하지 않습니다. 우리의 경우에는 완벽한 행동입니다.

<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span>    <span>this.x = parseFloat(x);
</span>    <span>this.y = parseFloat(y);
</span>    <span>this.z = parseFloat(z);
</span><span>};
</span>

실제로 각 정점에는 3 개의 숫자 (좌표)가 포함되어 있으며 추가 해야하는 경우 몇 가지 방법이 포함되어 있습니다. 각면마다 정점의 사본을 저장하면 많은 메모리를 사용합니다. 여기에서 우리가 가진 모든 것은 참고 자료입니다. 좌표 (및 기타 방법)는 한 번만 한 번만 저장됩니다. 각 정점은 세 가지 다른면에서 사용되므로 사본이 아닌 참조를 저장하여 필요한 메모리를 3 개 (더 이상)로 나눕니다! . 우리는 삼각형이 필요합니까? 이미 3D (예 : Blender와 같은 소프트웨어 또는 WebGL과 같은 라이브러리와 함께)와 함께 플레이 한 경우 삼각형을 사용해야한다고 들었을 것입니다. 여기서 나는 삼각형을 사용하지 않기로 선택했습니다. 이 선택의 이유는이 기사가 주제에 대한 소개이며 큐브와 같은 기본 모양을 표시하기 때문입니다. 삼각형을 사용하여 사각형을 표시하는 것은 우리의 경우 다른 어떤 것보다 합병증이 될 것입니다. 그러나보다 완전한 렌더러를 만들 계획이라면 일반적으로 삼각형이 선호된다는 것을 알아야합니다. 여기에는 두 가지 주된 이유가 있습니다 :

텍스처 : 얼굴에 이미지를 표시하려면 수학적 이유로 삼각형이 필요합니다. 이상한 얼굴 : 세 개의 정점이 항상 같은 평면에 있습니다. 그러나 같은 평면에 있지 않은 네 번째 정점을 추가 할 수 있으며이 4 개의 정점을 연결하는 얼굴을 만들 수 있습니다. 그러한 경우, 그것을 그려 보려면, 우리는 선택이 없습니다 : 우리는 그것을 두 개의 삼각형으로 나누어야합니다 (종이 한 장으로 시도하십시오!). 삼각형을 사용하면 컨트롤을 유지하고 분할이 발생하는 위치를 선택합니다 (알림에 감사드립니다!).

폴리 헤드론에서 작용 사본 대신 참조를 저장하는 데 또 다른 장점이 있습니다. 다면체를 수정하려면 이러한 시스템을 사용하여 필요한 수의 작업을 3으로 나눕니다. 이유를 이해하려면 수학 수업을 다시 한번 기억하겠습니다. 정사각형을 번역하고 싶을 때는 실제로 번역하지 않습니다. 실제로, 당신은 4 개의 정점을 번역하고 번역에 합류합니다.

. 여기, 우리는 똑같이 할 것입니다. 우리는 얼굴을 만지지 않을 것입니다. 우리는 각 정점에 원하는 작업을 적용하면 완료됩니다. 얼굴이 참조를 사용함에 따라 얼굴의 좌표가 자동으로 업데이트됩니다. 예를 들어, 이전에 만든 큐브를 어떻게 번역 할 수 있는지 확인하십시오.

이미지를 렌더링하는 우리는 3D 객체를 저장하는 방법과 그에 따라 행동하는 방법을 알고 있습니다. 이제 그들을 보는 방법을 볼 차례입니다! 그러나 먼저 우리가 할 일을 이해하기 위해 이론에 작은 배경이 필요합니다. 프로젝션 현재 3D 좌표를 저장합니다. 그러나 화면은 2D 좌표 만 표시 할 수 있으므로 3D 좌표를 2D 좌표로 변환하는 방법이 필요합니다. 이것이 수학의 투영이라고 부릅니다. 3D ~ 2D 프로젝션은 가상 카메라라는 새 개체로 제작 된 추상적 인 작업입니다. 이 카메라는 3D 객체를 가져 와서 좌표를 2D 객체로 변환하여 화면에 표시 할 렌더러로 보냅니다. 여기서 우리는 카메라가 3D 공간의 원점에 놓여 있다고 가정 할 것입니다 (따라서 좌표는 (0,0,0)).이 기사가 시작된 이래로 우리는 좌표에 대해 이야기했습니다. 그러나 좌표를 정의하기 위해서는 Z가 수직 좌표입니까? 상단 또는 하단으로 이동합니까? 사실은 당신이 원하는 것을 선택할 수 있기 때문에 보편적 인 대답과 협약은 없습니다. 명심해야 할 유일한 것은 3D 객체에서 행동 할 때 공식에 따라 변하기 때문에 일관성이 있어야한다는 것입니다. 이 기사에서는 위의 큐브 스키마에서 볼 수있는 기초를 선택했습니다. 이제 우리는해야 할 일을 알고 있습니다 : 우리는 (x, y, z) 기준으로 좌표를 가지고 있으며,이를 표시하려면 (x, z) 기준으로 좌표로 변환해야합니다. , 우리는 그것들을 표시 할 수 있습니다.

하나의 투영은 없습니다. 더 나쁜 것은, 무한한 수의 다른 예측이 존재한다! 이 기사에서는 실제로 가장 많이 사용되는 두 가지 유형의 투영을 볼 수 있습니다. 장면을 렌더링하는 방법

객체를 투사하기 전에 객체를 표시 할 함수를 작성해 봅시다. 이 함수는 렌더링 할 객체를 나열하는 배열, 객체를 표시하는 데 사용해야하는 캔버스의 컨텍스트 및 올바른 위치에 객체를 그리는 데 필요한 기타 세부 사항을 매개 변수로 받아들입니다.

. 배열에는 렌더링 할 여러 개체가 포함될 수 있습니다. 이 객체는 한 가지를 존중해야합니다. 이전에 만든 큐브와 같은 객체의 모든면을 나열하는 배열 인 Faces라는 공공 속성을 갖습니다. 이 얼굴은 무엇이든 할 수 있습니다 (정사각형, 삼각형 또는 원하는 경우) : 정점을 나열하는 배열이어야합니다.

. 기능에 대한 코드를 살펴보고 설명을 보자.

이 기능은 설명이 필요합니다. 더 정확하게는이 Project () 기능이 무엇인지, 그리고 이러한 DX 및 DY 인수가 무엇인지 설명해야합니다. 나머지는 기본적으로 객체를 나열한 다음 각면을 그리는 것 외에는 아무것도 아닙니다.

이름에서 알 수 있듯이 Project () 함수는 3D 좌표를 2D 좌표로 변환하기 위해 여기에 있습니다. 3D 공간에서 정점을 받아들이고 2D 평면에서 정점을 반환합니다.

좌표의 이름을 지정하는 대신 x와 z i는 z 코디네이트 이름을 y로 바꾸기 위해 여기서 선택했습니다. 2D 지오메트리에서 자주 찾을 수있는 전형적인 컨벤션을 유지하지만 원하는 경우 z를 유지할 수 있습니다. project ()의 정확한 내용은 다음 섹션에서 볼 수있는 것입니다. 선택한 투영 유형에 따라 다릅니다. 그러나이 유형이 무엇이든, 렌더 () 함수는 현재와 같이 유지 될 수 있습니다.

일단 비행기에 좌표가 있으면 캔버스에이를 표시 할 수 있습니다. 이것이 바로 우리가하는 일입니다. 약간의 속임수로 : 우리는 프로젝트 () 함수에 의해 반환 된 실제 좌표를 실제로 그리지 않습니다. 실제로, Project () 함수는 가상 2D 평면에서 좌표를 반환하지만 3D 공간에 대해 정의한 것과 동일한 원점을 갖습니다. 그러나 우리는 원점이 캔버스의 중심에 있기를 원합니다. 그래서 우리는 좌표를 번역하는 이유입니다. 정점 (0,0)은 캔버스의 중심에 있지 않지만 (0 dx, 0 dy)는 DX와 DY를 현명하게 선택하십시오. 우리가 원하는대로 (dx, dy)는 캔버스의 중심에 있기를 원합니다. 우리는 실제로 선택이 없으며 dx = canvas.width / 2 및 dy = canvas.height / 2를 정의합니다. 마지막으로, 마지막 세부 사항 : 왜 우리는 y를 직접 사용하지 않고 사용합니까? 대답은 우리가 선택한 기초입니다. z 축은 상단으로 향합니다. 그런 다음, 우리 장면에서 긍정적 인 z 좌표가있는 평결이 올라갑니다. 그러나 캔버스에서 y 축은 바닥으로 향합니다. 양의 y 좌표가있는 평면이 아래로 이동합니다. 그렇기 때문에 캔버스의 캔버스의 y 좌표를 우리 장면의 z 코디네이드의 반대로 정의해야합니다.

. 이제 render () 함수가 명확하므로 이제 project ()를 살펴볼 시간입니다. 직교보기

직교 투영부터 시작하겠습니다. 가장 간단하게, 우리가 할 일을 이해하는 것이 완벽합니다.

우리는 3 개의 좌표가 있으며, 우리는 단지 두 개만 원합니다. 그런 경우에 가장 간단한 일은 무엇입니까? 좌표 중 하나를 제거하십시오. 그것이 우리가 직교 관점에서하는 일입니다. 우리는 깊이를 나타내는 좌표를 제거합니다 : y 좌표. .

이제이 기사의 시작 이후로 우리가 쓴 모든 코드를 테스트 할 수 있습니다. 축하합니다, 당신은 평면 화면에 3D 객체를 표시했습니다!

이 기능은 아래의 라이브 예제에서 구현되며 마우스로 큐브를 회전시켜 큐브와 상호 작용할 수 있습니다. Codepen에서 Sitepoint (@SitePoint)의 PEN 3D 직교보기 참조. 때때로, 직교 관점은 우리가 원하는 것입니다. 그러나 그것은 가장 자연스러운 견해가 아닙니다. 우리의 눈은 그렇게 보이지 않습니다. 그래서 우리는 두 번째 투영을 볼 수있는 이유입니다. 관점보기 관점 관점은 계산을 수행해야하므로 관점보기보다 약간 더 복잡합니다. 그러나 이러한 계산은 그렇게 복잡하지 않으며 한 가지만 알아야합니다. 인터셉트 정리를 사용하는 방법.

이유를 이해하려면 직교보기를 나타내는 스키마를 살펴 보겠습니다. 우리는 직교 방식으로 비행기에 포인트를 투사했습니다.

그러나 실제 생활에서 우리의 눈은 다음 스키마에서와 같이 더 작용합니다.

기본적으로 우리는 두 단계를 가지고 있습니다
우리는 원래 정점과 카메라의 원점에 합류합니다. 투영은이 라인과 평면 사이의 교차점입니다.
직교보기와는 달리, 여기서 평면의 정확한 위치가 중요합니다. 비행기를 카메라에서 멀리 놓으면 가까이에 배치하는 것과 같은 효과를 얻지 못할 것입니다. 여기에 우리는 그것을 카메라와 거리에 놓습니다.
2. 3D 공간의 정점 M (x, y, z)에서 시작하여 평면에서 투영 m '의 좌표 (x', z ')를 계산하려고합니다.
우리 가이 좌표를 어떻게 계산할 것인지 추측하려면 다른 관점을 취하고 위와 같은 스키마를 보지만 .

우리는 인터셉트 정리에 사용 된 구성을 인식 할 수 있습니다. 위의 스키마에서는 X, Y 및 D 등의 값을 알고 있습니다. 우리는 x '를 계산하여 인터셉트 정리를 적용 하고이 방정식을 얻습니다. x'= d / y * x. 이제, 측면에서 같은 장면을 보면 비슷한 스키마를 얻으면 z '= z'= d / y * z. 덕분에 z '값을 얻을 수 있습니다. > 우리는 이제 관점보기를 사용하여 project () 함수를 쓸 수 있습니다.

이 기능은 아래의 라이브 예에서 테스트 할 수 있습니다. 다시 한번, 당신은 큐브와 상호 작용할 수 있습니다 Codepen에서 SitePoint (@SitePoint)의 PEN 3D PRESPECTION보기를 참조하십시오. 닫는 단어 (매우 기본적인) 3D 엔진은 이제 원하는 3D 모양을 표시 할 준비가되었습니다. 그것을 향상시키기 위해 할 수있는 일이 있습니다. 예를 들어, 우리는 모양의 모든 얼굴, 뒷면의 얼굴도 볼 수 있습니다. 그것들을 숨기려면 백 페이스 컬링을 구현할 수 있습니다.

또한 우리는 질감에 대해 이야기하지 않았습니다. 여기서 우리의 모든 모양은 같은 색상을 공유합니다. 예를 들어, 객체에 색상 속성을 추가하여 그 방법을 그리는 방법을 알면이를 변경할 수 있습니다. 많은 것을 바꾸지 않고 얼굴 당 하나의 색상을 선택할 수도 있습니다. 얼굴에 이미지를 표시 할 수도 있습니다. 그러나 더 어렵고 그러한 일을하는 방법을 자세히 설명하는 것은 전체 기사를 취할 것입니다. 다른 것을 변경할 수 있습니다. 카메라를 공간의 원점에 배치했지만 이동할 수 있습니다 (정점을 투사하기 전에 기본 변경이 필요합니다). 또한 카메라 뒤에 배치 된 정점이 여기에 그려져 있으며, 우리가 원하는 것이 아닙니다. 클리핑 비행기는이를 고칠 수 있습니다 (이해하기 쉽고 구현하기 쉬운).

보시다시피, 우리가 여기에 만든 3D 엔진은 완전한 것이며 저의 해석이기도합니다. 예를 들어, Three.JS는 전용 클래스를 사용하여 카메라와 프로젝션을 관리합니다. 또한 기본 수학을 사용하여 좌표를 저장했지만보다 복잡한 응용 프로그램을 만들고 싶다면 프레임 중에 많은 정점을 회전시키기 위해 필요한 경우 원활한 경험이 없습니다. 최적화하려면 균질 한 좌표 (투영 지오메트리) 및 쿼터니언이 더 복잡한 수학이 필요합니다. 엔진 개선에 대한 아이디어가 있거나이 코드를 기반으로 시원한 것을 구축 한 경우 아래 의견에 알려주십시오! JavaScript에서 3D 엔진을 구축하는 것에 대한 자주 묻는 질문 (FAQ) JavaScript로 3D 엔진을 구축하기위한 전제 조건은 무엇입니까?

JavaScript로 3D 엔진을 구축하려면 JavaScript와 그 개념에 대한 확실한 이해가 필요합니다. HTML 및 CSS에 대한 친숙 함도 유익합니다. 벡터, 매트릭스 및 쿼터니언을 포함한 3D 수학에 대한 지식이 중요합니다. 렌더링 파이프 라인, 셰이더 및 텍스처 매핑과 같은 컴퓨터 그래픽의 기본 사항을 이해하는 것도 도움이 될 것입니다.

JavaScript 3D 엔진 개발을위한 3D 수학 학습을 시작하는 방법은 무엇입니까? 3D 수학을 배우기 위해 온라인으로 제공되는 몇 가지 리소스. Khan Academy와 같은 웹 사이트는 3D 수학을 이해하는 데 기본적인 선형 대수 및 벡터 미적분학 과정을 제공합니다. "그래픽 및 게임 개발을위한 3D 수학 프라이머"와 같은 책도 도움이 될 수 있습니다.

JavaScript로 3D 엔진을 구축하는 데 가장 적합한 라이브러리는 무엇입니까?

Three.js 및 Babylon.js are are JavaScript로 3D 엔진을 구축하는 데 가장 인기있는 라이브러리 중 두 개. 두 라이브러리는 WebGL에 대한 높은 수준의 인터페이스를 제공하므로 복잡한 3D 장면을보다 쉽게 ​​만들 수 있습니다. 또한 광범위한 문서 및 커뮤니티 지원을 제공합니다.

더 나은 성능을 위해 JavaScript 3D 엔진을 최적화 할 수있는 방법은 무엇입니까?

더 나은 성능을 위해 3D 엔진을 최적화하는 몇 가지 방법이 있습니다. 한 가지 방법은 인스턴스 및 배치와 같은 기술을 사용하여 드로우 호출 수를 최소화하는 것입니다. 또 다른 방법은 압축 텍스처와 지오메트리를 사용하여 GPU로 전송되는 데이터의 양을 줄이는 것입니다. 더 나은 성능을 위해 셰이더를 최적화 할 수 있습니다.

JavaScript 3D 엔진에서 사용자 입력을 처리하려면 어떻게해야합니까?

JavaScript 3D 엔진의 사용자 입력 처리는 일반적으로 키보드 및 마우스 이벤트를 듣는 것이 포함됩니다. . 브라우저에서 제공 한 'addeventListener'메소드를 사용하여 이러한 이벤트를들을 수 있습니다. 그런 다음 이벤트 데이터를 사용하여 3D 장면에서 카메라 또는 기타 요소를 제어 할 수 있습니다. 내 JavaScript 3D 엔진에 조명을 추가 할 수 있습니까? JavaScript 3D 엔진에 조명을 추가하려면 광원을 생성하고 음영 모델을 구현해야합니다. 광원은 방향성, 포인트 또는 스포트라이트 일 수 있습니다. 표면이 빛에 어떻게 반응하는지 결정하는 음영 모델은 간단 할 수 있습니다 (Lambertian 음영과 같은) 또는 복잡한 (물리적으로 기반 렌더링과 같은)

JavaScript 3D 엔진에 텍스처를 추가 할 수 있습니까?

JavaScript 3D 엔진에 텍스처를 추가하려면 이미지 파일을로드하고, 텍스처 객체를 생성하고, 지오메트리에 매핑하는 것이 포함됩니다. 브라우저에서 제공 한 '이미지'객체를 사용하여 이미지를로드 할 수 있습니다. 그런 다음 WebGL에서 제공하는 'GL.CreateTexture'메소드를 사용하여 텍스처 객체를 만들 수 있습니다.

JavaScript 3D 엔진에 애니메이션을 추가 할 수 있습니까?

JavaScript 3D 엔진에 애니메이션 추가 변경 사항 변경 사항이 변경됩니다. 시간이 지남에 따라 물체의 속성. 브라우저에서 제공 한 'requestAnimationFrame'메소드를 사용하여 객체의 속성을 일관된 속도로 업데이트하는 루프를 만들 수 있습니다. 그런 다음 보간 기술을 사용하여 다른 상태간에 원활하게 전환 할 수 있습니다.
JavaScript 3D 엔진에서 충돌을 처리 할 수있는 방법은 무엇입니까?
JavaScript 3D 엔진에서 충돌을 처리하는 방법은 일반적으로 충돌 감지 알고리즘을 구현하는 것이 포함됩니다. . 이것은 경계 상자 사이의 겹침을 확인하는 것만 큼 간단하거나 복잡한 형상 간의 교차점을 점검하는 것만 큼 복잡 할 수 있습니다. 충돌이 감지되면 충돌 객체의 속성을 변경하여 응답 할 수 있습니다.

JavaScript 3D 엔진을 디버그하는 방법?

JavaScript 3D 엔진을 디버깅하면 어려울 수 있습니다. 3D 그래픽의 복잡성. 그러나 WebGL Inspector 및 Chrome Devtools와 같은 도구는 매우 유용 할 수 있습니다. 이 도구는 WebGL 컨텍스트의 상태를 검사하고 버퍼와 텍스처의 내용을보고 셰이더를 통과 할 수 있습니다.

위 내용은 JavaScript가있는 3D 엔진 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!