Spin 1/2 Simulation in Elastic Solid (Simplified Version, Chantal Roth)

by Chantal Roth

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spin 1/2 Elastic Solid Simulation</title>
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

  <style>
    body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    /* Style for the GUI container */
    /* Targeting the specific 'info' label within dat.GUI */
  .dg .property-name {
    color: #ffffff; /* Default color for all text labels */
  }
  
  .dg .property-name[data-property="showInfo"] {
    color: #ffff00; /* Yellow */
    font-weight: bold; /* Make it bold */
  }
  
/* Ensure GUI container has appropriate z-index and positioning */
#gui-container {
  position: absolute;
  top: 30px;
  left: 10px;
  z-index: 1001; /* Adjusted to be above the popup background but below the close button */
  padding-right: 50px; /* Add padding to prevent overlap with the close button */
}
    /* Styles for the info popup */
    #info-popup {
      display: none; /* Hidden by default */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
	   overflow: auto; /* Enable scroll if needed */
      background-color: rgba(0, 0, 0, 0.6); /* Black background with opacity */
      backdrop-filter: blur(4px); /* Blur effect for background */
      animation: fadeIn 0.3s ease-out;
    }

   #info-popup-content {
      background-color: #fefefe;
      margin: 1% auto;
      padding: 20px 30px;
      border-radius: 10px;
      width: 90%;
      max-width: 1200px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      position: relative;
      animation: slideIn 0.4s ease-out;
	 max-height: 90vh; /* Slightly reduced...

JavaScript

// Import necessary THREE.js components (assuming they are included in your HTML)
// import * as THREE from 'three';
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// import * as dat from 'dat.gui';

// ----------------------------
// Custom Shader Material (if needed)
// ----------------------------
const vertexShader = `
    attribute float size;
    attribute vec3 color;
    attribute float alpha;
    varying vec3 vColor;
    varying float vAlpha;
    void main() {
      vColor = color;
      vAlpha = alpha;
      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
      gl_PointSize = size * (300.0 / -mvPosition.z);
      gl_Position = projectionMatrix * mvPosition;
    }
  `;

const fragmentShader = `
    varying vec3 vColor;
    varying float vAlpha;
    void main() {
      vec2 coord = gl_PointCoord - vec2(0.5);
      float distance = length(coord);
      if (distance > 0.5) {
        discard;
      }
      gl_FragColor = vec4(vColor, vAlpha);
    }
  `;

const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  transparent: true,
  depthTest: true,
  depthWrite: false,
  blending: THREE.NormalBlending,
});

// ----------------------------
// Scene, Camera, Renderer Setup
// ----------------------------
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);

let sphereRadius = 0.8; // Radius of the central sphere

const camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ----------------------------
// OrbitControls
// ----------------------------
const controls = new THREE.OrbitControls(camera,...