A -Frame으로 크리스마스 하는 거.

10282 단어 HTMLA-Frame
개시하다
이번에 나는 처음으로 부가 달력에 참가한 것이다.
그러므로
이번에는 공부를 시작한 A-Frame을 사용해 보도록 하겠습니다.
나는 크리스마스 같은 일을 하고 싶다!
메서드
사용하고 싶습니다MDS 문서
HTML을 잘 설치할 수 없습니다.
아래 사이트를 참고하셨습니다!
화면 왼쪽 "Hello WebVR">화면 오른쪽 상단 "VIEW SOURCE">(시간 필요) 화면 표시 후 "view source"를 누르십시오
소스 코드를 가져올 수 있습니다.
■ 물체의 형상
■배경
■ 색상 선택
■ 플러그인: 아래 밤 하늘 배경 사용하기<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> <script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>・목표 사용<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js">■ 원추<a-cone position="-1 0.5 -3"　color="tomato" radius-bottom="2" radius-top="0.5"></a-cone>■ 원통<a-cylinder position="-1 3.0 -3" color="#583822" height="1.3" radius="0.3"></a-cylinder>■정사각형<a-box position="-1 4.0 -3" color="#ba2636" depth="1.0" height="1.0" width="1.0"></a-box>■ 배경, 별을 흩뿌린다<a-sky color="#001e43"></a-sky> <a-entity star-system></a-entity>■ 타겟 생성<a-camera><a-cursor></a-cursor></a-camera>■ 동적 처리: 아래 사이트 참조
이번에 겨냥하면 '텍스트 출력' 과 '색상 변경' 을 진행해야 한다.
완성
<!DOCTYPE html>
<html>

<head>
    <title>Tree</title>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
</head>

<body>
    <a-scene>
        <!-- ツリー本体 -->
        <a-cone position="-1 1.9 -3" color="#2f5d50" radius-bottom="0.5" radius-top="0"
            event-set__enter="_event: mouseenter; _target: #cone-S; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-S; visible: false">
            <a-text id="cone-S" value="Happy" align="center" color="#FFF" visible="false"
                position="2 -0.75 0.55" geometry="primitive: plane; width: 0.75" material="color: #333"></a-text>
        </a-cone>
        <a-cone position="-1 1.3 -3" color="#2f5d50" radius-bottom="0.8" radius-top="0" height="1.5"
            event-set__enter="_event: mouseenter; _target: #cone-M; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-M; visible: false">
            <a-text id="cone-M" value="Merry" align="center" color="#FFF" visible="false"
                position="2 0.0 0.55" geometry="primitive: plane; width: 1.25" material="color: #333"></a-text>
        </a-cone>
        <a-cone position="-1 0.5 -3" color="#2f5d50" radius-bottom="1.1" radius-top="0" height="2.0"
            event-set__enter="_event: mouseenter; _target: #cone-L; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-L; visible: false">
            <a-text id="cone-L" value="Christmas" align="center" color="#FFF" visible="false"
                position="2 0.75 0.55" geometry="primitive: plane; width: 1.75" material="color: #333"></a-text>
        </a-cone>
        <a-cylinder position="-1 -0.7 -3" color="#583822" height="2.5" radius="0.3"></a-cylinder>
        <a-box position="-1 -2.1 -3" color="#ba2636" depth="1.0" height="1.0" width="1.0"
               event-set__enter="_event: mouseenter; color: yellow"
               event-set__leave="_event: mouseleave; color: #ba2636">
               <a-animation attribute="visible" dur="2000" to="false" repeat="indefinite"></a-animation>
        </a-box>

        <!-- 背景と星 -->
        <a-sky color="#001e43"></a-sky>
        <a-entity star-system></a-entity>
        <a-camera>
            <a-cursor></a-cursor>
        </a-camera>
    </a-scene>
</body>

</html>

막힌 곳
• 플러그인 버전 문제
배경 설치에 시간이 오래 걸렸다.
　
https://www.npmjs.com/package/aframe-particle-system-component
이것을 참고로 하다
터미널에서 실행npm i aframe-star-system-component.
상술한 사이트에 기재된 것은
구판이 아니면 반응이 없다.
끝말
크리스마스 트리가 시끌벅적해요.
가끔 입출금이 귀찮을 때가 있죠.
그때는 쓸모가 있었잖아.
지금은 좀 지루한 크리스마스 트리다.
다 같이 꾸며봅시다.웃다 웃다
부디Fork 꾸며보세요!
Tips
■별 내리게
엉망진창으로 비쳤지만
무겁기 때문에 이번에는 실시하지 않았다.
별을 내리려는 플러그인은 다음과 같다.
이것을 사용하면 <a-box> 라벨과 <a-text> 라벨이 반영되지 않습니다...<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
componentDidMount() VS useEffect()
Swift 문법 정리 #2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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