Art Exhibition

Display artwork like images, videos and 3D models in a metaverse art exhibition with a party area in the centre and a custom skybox.

All artwork rotates to face the player and lowers to eye-level on approach. The scene is set up to play and pause videos automatically as the players gets closer to them.

Setup to deploy in worlds (DCL Name) and written in SDK6.

Created for MVAW23.

Demo

Run Locally

Clone the project

  git clone https://github.com/KatherineJoelle/art-exhibition.git

Go to the project directory

  cd my-project

Install dependencies

  npm install -g decentraland

  npm install @dcl/ecs-scene-utils -B

Run scene

  dcl start

Deployment

To deploy this project to DCL Worlds (a DCL name) run

  dcl deploy --target-content https://worlds-content-server.decentraland.org

Features

• Display custom interactive images
• Display custom interactive videos
• Display custom interactive 3D models
• Artwork rotates to face the player
• Artwork lowers to eye-level on player approach
• Stage with screen and animated lights
• Custom hover text for each artwork
• Custom links for each artwork
• Deployable in worlds
• Scalable

Usage/Examples

Static Image Art

Host images on a site like https://nft.storage/files/ and add the links in the corresponding parcel numbers.

File: resources.ts

    serverImageLinks: {
        parcel1pic: new Texture("your link here"), // insert your image link here
    }

Adjust the image size if needed by changing the scale vector.

File: images.ts

    createEntityWithBehavior(
     'Parcel 1',
     new Vector3(-55.8, 75, -56),
      new Vector3(3, 3, 3),   // Change scale here
      resources.serverImageLinks.parcel1pic,
      resources.serverImageLinks.parcel1pic,
      resources.artistLinks.parcelLink1,
     resources.hoverText.parcel1Text,
     parcel1StartPos,
     parcel1EndPos
    );

Video Art

Host videos on Vimeo Premium and add the .m3u8 links in the corresponding parcel numbers.

File: resources.ts
    
    serverVideoLinks: {
            parcel14Video: new VideoClip("your link here.m3u8"), // insert your video link here 
   

Adjust the video size if needed by changing the scale vector.

File: videos.ts

    createCustomEntity(
    'Parcel 76',
    new Vector3(24, 75, 56),
     new Vector3(2, 6, 1),      // Change scale here
    resources.serverVideoLinks.parcel76Video,
    resources.artistLinks.parcel76Link,
    resources.hoverText.parcel76Text,
     startPos76,
     endPos76,
    resources.serverImageLinks.parcel76Placeholder
    );

Add a placeholder image with the first frame of the video so it shows as a picture before the video is played.

File: resources.ts
    
    parcel76Placeholder: new Texture ("your link here"), // insert a link to your placeholder image here 
   

3D Art

Put any 3D models in the scene "models" folder and add the paths to the corresponding parcel numbers.

File: resources.ts
    
    artwork: {
    parcel57Art: new GLTFShape('models/your model here.glb'), // insert path to 3d model
   

Adjust the model position and size if needed by changing the position and scale vectors.

File: 3d-art.ts

    create3DArtworkEntity(
     "Parcel 57",
      new Vector3(40, 73.5, 24), // Change position
      new Vector3(3, 3, 3),      // Change scale
      resources.models.artwork.parcel57Art,
       resources.artistLinks.parcel57Link,
       resources.hoverText.parcel57Text,
       parcel57StartPos,
     parcel571EndPos
     );

Screenshots

Layout guide with parcel numbers:

Scene Screenshots:

Acknowledgements

Though the music and artwork from the MVAW23 Warm-Up Party are not included in this repository, the project couldn't have come to life without these amazing artists:

• Red Albert
• Marc Francis
• Geoff Robertson
• MetaLyss / FlawLyss
• CJ Trax
• ManaDaiquiri
• MJ
• CK Bubbles
• Awed Job
• xyz.lB
• Uncle Ben
• srJH
• Saltï G
• Zom
• Katism
• Shahin
• Sinful Meatstick
• Payam
• MaHa
• Hadi

A special thank you to Kirzoz for help with the skybox.

Questions

If you have any questions about this repository feel free to reach out to KJ of Low Poly Models via Twitter, Instagram or Discord.

Visit Low Poly Models World for building tutorials and to learn more about the metaverse services we provide.

License

Apache 2.0