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:13:59 +02:00
parent 01ee16168a
commit 5d57010d46
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,7 @@
let globalInputFormsObjValues = {
"test1": {
"text1": "test"
"text1": "test"
},
"test2": {
"text1": "test1",
@ -99,6 +99,16 @@
this.container = this.querySelector('.shx-input-forms-container');
let container = this.container;
let tJS_scene = null;
let tJS_camera = null;
let tJS_renderer = null;
this.tJS = {
scene: tJS_scene,
camera: tJS_camera,
renderer: tJS_renderer
};
if(!threeJSisLoading && !threeJSloaded) {
// load threejs
let script = document.createElement('script');
@ -116,33 +126,31 @@
const width = container.offsetWidth;
const height = width;
// Your Three.js code goes here
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
// Your Three.js code goes here
tJS_scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
tJS_renderer = new THREE.WebGLRenderer();
renderer.setSize(width * 1.5, height * 1.5);
renderer.domElement.style.width = width + 'px';
renderer.domElement.style.height = height + 'px';
renderer.domElement.style.marginTop = '1rem';
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.style.marginTop = '1rem';
renderer.setAnimationLoop(animate);
container.appendChild(renderer.domElement);
tJS_renderer.setAnimationLoop(animate);
container.appendChild(tJS_renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
tJS_scene.add(cube);
camera.position.z = 5;
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
tJS_renderer.render(tJS_scene, camera);
}
});