Can three.js be effectively integrated into a Shopify store?

I've been working on incorporating a three.js object into my Shopify website for some time now.

The main objective is to embed this 3D object onto the homepage.

Below is the HTML/Liquid code I added to the homepage as a custom liquid section:

<canvas id="bg"></canvas>

In a separate .js file

import * as THREE from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f88c908a9d9db8c8d6c9c9cfd6c9">[email protected]</a>/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71051903141431415f4043485f41">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js';

// Rest of the JS code...

The issue I'm facing:

Despite all efforts, the 3D object only shows up as an empty box, as seen here.

It seems like there might be an importing problem based on the Google sources, but no errors are displayed in the Google console.

Your insights and solutions to this dilemma would be greatly appreciated!

javascriptthree.jsshopifyliquid

Answer №1

Did you know that Shopify allows you to upload 3D models as media? You don't have to create your own viewer and deal with any related issues. By formatting your model according to Shopify's guidelines, you can provide AR experiences and give customers the ability to interact with and visualize your products in their own space using mobile devices. It's definitely worth considering!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to view my HTML webpage on a smartphone?

Recently, I successfully created an HTML webpage with CSS and JS that looks and functions perfectly on my PC. However, when attempting to access it on my phone, I encountered some issues. Despite transferring all the necessary files to my phone, only the ...

javascriptandroidhtmlcss

Pressing the button inside the iframe will cause the div to appear in the parent

I have a button in my iframe that opens a div on the same page: <li> <input type='button' id='hideshow2' class='radiobutton' value='Core' onclick="showDiv('#content2')"> </li> <di ...

javascriptjqueryhtmliframe

What's the best way to apply a margin top to an image using Tailwind CSS?

Is there a way to adjust the top margin of an image in Tailwind CSS? I'm having trouble making my logo clearly visible and think giving it some space at the top might help. How can I do this within the Tailwind CSS framework? https://i.sstatic.net/Ae ...

javascriptcssreactjstailwind-css

Error: Trying to call an undefined function

Having trouble with an error on this line: $("#register-form").validate. Can anyone offer assistance? Furthermore, if I write this script, how should I incorporate it into the form? Will it function without being called? <script type="text/javascript ...

javascriptjqueryformsvalidation

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

javascriptjqueryjsonajaxforeach

Display Firebase information in JSON format on the browser console

Can someone assist me in displaying my Firebase database data as JSON in the browser console? I am looking to load only Product data. I came across a code snippet on how to push data from this tutorial. Can anyone help me understand how the function work ...

javascriptjsonnode.jsfirebasefirebase-realtime-database

Multiple 'keydown' events are accumulating with Ajax activated

When the search field is focused, I am loading JSON into the browser and then iterating over the JSON objects to find real-time results 'on keydown'. The issue I'm encountering is detailed in the console after the initial block of code Aja ...

javascriptjqueryajax

Is it possible to modify the up axis in Three.js?

Is there a way to set the upAxis to 'Z' in Three.js to align the camera's up axis with the Z axis? Appreciate any guidance on this! ...

camerathree.js

Creating a user-friendly form with validation in a Vue application using Vuetify.js

I am in the process of incorporating a contact form with basic validation on a Vue.js website using an example from Vuetify.js. Being new to this, I'm unsure about how to implement it within a Vue component. My goal is to have simple client-side form ...

javascriptformsvue.jsvuetify.js

Infura makes ten calls to eth_getBlockByNumber for every eth_call request

Currently, I am in the process of creating a straightforward nextjs API route (https://nextjs.org/docs/api-routes/introduction) that is linked to the Ethereum blockchain for executing a view function (which doesn't require any gas) from a smart contra ...

javascriptnode.jsnext.jsethereumsolidity

Ways to verify if two items within a collection of objects share a common value in MongoDB

I have a collection of data called users stored in mongoDB that has the following structure: _id: ObjectId, sports: [ { name: 'cricket', history: [ { from: 10, to: 30 }, { from: 30, to: ...

javascriptmongodbexpressmongoose

Developing a similar platform to Sketchfab

We are looking to develop a similar analogue of Sketchfab on our website, allowing users to view virtual object models. Can anyone provide information on the technologies used by Sketchfab and what is needed to bring this project to life? ...

3dthree.jsrendering

Vue parent component not receiving events properly

Referring to these sources: Forum Post Stack Overflow Question In my project, I am utilizing: CodeSandbox Example The setup involves the parent component listening for events emitted by a child component: mounted() { this.$on("edit-category& ...

javascriptvue.jsvuejs2vue-componentvue-events

The beauty of asynchronous GET requests in VueJS

As a newcomer to VueJS, I am exploring how to make a GET request to the GitHub API. Initially, I made a request to sort users by follower count, resulting in an array ordered in descending order of user logins. Following that, I sent another GET request to ...

javascriptvue.jshttpasynchronousaxios

`Finding the nodejs API route for displaying images from a database`

How can I successfully display an image from the database without getting a string of question marks instead? Click here to see the issue >>> When attempting to directly call the API using the provided link, the following result is returned: {&qu ...

javascriptnode.jsapivue.jsaxios

How to send props from a Vue.js component tag in an HTML file

I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component. Here's a snippet of my index.html file: <div id="js-group-discounts"> <div class="form-group required"> <datepick ...

javascriptvue.jsvuejs2vue-component

Transform the outcome of Request() into a variable

I'm currently working with the following code snippet: request('http://steamcommunity.com/market/priceoverview/?currency=1&appid=730&market_hash_name=Gamma Case', function (e, r, body){ var req_data = JSON.parse(body); conso ...

javascriptnode.js

ThreeJS does not have the ability to function on a <canvas> element, it is only compatible with the <div> tag

Just started exploring WebGL and tested out the sample code from this link: The code runs fine on a div with id="container", but when I switch it to a canvas with id="container", it doesn't work properly. ...

three.js

What's the best way to showcase the time on the x-axis of a Flot line graph?

My goal is to display time intervals between the minimum and maximum values within a specific time range. For example: 2015-04-30 10:20:00 and 2015-04-30 10:30:00 on the x-axis. I need to fetch values from a database where the datetime is stored in the fo ...

javascriptjqueryasp.netgraphflot

Basic Block - Three.JS

My goal was to create a simple rotating 3D cube using the Three.js library for WebGL. Despite following numerous tutorials, I can't figure out why my code only displays a black screen with no geometry. //Setting window dimensions var width = windo ...

javascript3dthree.js