Interactive Archives - AMT Mannequins Blog

Simple 360 product viewer example

Imaging Interactive WordPress

August 3, 2018 Admin

Adding 360 Product Views – Part 1

What are 360 Product Views? 360 product views allow the customer to view your product from all angles. Viewers can

document.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("cam", -Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero()); var anchor = new BABYLON.TransformNode(""); camera.wheelDeltaPercentage = 0.01; camera.attachControl(canvas, true); // Create the 3D UI manager var manager = new BABYLON.GUI.GUI3DManager(scene); var panel = new BABYLON.GUI.SpherePanel(); panel.margin = 0.2; manager.addControl(panel); panel.linkToTransformNode(anchor); panel.position.z = -1.5; // Let's add some buttons! var addButton = function() { var button = new BABYLON.GUI.HolographicButton("orientation"); panel.addControl(button); button.text = "Button #" + panel.children.length; } panel.blockLayout = true; // CM 2018-08-AUG-07: changed button count from 60 to 30 "index < 60" for (var index = 0; index < 30; index++) { addButton(); } panel.blockLayout = false; return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); });