Products
200 Items
$12.99 AUD
5.0 (1)
$12.99 AUD
5.0 (1)
$69.99 AUD
4.8 (54)
Get notified via email or SMS when this product is back in stock
$69.99 AUD
4.8 (54)
Get notified via email or SMS when this product is back in stock
$29.99 AUD
4.8 (54)
Get notified via email or SMS when this product is back in stock
$44.99 AUD
4.5 (11)
Get notified via email or SMS when this product is back in stock
$34.99 AUD
$39.99 AUD
4.9 (884)
Get notified via email or SMS when this product is back in stock
You've viewed 16 of 200 products
${product.title}
`;
product_element.addEventListener("click", () => {
this.load_new_product(product_element);
});
document.querySelector(".ssvto-products-inner").appendChild(product_element);
}
document.querySelector(".ssvto-mobile-product-prev").addEventListener("click", () => {
this.prev();
});
document.querySelector(".ssvto-mobile-product-next").addEventListener("click", () => {
this.next();
});
[...document.querySelectorAll(".ssvto-add-to-cart-button")].forEach((el) =>
el.addEventListener("click", async () => {
const selected_product = document.querySelector(".ssvto-product.selected");
this.product_index = Array.from(selected_product.parentElement.children).indexOf(selected_product);
const product_data = ssto_config.products[product_index];
if (ssto_config.on_add_to_cart) {
this.loading.style.display = "flex";
await ssto_config.on_add_to_cart(product_data);
this.loading.style.display = "none";
}
})
);
window.addEventListener("resize", () => {
this.handleResize();
this.adjustProductView();
});
window.addEventListener("orientationchange", () => {
this.handleResize();
this.adjustProductView();
});
document.getElementById("ssvto-accept-button").onclick = function () {
self.set_cookie("ssto_accept", "yes");
document.querySelector(".ssvto-accept").style.display = "none";
document.querySelector(".ssvto-app-init").style.display = "flex";
self.run_ssvto();
window.ss_ab?.("signal", { signal: "virtual-try-on-terms-accepted" });
};
document.getElementById("ssvto-decline-button").onclick = function () {
self.set_cookie("ssto_accept", "no");
document.body.removeChild(dialog);
document.body.classList.remove("noscroll");
window.ss_ab?.("signal", { signal: "virtual-try-on-terms-declined" });
};
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
document.body.removeChild(dialog);
document.body.classList.remove("noscroll");
};
if (this.get_cookie("ssto_accept") === "yes") {
document.querySelector(".ssvto-accept").style.display = "none";
document.querySelector(".ssvto-app-init").style.display = "flex";
this.run_ssvto();
} else {
document.querySelector(".ssvto-accept").style.display = "flex";
document.querySelector(".ssvto-app").style.display = "none";
}
// touch events
this.touchstartX = 0;
this.touchendX = 0;
this.canvas_element.addEventListener("touchstart", (e) => {
this.touchstartX = e.changedTouches[0].screenX;
});
this.canvas_element.addEventListener("touchend", (e) => {
this.touchendX = e.changedTouches[0].screenX;
this.checkDirection(e);
});
// controls (unchanged)
document.getElementById("sstvto-control-x-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.x = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-y-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.y = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-z-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.z = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-x-tilt").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.rotation.x = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-scale").addEventListener("change", (e) => {
if (this.model_scene) {
const s = parseFloat(e.target.value);
this.model_scene.scale.set(s, s, s);
}
});
const btn = (id, fn) => document.getElementById(id).addEventListener("click", fn);
btn("sstvto-control-x-shift-plus-one", () => this._bumpPos("x", 1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-plus-point-one", () => this._bumpPos("x", 0.1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-minus-one", () => this._bumpPos("x", -1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-minus-point-one", () => this._bumpPos("x", -0.1, "sstvto-control-x-shift"));
btn("sstvto-control-y-shift-plus-one", () => this._bumpPos("y", 1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-plus-point-one", () => this._bumpPos("y", 0.1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-minus-one", () => this._bumpPos("y", -1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-minus-point-one", () => this._bumpPos("y", -0.1, "sstvto-control-y-shift"));
btn("sstvto-control-z-shift-plus-one", () => this._bumpPos("z", 1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-plus-point-one", () => this._bumpPos("z", 0.1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-minus-one", () => this._bumpPos("z", -1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-minus-point-one", () => this._bumpPos("z", -0.1, "sstvto-control-z-shift"));
btn("sstvto-control-x-tilt-plus-one", () => this._bumpRotX(1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-plus-point-one", () => this._bumpRotX(0.1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-minus-one", () => this._bumpRotX(-1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-minus-point-one", () => this._bumpRotX(-0.1, "sstvto-control-x-tilt"));
btn("sstvto-control-scale-plus-one", () => this._bumpScale(1, "sstvto-control-scale"));
btn("sstvto-control-scale-plus-point-one", () => this._bumpScale(0.1, "sstvto-control-scale"));
btn("sstvto-control-scale-minus-one", () => this._bumpScale(-1, "sstvto-control-scale"));
btn("sstvto-control-scale-minus-point-one", () => this._bumpScale(-0.1, "sstvto-control-scale"));
document.getElementById("ssvto-controls-button").addEventListener("click", () => {
document.getElementById("ssvto-controls").style.display = "flex";
document.getElementById("ssvto-controls-button").style.display = "none";
});
document.getElementById("ssvvt-control-save-button").addEventListener("click", async () => {
const model = this.ssto_config.products[this.product_index];
const adjustments = {
x_shift: document.getElementById("sstvto-control-x-shift").value,
y_shift: document.getElementById("sstvto-control-y-shift").value,
z_shift: document.getElementById("sstvto-control-z-shift").value,
x_tilt: document.getElementById("sstvto-control-x-tilt").value,
scale: document.getElementById("sstvto-control-scale").value,
};
model.adjustments_json = JSON.stringify(adjustments);
await this.save_adjustments(model);
});
}
_bumpPos(axis, delta, inputId) {
if (!this.model_scene) return;
this.model_scene.position[axis] += delta;
document.getElementById(inputId).value = this.model_scene.position[axis];
}
_bumpRotX(delta, inputId) {
if (!this.model_scene) return;
this.model_scene.rotation.x += delta;
document.getElementById(inputId).value = this.model_scene.rotation.x;
}
_bumpScale(delta, inputId) {
if (!this.model_scene) return;
const s = this.model_scene.scale.x + delta;
this.model_scene.scale.set(s, s, s);
document.getElementById(inputId).value = s;
}
async save_adjustments(model) {
this.loading.style.display = "flex";
const response = await fetch("https://portal.safestyle.com.au/service/ssvto-adjustments", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
});
await response.json();
this.loading.style.display = "none";
}
run_ssvto() {
const self = this;
this.createFaceLandmarker().then(() => {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
this.loading.style.display = "none";
document.querySelector(".ssvto-app-init").innerHTML =
'Unable to access camera in this browser.
';
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
const container = document.querySelector(".ssvto-container");
if (container) document.body.removeChild(container);
document.body.classList.remove("noscroll");
};
return;
}
navigator.mediaDevices
.getUserMedia({ video: { width: 640 } })
.then((stream) => {
this.stream = stream;
this.video.srcObject = stream;
this.webcamRunning = true;
document.querySelector(".ssvto-app-init").style.display = "none";
document.querySelector(".ssvto-app").style.display = "flex";
let started = false;
const start_video_pipeline = async () => {
if (started) return;
started = true;
// Hide DOM video; we render it inside WebGL
this.video.style.display = "none";
// Create video background once we have dimensions
this.initVideoBackground();
// initial sizing
this.handleResize();
self.predictWebcam();
this.webcam_running = true;
this.check_disable_loader();
};
self.video.addEventListener("loadeddata", start_video_pipeline, {
once: true,
});
self.video.addEventListener("loadedmetadata", start_video_pipeline, {
once: true,
});
// Explicit play helps some desktop browsers start stream decoding reliably.
this.video.play().catch((error) => {
console.error("SSTO video.play() failed", error);
});
})
.catch((error) => {
console.error("SSTO getUserMedia failed", error);
this.loading.style.display = "none";
document.querySelector(".ssvto-app-init").innerHTML =
'Unable to access camera.
Check browser camera permissions and try again.
';
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
const container = document.querySelector(".ssvto-container");
if (container) document.body.removeChild(container);
document.body.classList.remove("noscroll");
};
});
// keep your original behavior
this.webcamRunning = false;
this.loader = new GLTFLoader();
this.DRACOLoader = new DRACOLoader();
this.DRACOLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
this.loader.setDRACOLoader(this.DRACOLoader);
// Foreground scene
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas_element,
alpha: false, // camera is in-canvas now
antialias: true,
});
const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 0.5;
this.scene.environment = pmremGenerator.fromScene(environment).texture;
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.localClippingEnabled = true;
this.faceGroup = new THREE.Group();
this.faceGroup.matrixAutoUpdate = false;
this.scene.add(this.faceGroup);
this.clipPlaneVector = new THREE.Vector3(0, 0, 1);
this.clipPlane = new THREE.Plane(this.clipPlaneVector, 84);
this.clipPlanes = [this.clipPlane];
const model = this.ssto_config.products[this.product_index];
this.load_model(model);
});
}
// ----- NEW: WebGL background video compositing -----
// DROP-IN: replace your current initVideoBackground() with this version.
// It fixes the “lighter” camera by bypassing tone mapping on the background
// and using sRGB encoding for the video texture (Three r129 compatible).
initVideoBackground() {
this.bgScene = new THREE.Scene();
this.bgCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.videoTexture = new THREE.VideoTexture(this.video);
this.videoTexture.minFilter = THREE.LinearFilter;
this.videoTexture.magFilter = THREE.LinearFilter;
this.videoTexture.generateMipmaps = false;
this.videoTexture.wrapS = THREE.ClampToEdgeWrapping;
this.videoTexture.wrapT = THREE.ClampToEdgeWrapping;
// ✅ helps match DOM Check browser camera permissions and try again.
Products
