Web design
How to

How to make a 3D website with VECTARY

Choose one of our solutions: 3D hero image | parallax 3D elements | 3D design

Is it an eye-catching 3D element on your website that you want? Or maybe a unique hero or header image for your awesome website or blog? What about a whole 3D object that you can embed as easily as a YouTube video.

You don’t need to be a pro graphic designer to do any of these. Use Vectary’s 3D Studio to make 3D designs for your website any way you want it. Drag and drop 3D objects from our library and customize them with a double click.

Create a 3D website easily

In this article you will learn:

  1. How to create a 3D hero image with Vectary
  2. How to create paralax 3D elements with Vectary
  3. How to get interactive 3D design to your website

1. How to create a 3D hero image with Vectary

  1. Open Vectary - it’s online.
  2. Drag and drop objects from the library, import your own 3D files or create your own 3D design from scratch.
  3. Adjust materials, light, style, add text or background.
  4. Render your design in real-time.
  5. Save and export your 3D design as a PNG file.

2. How to create 3D elements for your website

Paralax 3D elements are very trendy in web design right now. They can add that right feeling to your website. Check this awarded design from Niika as an example:

https://www.vectary.com/uploads/media-library/niika-paralax-3d-design-website-4VGz9KqcRip8NK3BkaOREb.gif

You can make export the 3D elements as static png files and add the animation in the web editor, such as Webflow, or you can export the element as interactive 3D embed. In Vectary it's possible under the Publish settings.

How to create a paralax website with Vectary 3D elements

Depending on the web platform you are using, here are some resources for you:

Wix: How to Create a Multi-Layered Parallax Website

Squarespace: Paralax scrolling

Weebly: How To Create A Moving Parallax Banner In Your Weebly Site

Wordpress: Paralax scroll

3. How to get interactive 3D design to your website

In Vectary, you can embed your 3D design to your website as easily as a YouTube video. You your visitors can rotate or zoom the 3D design or see it in real life thanks to augmented reality supported on iPhones and Androids.

  1. Open Vectary, it's online.
  2. Import a 3D file to Vectary (we support more than 60 file formats) or create your 3D design from scratch.
  3. Go to the Publish tab and click on Generate button.
  4. Copy the iframe embed code and paste it into your website's editor.
  5. You can change your design anytime and re-generate the embed. The design will be automatically updated on all your web embeds.

Read more about the Vectary Viewer

3D/AR viewer example

Open this site on iPhone with Safari or Android with Chrome and click on the AR badge.

https://www.vectary.com/embed/viewer/v1/viewer.html?model=fcd1e6c3-100f-4f80-93cf-ea6905a1298e&env=studio1&envRotation=0&autoplay=1&turntable=0.5&showPreloader=1

What else you can get with the Vectary 3D design editor

Boost your graphic design portfolio with 3D banners and header images

Playful 3D shapes are the next visual trend for advertising. Keep your graphic design portfolio up to date and impress your clients with beautiful visuals created with our online 3D tool.

Collaborate on your 3D design with coworkers and clients

Share your design with your colleague or client and create everything together. One can work on the 3D model, another can play with objects, while others can add their comments. The Vectary 3D Studio supports creative teamwork.

Use Google Fonts to create amazing 3D typography

Vectary is the first online 3D tool to implement more than 1200 fonts from the Google Fonts library. Choose your favorite Google font and turn it into 3D in Vectary with one click. To further customize your design, just double click to enter the Vectary edit mode and access other powerful 3D modeling tools.

Finish your 3D design in other tools

Easily export your 3D image as PNG and finish your project in graphic design tools like Photoshop and Canva, or continue on other web design platforms such as Wix, Wordpress or Weebly. Sky's the limit!

FAQ

How do I download Vectary to create a 3D design for my website?

The VECTARY 3D image creator is online so you don’t need to download anything. It runs in every modern browser such as Chrome, Firefox and Safari. Simply sign up or log in and start creating.

How can I download my 3D design?

Click the menu in the top left corner and hover over Project. Next, click “Export as image” to download your 3D design as a PNG file or choose from a variety of other 3D formats: STL and OBJ (used in 3D printing), glTF (universal 3D format), DAE (Sketchup and architecture format) or FBX (a proprietary file format developed by Kaydara and owned by Autodesk.)

Sign up