WRLD 3D로 동적 3D 맵을 구축하십시오
- Christopher Nolan원래의
- 2025-02-16 09:22:11390검색
이 기사는 WRLD 3D가 후원합니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.
다음은 크리스마스 이브에서 오전 7시에서 오전 8시 사이에 발생합니다. 이벤트는 실시간으로 발생합니다.
우리의 강력한 데이터 수집 기능에도 불구하고, 우리가 살고있는 3 차원 세계에서 데이터를 시각화 할 때 우리는 할 수있는 일이 없습니다. 우리는 2D 차트와 로그 항목을 응시하지만, 세계에서 추출한 많은 양의 데이터는 3 차원 환경에서 의미가 있습니다. 또한, 3 차원 모델에 다시 적용될 때 이러한 데이터를 시각화하는 것이 매우 유용합니다.
우리는이 플랫폼을 사용하여 정보가 적용되는 세계에 정보를 가져 오는 방법을 보여주는 일련의 튜토리얼을 출시 할 것입니다. 각 튜토리얼은 인기있는 TV 시리즈에 테마입니다. 당신이 추측했듯이, 첫 번째 튜토리얼은 약 24 시간입니다.에 따라 맵을 렌더링합니다 일련의 이벤트를 위해 맵을 이동하십시오
이 튜토리얼에서는 WRLD 플랫폼을 시작하는 방법을 배웁니다. 문서 예제에 따라 가장 간단한 맵을 렌더링합니다. 그런 다음 코드를 컴파일하기위한 로컬 환경을 만들고 이야기를 시작합니다. 우리는 다음 주제를 다룰 것입니다 : 위치 이름 각 건물의 건물 및 디자인 이벤트를 강조하십시오
이 튜토리얼의 코드는 Github에서 찾을 수 있습니다. Firefox, Node 및 MacOS의 최신 버전에서 테스트되었습니다.
초보자
시작하는 가장 쉬운 방법은 문서의 첫 번째 예를 따르는 것입니다. 그 전에는 계정이 필요합니다. https://www.wrld3d.com을 방문하여 "등록"을 클릭하십시오.
로그인 한 후 "Developer"및 "Access API 키"를 클릭하십시오. 응용 프로그램에 대한 새 API 키를 만듭니다. 원하는대로 이름을 지정할 수 있지만 나중에 생성 된 키를 복사해야합니다 ...
공식 문서 웹 사이트에서 첫 번째 예제 코드를 얻을 수 있습니다. 나는 그것을 Codepen에 넣고 좌표를 뉴욕의 것들로 교체했습니다 :
<code>const Wrld = require("wrld.js")
const map = Wrld.map("map", "[您的API密钥]", {
center: [40.73061, -73.935242],
zoom: 16,
})</code>
브라우저에 표시되는 URL을 열면 뉴욕 맵이 다시 표시됩니다. JS 및 CSS 파일을 변경하면 이러한 파일이 브라우저에서 자동으로 재 컴파일 및 재 장전됩니다. 소포는 그 약속을 이행하는 것 같습니다.
그리고 그것이 바로 우리가 필요로하는 것입니다. WRLD로 작업을 수행하는 데 집중할 수있는 저렴한 빌드 체인입니다!<code>@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
background-color: #000000;
}</code>
<code class="language-html">
<meta charset="utf-8">
<link rel="stylesheet" href="./app.css">
<title>WRLD入门</title>
<div id="map"></div>
</code>
위 내용은 WRLD 3D로 동적 3D 맵을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!