top of page
ludi1892
Nov 8, 20222 min read

Project 3: VR

Updated: Nov 11, 2022


Code


<!DOCTYPE html>

<html>

<head>

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>


<script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>

<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>

<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>

<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>

</head>

<body>

<a-scene>

<a-entity

environment="active: true; preset: dream; ground: canyon; horizonColor: #16aed4; groundTexture: walkernoise; dressing: mushrooms; dressingColor: #790c17; skyType: gradient; skyColor: #99def0; shadow: true; dressingScale: 4.94"

visible=""

></a-entity>

<a-entity

class="environment"

position="0 50 0"

light="type: hemisphere; color: #89b1af; intensity: 0.6; groundColor: #9e1530"

visible=""

></a-entity>

<a-entity

class="environment"

position="0.1 4 0.56"

light="intensity: 0.6; shadowCameraLeft: -10; shadowCameraBottom: -10; shadowCameraRight: 10; shadowCameraTop: 10; type: point"

visible=""

></a-entity

><a-entity

rotation="-90 0 0"

class="environmentGround environment"

visible=""

scale="1 1 0.81"

shadow="cast: false; receive: false"

></a-entity>

<a-entity class="environmentDressing environment" visible=""></a-entity>

<a-sky

radius="200"

theta-length="110"

class="environment"

material="shader: gradientshader; topColor: #14645f; bottomColor: #a3dab8"

visible=""

geometry=""

></a-sky>


<a-entity

class="environment"

position="0 50 0"

light="type: hemisphere; color: #c3fcf9; intensity: 0.6; groundColor: #b34093"

visible=""

></a-entity>

<a-entity

class="environment"

position="-0.72 0.53 0.97"

light="intensity: 0.6; shadowCameraLeft: -10; shadowCameraBottom: -10; shadowCameraRight: 10; shadowCameraTop: 10"

visible=""

></a-entity>

<a-entity

rotation="-90 0 0"

class="environmentGround environment"

visible=""

scale="1 1 20"

shadow="cast: false; receive: false"

></a-entity>

<a-entity class="environmentDressing environment" visible="true"></a-entity>

<a-sky

radius="200"

theta-length="110"

class="environment"

material="shader: gradientshader; topColor: #87faf4; bottomColor: #370f57"

visible=""

geometry=""

></a-sky>


<a-entity

class="environment"

position="0 50 0"

light="type: hemisphere; color: #cceef7; intensity: 0.6; groundColor: #b34093"

visible=""

></a-entity>

<a-entity

class="environment"

position="-0.72 0.53 0.97"

light="intensity: 0.6; castShadow: true; shadowCameraLeft: -10; shadowCameraBottom: -10; shadowCameraRight: 10; shadowCameraTop: 10"

visible=""

></a-entity>

<a-entity

rotation="-90 0 0"

class="environmentGround environment"

visible=""

scale="1 1 20"

shadow="cast: false; receive: false"

></a-entity>

<a-entity class="environmentDressing environment" visible="true"></a-entity

><a-sky

radius="200"

theta-length="110"

class="environment"

material="shader: gradientshader; topColor: #99def0; bottomColor: #16aed4"

visible=""

geometry=""

></a-sky>

<a-entity id="stars" visible="false"></a-entity>


<a-assets>

<img

id="snow"

src="https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/snow.jpeg?v=1666311446587"

/>

</a-assets>

<a-assets>

<video

id="sky"

autoplay

loop="true"

src="https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/video.mp4?v=1666295397606"

></video>

</a-assets>

<a-asset-item

id="mush"

src="https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/ShishroomFinanimatedgltf.gltf?v=1667355346324"

>

</a-asset-item>

<a-asset-item

id="pickled"

src="https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/Blue1.gltf?v=1667355340967"

>

</a-asset-item>

<a-assets>

<img id="texture" src="texture.png" />

</a-assets>

<a-asset-item

id="basssound"

src=" https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/basssound.mp3?v=1666316164280"

></a-asset-item>

<a-asset-item

id="guitarriff"

src=" https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/guitarriff.mp3?v=1666316443203"

></a-asset-item>


<a-sky color="#ECECEC"></a-sky>

<a-videosphere src="#sky"></a-videosphere>

<a-plane

material="src: #snow; repeat: 20, 20"

position="0 -2.5 0"

rotation="-90 0 0"

width="200"

height="200"

></a-plane>


<a-animation

attribute="rotation"

dur="3000"

fill="forwards"

to="0 360 0"

direction="alternate"

begin="click"

></a-animation>

<a-ring

src="#texture"

scale="10 10 10"

position="-1.676 2.87 -31.65"

material="shader:gif;src:url(https://cdn.glitch.global/2bf4a24d-9ae7-4365-9de8-f47ca791491f/snowfall.gif?v=1667866863867);"

></a-ring>

<a-box

position="3 3 -15"

material="shader:gif;src:url(https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/pickle.gif?v=1666317448440);"

depth="2"

height="3"

width="3"

></a-box>


<a-box

position="-12 2 -24"

material="shader:gif;src:url(https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/mushy.gif?v=1666315300439);"

depth="1.8"

height="3"

width="3"

></a-box>

<a-entity

gltf-model="#mush"

position="-1.676 2.87 -31.27"

animation-mixer="loop : "

scale="3 3 3"

rotation="0 -90 0"

sound="src: https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/basssound.mp3?v=1666316164280(basssound.mp3); autoplay: true; loop: true"

></a-entity>


<a-entity

gltf-model="#pickled"

position= "-5 0.3 -10"

animation-mixer="loop : "

scale="1 1 1"

rotation="0 -90 0"

sound="src:https://cdn.glitch.global/c4dab970-56cf-451d-8e6d-45a811879bd4/guitarriff.mp3?v=1666316443203 (guitarriff.mp3); autoplay: true; loop: true"

></a-entity>

</a-scene>

</body>

</html>


4 views0 comments

Recent Posts

See All

Comments

bottom of page