JavaScript 초보자가 Grimoire.js를 사용해 본 이야기

8479 단어 우주WebGLGrimoire.js
핸즈온에 참가했습니다!
그 때에 「Grimoire의 AdventCalendar 참가해」라고 말해지는대로 2일, 씁니다.

만든 것



달이 지구 주위를 돌아다니는 것입니다.

GIF는 처음 달이 지구 뒤이므로 나올 때까지 시간이 걸립니다. 아래 소스 코드에서도 읽고 기장에 기다리거나 웹 버전을 참조하십시오.

웹 버전 (마우스 컨트롤 포함)

타이틀에도 있는 대로, JavaScript 초보자로 XML도 접한 적 없고, 빠르므로, 자세한 것은 공식 페이지의 Tutorial

Grimoire.js는 XML 기반 GOML이라는 마크업 언어로 3D 객체를 그립니다.
<goml height="fit">
<!--太陽光の表現(http://grimoire.gl/example/phong.htmlからコピペ[※1])-->
    <import-material typeName="phong" src="./index.sort"/>
    <material id="earth-material" texture="earth_day.jpg" type="phong" color="#fff" specular="#555" ambient="#000" sun="n(1,0,-1)" power="1"/>
    <material id="moon-material" texture="moon.jpg" type="phong" color="#fff" specular="#555" ambient="#000" sun="n(1,0,-1)" power="1"/>
<!--太陽光の表現ここまで-->
    <scene>
    <!--カメラの設定-->
        <camera class="camera" near="0.01" far="400.0" aspect="1.5" position="0,5.17638,19.32" rotation="-0.2618,0,0">
            <camera.components>
                <MouseCameraControl />
            </camera.components>
        </camera>
    <!--地球の生成-->
        <mesh id="earth" geometry="sphere" scale="4,4,4" position="0,0,0" rotation="0,0,0" material="#earth-material">
        <mesh.components>
        <!--自転コンポーネントの付与-->
            <Rotation speed="5" />
        </mesh.components>
        </mesh>
    <!--月の生成-->
        <mesh id="moon" geometry="sphere" scale="1,1,1" position="0,0,0" rotation="0,0,0" material="#moon-material">
        <mesh.components>
        <!--自転コンポーネントの付与-->
            <Rotation speed="0.183" initialValue="-90" />
        <!--公転コンポーネントの付与-->
            <Revolution radius="10" speed="0.183" />
        </mesh.components>
        </mesh>
    </scene>
</goml>

<!--[※1]お解りの方も多いかと思いますが、これを動かすにはURL先のindex.sortも必要です。-->

어땠어?



인터넷으로 공개한다면 나름대로의 퀄리티를 원한다는 것만으로 태양광을 켜서,
이것이 없으면 초보자라도 다소의 JavaScript와 XML나 HTML의 경험으로 이 정도의 묘화는 이치로부터 절대로 쓸 수 있습니다.

표시 할 위치 지정은 HTML입니다.
<!DOCTYPE html>
<html>
<head>
    <title>Grimoire OSK Hands on</title>
    <script type="text/javascript" src="grimoire-preset-basic.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        html, body{
            background-color: #000;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="color: #FFF; font-weight: bold;">速さ調整</div>
    <input type="range" onchange="onSpeedChange(this);" value="10">

    <!--ここ↓のscriptタグ-->
    <script id="main" type="text/goml" src="index.goml"></script>

</body>
</html>

댓글에 표시된 대로 script 태그를 쓴 위치에 태그에 쓴 id에 해당하는 GOML에 의해 생성된 캔버스가 포함되므로,
간단하죠?

귀하의 웹사이트를 Example 화려하게 물들지 않겠습니까?
WebGL 게임 엔진 PixiJS를 시작합시다.
Symfony UX로 COVID-19 데이터 시각화 생성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage