How to activate 3D Model view automatically in Dawn theme?

Store Design
,
1

Hi there!

We would like to use 3D models in our Dawn theme. Once we uploaded the design, we can see them on the website - great, but you have to click it to activate. We would like to embed them in the product page seamlessly, without any frame, click-to-activate barrier.

Does anyone know how to change this in the code?

Many thanks!
Julian :slightly_smiling_face:

2

To achieve the desired result of having a seamless and frame-less 3D model embedded in your product page, you can use WebGL technology and Three.js, which is a JavaScript library that makes it easy to work with 3D graphics on the web. Here are the steps to get started:

  1. Create a 3D model: You can use a 3D modeling software such as Blender, SketchUp, or 3DS Max to create your 3D model. Export the model in a format that Three.js supports, such as GLTF.

  2. Embed the 3D model in your HTML page: Use the <canvas> element to render the 3D model in your HTML page. You can use the Three.js Scene, Camera, and Renderer objects to display the model in the canvas.

  3. Load the 3D model into your JavaScript code: Use Three.js’s GLTFLoader to load the 3D model into your JavaScript code. You can then add the model to your Three.js scene and position it how you like.

  4. Animate the 3D model: You can use Three.js’s animation capabilities to animate the 3D model. For example, you can rotate the model or change its position over time.

Here’s an example of how you can embed a 3D model in your HTML page using Three.js:

3

Thanks! I didn’t think about asking ChatGPT - you’re totally right at doing so :slightly_smiling_face: