Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shx-3d-render

main
Jan Umbach 2024-06-13 21:49:32 +02:00
parent 23acdf8a79
commit 376f5eedd3
1 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
snippets/shx-3d-render-input.liquid
View File

@ -103,19 +103,17 @@
this.innerHTML = '<div class="shx-input-forms-container"></div>';
this.container = this.querySelector('.shx-input-forms-container');
let container = this.container;
let threeJS = null;
let tJS_scene = null;
let tJS_camera = null;
let tJS_renderer = null;
this.tJS = {
script: threeJS,
scene: tJS_scene,
camera: tJS_camera,
renderer: tJS_renderer
script: null,
scene: null,
camera: null,
renderer: null
};
let tJS = this.tJS;
if(!threeJSisLoading && !threeJSloaded) {
// load threejs
let script = document.createElement('script');
@ -129,24 +127,24 @@
console.log('threejs loaded');
import("{{ 'three.module.min.js' | asset_url }}").then(THREE => {
threeJS = THREE;
tJS.script = THREE;
// calc width and height
const width = container.offsetWidth;
const height = width;
// Your Three.js code goes here
tJS_scene = new THREE.Scene();
tJS_camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
tJS.scene = new THREE.Scene();
tJS.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
tJS_renderer = new THREE.WebGLRenderer();
tJS.renderer = new THREE.WebGLRenderer();
tJS_renderer.setSize(width * 1.5, height * 1.5);
tJS_renderer.domElement.style.width = width + 'px';
tJS_renderer.domElement.style.height = height + 'px';
tJS_renderer.domElement.classList.add('shx-threejs-renderer');
tJS.renderer.setSize(width * 1.5, height * 1.5);
tJS.renderer.domElement.style.width = width + 'px';
tJS.renderer.domElement.style.height = height + 'px';
tJS.renderer.domElement.classList.add('shx-threejs-renderer');
container.appendChild(tJS_renderer.domElement);
container.appendChild(tJS.renderer.domElement);
});