Fusions XL Safety Glasses
5 Items
$39.99 AUD
4.8 (37)
Get notified via email or SMS when this product is back in stock
$29.99 AUD
4.8 (37)
Get notified via email or SMS when this product is back in stock
${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.
Fusions XL Safety Glasses
The Fusions XL are the ultimate XL safety glasses. Designed for larger heads, the Fusions XL safety glasses are 15% larger than the original Fusions for a wider and more comfortable fit.
