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

3d-viewer test

main
Jan Umbach 2024-06-14 10:36:53 +02:00
parent 5d5912400e
commit 4a08bd2ca3
1 changed files with 0 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,9 +38,6 @@
<script type="text/javascript">
let threeJSisLoading = false;
let threeJSloaded = false;
let globalInputFormsObjValues = {
"test1": {
"text1": "test"
@ -105,71 +102,6 @@
this.innerHTML = '<div class="shx-input-forms-container"></div>';
this.container = this.querySelector('.shx-input-forms-container');
let container = this.container;
this.tJS = {
threeJS: null,
loadedAddons: 0,
addons: {
STLLoader: null,
},
scene: null,
camera: null,
renderer: null
};
let tJS = this.tJS;
function checkThreeJSLoaded() {
if(tJS.loadedAddons >= tJS.addons.length) {
console.log('threejs loaded');
threeJSisLoading = false;
}
}
if(!threeJSisLoading && !threeJSloaded) {
// load threejs
let script = document.createElement('script');
script.src = "{{ 'tjs-three.module.min.js' | asset_url }}";
script.id = 'threejs-script';
script.type = "module";
document.head.appendChild(script);
script.addEventListener('load', () => {
threeJSloaded = true;
console.log('threejs loaded');
import("{{ 'tjs-three.module.min.js' | asset_url }}").then(THREE => {
tJS.threeJS = 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.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');
container.appendChild(tJS.renderer.domElement);
});
import("{{ 'tjs-STLLoader.js' | asset_url }}").then((THREE) => {
tJS.addons.STLLoader = THREE;
tJS.loadedAddons++;
checkThreeJSLoaded();
});
});
}
}
initCurrentVariant(id) {
@ -194,26 +126,7 @@
}).then((blob) => {
// log size in kB
console.log(blob.size / 1024 + 'kB');
const material = new (tJS.threeJS).MeshBasicMaterial({ color: 0x00ff00 });
const stl_cube = new (tJS.threeJS).STLLoader();
stl_cube.load(blob, function (geometry) {
stl_cube = new (tJS.threeJS).Mesh(geometry, material);
tJS.scene.add(stl_cube);
tJS.camera.position.z = 5;
tJS.renderer.setAnimationLoop(animate);
function animate() {
stl_cube.rotation.x += 0.01;
stl_cube.rotation.y += 0.01;
tJS.renderer.render(tJS.scene, tJS.camera);
}
});
});
}