diff --git a/package-lock.json b/package-lock.json index 48090671..e12fc70b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3127,6 +3127,41 @@ } } }, + "@react-three/fiber": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.2.0.tgz", + "integrity": "sha512-esZe+E9T/aYEM4HlBkirr/yRE8qWTp9WUsLISyHHMCHKlJv85uc5N4wwKw+Ay0QeTSITw6T9Q3Svpu383Q+CSQ==", + "requires": { + "@babel/runtime": "^7.17.8", + "@types/react-reconciler": "^0.28.9", + "@types/webxr": "*", + "base64-js": "^1.5.1", + "buffer": "^6.0.3", + "its-fine": "^2.0.0", + "react-reconciler": "^0.31.0", + "react-use-measure": "^2.1.7", + "scheduler": "^0.25.0", + "suspend-react": "^0.1.3", + "use-sync-external-store": "^1.4.0", + "zustand": "^5.0.3" + }, + "dependencies": { + "buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "scheduler": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" + } + } + }, "@rollup/plugin-image": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz", @@ -6885,6 +6920,11 @@ "@types/react": "*" } }, + "@types/react-reconciler": { + "version": "0.28.9", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz", + "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==" + }, "@types/react-responsive": { "version": "8.0.4", "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-8.0.4.tgz", @@ -7012,6 +7052,11 @@ } } }, + "@types/webxr": { + "version": "0.5.22", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz", + "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==" + }, "@types/yargs": { "version": "15.0.14", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz", @@ -13576,8 +13621,7 @@ "ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", - "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" }, "iferr": { "version": "0.1.5", @@ -14293,6 +14337,14 @@ "iterate-iterator": "^1.0.1" } }, + "its-fine": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz", + "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==", + "requires": { + "@types/react-reconciler": "^0.28.9" + } + }, "jake": { "version": "10.8.5", "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", @@ -20959,6 +21011,21 @@ "resolved": "https://registry.npmjs.org/react-range/-/react-range-1.8.11.tgz", "integrity": "sha512-LaF5xwYy6u0Rnp0hRBBLKqJx0DmNpW2GqMSoj8OJ0IYiCM7GmSNf0UKxmN4cN0BCb2EwzD3zA9nw6Fkug2c3mg==" }, + "react-reconciler": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz", + "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==", + "requires": { + "scheduler": "^0.25.0" + }, + "dependencies": { + "scheduler": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -21135,6 +21202,11 @@ } } }, + "react-use-measure": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz", + "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==" + }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -23616,6 +23688,11 @@ "supports-color": "^7.0.0" } }, + "suspend-react": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz", + "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==" + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -24910,6 +24987,11 @@ "@juggle/resize-observer": "^3.3.1" } }, + "use-sync-external-store": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==" + }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", @@ -25995,6 +26077,11 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true }, + "zustand": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.6.tgz", + "integrity": "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==" + }, "zwitch": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz", diff --git a/package.json b/package.json index 8f16a3cc..bdcd3051 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "dependencies": { "@babel/preset-typescript": "^7.17.12", "@babel/runtime": "^7.17.9", + "@react-three/fiber": "^9.2.0", "@types/classnames": "^2.2.11", "axios": "^0.21.1", "base64-js": "^1.5.1", @@ -66,7 +67,7 @@ "scroll-into-view-if-needed": "^2.2.28", "styled-components": "^5.3.5", "svgtodatauri": "0.0.0", - "three": "^0.139.0", + "three": "^0.139.2", "use-deep-compare-effect": "^1.6.1", "use-query-params": "^1.2.3", "use-resize-observer": "^8.0.0", diff --git a/src/app.tsx b/src/app.tsx index 55c43f38..89cb5dd9 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -26,6 +26,7 @@ import { Navbar } from './components/navigation/Navbar'; import periodicTableImage from './assets/images/periodictable.png'; import { MofExplorer } from './pages/MofExplorer'; import { MatscholarMaterialsExplorer } from './pages/MatscholarMaterialsExplorer/MatscholarMaterialsExplorer'; +import { CrystalStructureAnimationViewer } from './pages/CrystalStructureAnimationViewer'; const mountNodeSelector = 'app'; const mountNode = document.getElementById(mountNodeSelector); @@ -46,6 +47,7 @@ ReactDOM.render( Contributions Crystal Structure Sandbox + Crystal Animation
@@ -85,6 +87,9 @@ ReactDOM.render( + + + diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.less b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.less new file mode 100644 index 00000000..09e2b59a --- /dev/null +++ b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.less @@ -0,0 +1,89 @@ +.mpc-scene { + position: relative; +} + +.tooltiptext { + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; +} + +.show-pointer { + cursor: pointer !important; +} + +.mpc-scene-square { + position: relative; +} + +.mpc-scene-square:before { + content: ''; + display: block; + height: 0; + width: 0; + float: left; + padding-bottom: 100%; +} + +.mpc-scene-square::after { + clear: left; + content: ' '; + display: table; +} + +/** +* Prevent the structure layout from growing beyond the height of the modal. +* Setting max-width with vh instead of simply setting max-height so we don't interfere +* with the structure's styles that force it to render with 1:1 ratio. +*/ +.mpc-scene-square-wrapper { + width: 100% !important; + max-width: calc(95vh - 3rem); + height: auto !important; + margin: auto; +} + +.mpc-scene .mpc-button-bar { + position: absolute; + right: 0; + z-index: 3; +} + +.mpc-scene-settings-panel { + position: absolute; + right: 4.5rem; + max-height: 100%; + max-width: 450px; + overflow: auto; + border: 1px solid #ccc; + border-radius: 6px; + padding: 1.25rem; + background-color: #fff; + opacity: 0.8; + z-index: 2; +} + +.mpc-scene-bottom-panel { + position: absolute; + right: 0; + bottom: 0; + z-index: 1; +} + +/** + * Include this explicitly so that toggling the settings panel works without bulma + */ +.mpc-scene-settings-panel.is-hidden { + display: none; +} + +/** + * Include this explicitly so that file dropdown looks okay without bulma + */ +.mpc-scene .dropdown-content { + position: absolute; + right: 0; + min-width: 100px; +} diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx new file mode 100644 index 00000000..ec892e99 --- /dev/null +++ b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx @@ -0,0 +1,47 @@ +import { mount } from 'enzyme'; +import * as React from 'react'; +import { CrystalToolkitAnimationScene } from './CrystalToolkitAnimationScene'; +import { s2 as scene } from '../scene/simple-scene'; +import { MOUNT_NODE_CLASS, Renderer } from '../scene/constants'; +import Scene from '../scene/Scene'; + +const spy = jest.spyOn(Scene.prototype, 'renderScene'); +const RENDERSCENE_CALLS_BY_REACT_RENDERING = 1; // goal is to reach 1 and stay there :) + +// When we run test, three.js is bundled differently, and we encounter again the bug +// where we have 2 different instances of three +describe('', () => { + it('should be rendered', () => { + const wrapper = renderElement(); + expect(wrapper.find(`.${MOUNT_NODE_CLASS}`).length).toBe(1); + expect(wrapper.find(`.mpc-scene-square`).length).toBe(1); + + // Note(chab) we call renderScene when we mount, due to the react effect + // those are the three call sites (constructor / toggleVis / inlet ) + expect(spy).toBeCalledTimes(1 * RENDERSCENE_CALLS_BY_REACT_RENDERING); + + // fails because SVGRender will import a different instance of Three + // expect(wrapper.find('path').length).toBe(6); + }); + + it('should re-render if we change the size of the screen', () => { + const wrapper = renderElement(); + wrapper.setProps({ size: 400 }); + expect(spy).toBeCalledTimes(2 * RENDERSCENE_CALLS_BY_REACT_RENDERING); + }); +}); + +function renderElement() { + // we use mount to test the rendering of the underlying elements + return mount( + + ); +} diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx new file mode 100644 index 00000000..dc535c01 --- /dev/null +++ b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx @@ -0,0 +1,727 @@ +import React, { + MutableRefObject, + ReactNode, + useContext, + useEffect, + useReducer, + useRef, + useState +} from 'react'; +import Scene from '../scene/Scene'; +import { subscribe } from '../scene/download-event'; +import './CrystalToolkitAnimationScene.less'; +import { + AnimationStyle, + DEBUG_STYLE, + DEFAULT_SCENE_SIZE, + ExportType, + MOUNT_DEBUG_NODE_CLASS, + MOUNT_NODE_CLASS, + MOUNT_NODE_STYLE +} from '../scene/constants'; +import { CameraContext } from '../CameraContextProvider'; +import { + cameraReducer, + CameraReducerAction, + CameraState, + initialState +} from '../CameraContextProvider/camera-reducer'; +import { usePrevious } from '../../../utils/hooks'; +import toDataUrl from 'svgtodatauri'; +import * as THREE from 'three'; +import { WebGLRenderer } from 'three'; +import { ColladaExporter } from 'three/examples/jsm/exporters/ColladaExporter'; +import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter'; +import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter'; +import useResizeObserver from 'use-resize-observer'; +import { Enlargeable } from '../../data-display/Enlargeable'; +import { FaCamera, FaCogs, FaCompress, FaExpand, FaFileExport, FaUndo } from 'react-icons/fa'; +import { ButtonBar } from '../../data-display/ButtonBar'; +import { Dropdown } from '../../navigation/Dropdown'; +import classNames from 'classnames'; +import { Tooltip } from '../../data-display/Tooltip'; +import ReactTooltip from 'react-tooltip'; +import { v4 as uuidv4 } from 'uuid'; +import { ModalCloseButton } from '../../data-display/Modal/ModalCloseButton'; +import { downloadBlob, downloadJSON } from '../../data-entry/utils'; +import { RangeSlider } from '../../data-entry/RangeSlider'; +import { useFrame } from '@react-three/fiber'; + +const getSceneSize = (sceneSize) => (sceneSize ? sceneSize : DEFAULT_SCENE_SIZE); + +let ID_GENERATOR = 0; + +let originalCameraState: CameraState; + +export interface CrystalToolkitAnimationSceneProps { + /** + * The ID used to identify this component in Dash callbacks + */ + id?: string; + + /** + * Dash-assigned callback that should be called whenever any of the + * properties change + */ + setProps?: (value: any) => any; + + /** + * First child will be rendered as the settings panel. + * Second child will be rendered as the bottom panel (legend). + */ + children?: ReactNode; + + /** + * Class name that will wrap around the whole scene component. + * When enlarged, this class name is applied to the modal-content element. + */ + className?: string; + + /** + * Add a debugging view + */ + debug?: boolean; + + /** + * Scene JSON, the easiest way to generate this is to use the Scene class + * in crystal_toolkit.core.scene and its to_json method. + */ + data: any; + + /** + * Options used for generating scene. + * Supported options and their defaults are given as follows: + * { + * antialias: true, // set to false to improve performance + * renderer: 'webgl', // 'svg' also an option, used for unit testing + * transparentBackground: false, // transparent background + * background: '#ffffff', // background color if not transparent, + * sphereSegments: 32, // decrease to improve performance + * cylinderSegments: 16, // decrease to improve performance + * staticScene: true, // disable if animation required + * defaultZoom: 1, // 1 will zoom to fit object exactly, <1 will add padding between object and box bounds + * zoomToFit2D: false // if true, will zoom to fit object only along the X and Y axes (not Z) + * extractAxis: false // will remove the axis from the main scene + * } + * There are several additional options used for debugging and testing, + * please consult the source code directly for these. + */ + settings?: any; + + /** + * Hide/show nodes in scene by its name (key), value is 1 to show the node + * and 0 to hide it. + */ + toggleVisibility?: any; + /** + * File type to be downloaded as an image. Either png or dae + */ + /** + * Set to trigger a screenshot or scene download. + * Must be an object with the following structure: + * { + * "filetype": "png" // the image format ("png", "dae") + * } + * Passing this prop as an object ensures that + * new requests are triggered any time the prop + * is set. + */ + imageRequest?: any; + /** + * THIS PROP IS SET AUTOMATICALLY + * Data string for the image generated by imageRequest + * This string can be downloaded as the filetype specified in your imageRequest object + */ + imageType?: ExportType; + /** + * THIS PROP IS SET AUTOMATICALLY + * Data string for the image generated on image button click + */ + imageData?: string; + /** + * THIS PROP IS SET AUTOMATICALLY + * Date string that represents the time imageData was set. + * Use this prop in dash callbacks to trigger downloads of imageData. + */ + imageDataTimestamp?: any; + /** + * List of options to show in file download dropdown + */ + fileOptions?: string[]; + /** + * THIS PROP IS SET AUTOMATICALLY + * The last file type clicked in the file download menu + */ + fileType?: string; + /** + * THIS PROP IS SET AUTOMATICALLY + * Date string that represents the time fileType was set. + * Use this prop in dash callbacks to trigger file downloads. + */ + fileTimestamp?: any; + onObjectClicked?: (value: any) => any; + /** + * Size of axis inlet + */ + inletSize?: number; + /** + * Size of scene + */ + sceneSize?: number | string; + /** + * Padding of axis inlet + */ + inletPadding?: number; + /** + * Orientation of axis view + */ + axisView?: string; + /** + * Animation + * + * Set up animation styles + * + * 'play' + * 'none' + * 'slider' + */ + animation?: string; + /** + * THIS PROP IS SET AUTOMATICALLY + * Object that maintains the current state of the camera. + * e.g. + * { + * position: {x: 0, y: 0, z: 0}, + * quarternion: {x: 0, y: 0, z: 0, w: 0}, + * zoom: 1, + * setByComponentId: "1", + * following: true + * } + */ + currentCameraState?: CameraState; + /** + * Object for setting the scene to a custom camera state. + * When modified, the camera will update to new custom state. + * e.g. + * { + * position: {x: 0, y: 0, z: 0}, + * quarternion: {x: 0, y: 0, z: 0, w: 0}, (optional) + * zoom: 1 (optional) + * } + */ + customCameraState?: CameraState; + /** + * Determines if control bar is visible + * @default true + */ + showControls?: boolean; + /** + * Determines if expand button in control bar is visible + * @default true + */ + showExpandButton?: boolean; + /** + * Determines if image download button in control bar is visible + * @default true + */ + showImageButton?: boolean; + /** + * Determines if file export button in control bar is visible + * @default true + */ + showExportButton?: boolean; + /** + * Determines if return to original position button in control bar is visible + * @default true + */ + showPositionButton?: boolean; +} + +/** + * This component is intended to draw simple 3D scenes using the popular + * Three.js scene graph library. In particular, the JSON representing the 3D scene + * is intended to be human-readable, and easily generated via Python. This is not + * intended to be a replacement for a full scene graph library, but for rapid + * prototyping by non-experts. + */ +export const CrystalToolkitAnimationScene: React.FC = ({ + imageType = ExportType.png, + imageRequest = {}, + setProps = () => null, + showControls = true, + showExpandButton = true, + showImageButton = true, + showExportButton = true, + ...otherProps +}) => { + let props = { + imageType, + imageRequest, + setProps, + showControls, + showExpandButton, + showImageButton, + showExportButton, + ...otherProps + }; + /** + * mount nodes, those are passed in the template and are populated when + * the component is mounted + */ + const mountNodeRef = useRef(null); + + /** + * Wrap mountNodeRef in a resize observer so that the scene + * can resize properly even when the window size doesn't change + */ + const { width, height } = useResizeObserver({ + ref: mountNodeRef, + onResize: ({ width, height }) => { + if (scene.current) { + console.log('resizing'); + scene.current.resizeRendererToDisplaySize(); + } + } + }); + + const mountNodeDebugRef = useRef(null); + const componentId = useRef((++ID_GENERATOR).toString()); + const previousAnimationSetting = usePrevious(props.animation); + // we use a ref to keep a reference to the underlying scene + const scene: MutableRefObject = useRef(null); + const [expanded, setExpanded] = useState(false); + const [showSettingsPanel, setShowSettingsPanel] = useState(false); + const settingsPanel = React.Children.map(props.children, (child, i) => (i === 0 ? child : null)); + const hasSettingsPanel = settingsPanel && settingsPanel.length > 0; + const bottomPanel = React.Children.map(props.children, (child, i) => (i === 1 ? child : null)); + const hasBottomPanel = bottomPanel && bottomPanel.length > 0; + const tooltipId = uuidv4(); + + /** + * Handle saving image to png + * If using the SVGRenderer, convert SVG to canvas image first + * Set imageData prop to data uri + */ + const setPngData = (sceneComponent) => { + if (sceneComponent.renderer instanceof WebGLRenderer) { + // force a render (in case buffer has been cleared) + sceneComponent.renderScene(); + const imageData = sceneComponent.renderer.domElement.toDataURL('image/png'); + const imageDataTimestamp = Date.now(); + props.setProps({ imageData, imageDataTimestamp }); + // wait for next event loop before rendering + setTimeout(() => { + sceneComponent.renderScene(); + }); + } else { + // SVGRenderer assumed + sceneComponent.renderScene(); + toDataUrl(sceneComponent.renderer.domElement, 'image/png', { + callback: function (imageData: string) { + const imageDataTimestamp = Date.now(); + props.setProps({ imageData, imageDataTimestamp }); + } + }); + } + }; + + /** + * Handle saving image to collada file (.dae) + * Set imageData prop to data uri + */ + const setColladaData = (sceneComponent: Scene) => { + const colladaExporter = new ColladaExporter(); + colladaExporter.parse(sceneComponent.scene, function (result) { + const blob = new Blob([result.data], { type: 'model/vnd.collada+xml' }); + downloadBlob(blob, 'crystal_toolkit_scene.dae'); + }); + }; + + const setGLTFData = (sceneComponent: Scene) => { + const gltfExporter = new GLTFExporter(); + gltfExporter.parse(sceneComponent.scene, function (gltf) { + const blob = new Blob([JSON.stringify(gltf)], { type: 'model/vnd.gltf+json' }); + downloadBlob(blob, 'crystal_toolkit_scene.gltf'); + }); + }; + + const setGLBData = (sceneComponent: Scene) => { + const gltfExporter = new GLTFExporter(); + gltfExporter.parse( + sceneComponent.scene, + function (arraybuffer) { + const blob = new Blob([arraybuffer], { type: 'model/gltf-binary' }); + downloadBlob(blob, 'crystal_toolkit_scene.glb'); + }, + { binary: true } + ); + }; + + const setUSDZData = async (sceneComponent: Scene) => { + const usdzExporter = new USDZExporter(); + const arrayBuffer = await usdzExporter.parse(sceneComponent.scene); + const blob = new Blob([arrayBuffer], { type: 'model/vnd.usdz+zip' }); + // consult "AR Quick Look" documentation for more information on why "ar" tag is included + // https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/ + // filename omitted to avoid "Download" dialog box on iOS devices; the intent with + // this option is to _show_ the file rather than download the file, however on non-iOS + // devices this may cause confusion + downloadBlob(blob, undefined, 'ar'); + }; + + const requestImage = (filetype: ExportType, sceneComponent: Scene) => { + switch (filetype) { + case ExportType.png: + setPngData(sceneComponent); + break; + case ExportType.dae: + setColladaData(sceneComponent); + break; + case ExportType.gltf: + setGLTFData(sceneComponent); + break; + case ExportType.glb: + setGLBData(sceneComponent); + break; + case ExportType.usdz: + setUSDZData(sceneComponent); + break; + default: + throw new Error('Unknown filetype.'); + } + }; + + // called after the component is mounted, so refs are correctly populated + useEffect(() => { + const _s = (scene.current = new Scene( + props.data, + mountNodeRef.current!, + props.settings, + props.inletSize, + props.inletPadding, + (objects) => { + if (props.onObjectClicked) { + props.onObjectClicked(objects); + } + }, + /** Sets dispatch function on the scene object */ + (position, quaternion, zoom) => { + cameraDispatch && + cameraDispatch({ + type: CameraReducerAction.NEW_POSITION, + payload: { + componentId: componentId.current, + position, + quaternion, + zoom + } + }); + }, + mountNodeDebugRef.current! + )); + + _s.removeListener(); + _s.animate(); + /** + * I believe this can be removed because image requesting is now handled by + * the image dropdown. + * Unclear what the role of the observable is here. + */ + const subscription = subscribe(({ filetype }) => requestImage(filetype, _s)); + return () => { + // clean up code + subscription.unsubscribe(); + _s.onDestroy(); + }; + }, []); + + // Note(chab) those hooks will be executed sequentially at mount time, and on change of the deps array elements + useEffect( + () => scene.current!.enableDebug(props.debug!, mountNodeDebugRef.current), + [props.debug] + ); + // An interesting classical react issue that we fixed : look at the stories, we do not pass anymore an empty object, + // but a reference to an empty object, otherwise, it will be a different reference, and treated as a different object, thus + // triggering the effect + useEffect(() => { + if (!props.data || !(props.data as any).name || !(props.data as any).contents) { + console.warn( + 'no data passed ( or missing name /content ), scene will not be updated', + props.data + ); + return; + } + + //FIXME(chab) we have to much calls to renderScene + !!props.data && scene.current!.addToScene(props.data, false); + // !!props.data && scene.current!.addToScene(props.data, false); + // scene.current!.animate(); + scene.current!.toggleVisibility(props.toggleVisibility as any); + }, [props.data]); + useEffect( + () => scene.current!.toggleVisibility(props.toggleVisibility as any), + [props.toggleVisibility] + ); + useEffect( + () => scene.current!.updateInsetSettings(props.inletSize!, props.inletPadding!, props.axisView), + [props.inletSize, props.inletPadding, props.axisView] + ); + + useEffect(() => { + scene.current!.resizeRendererToDisplaySize(); + }, [props.sceneSize]); + + useEffect(() => { + const { filetype } = props.imageRequest; + if (filetype) { + requestImage(filetype, scene.current!); + } + }, [props.imageRequest]); + + /** + * Manage camera state with context if component is wrapped in CameraContextProvider + * otherwise use a reducer to manage camera state locally + */ + const cameraContext = useContext(CameraContext); + const [cameraReducerState, cameraReducerDispatch] = useReducer(cameraReducer, initialState); + const cameraState = cameraContext ? cameraContext.state : cameraReducerState; + const cameraDispatch = cameraContext ? cameraContext.dispatch : cameraReducerDispatch; + if (cameraState) { + useEffect(() => { + props.setProps({ currentCameraState: cameraState }); + + if (cameraState && cameraState.position && cameraState.quaternion && cameraState.zoom) { + if (cameraState.setByComponentId !== componentId.current) { + scene.current!.updateCamera( + cameraState.position, + cameraState.quaternion, + cameraState.zoom + ); + } + if (!originalCameraState) { + originalCameraState = { ...cameraState }; + } + } + }, [cameraState.position]); + } + + /** + * When customCameraState prop changes, + * update the camera to the new state + * and save the new state into the cameraState + */ + useEffect(() => { + if (props.customCameraState) { + const { position: p, quaternion: q, zoom } = props.customCameraState; + /** + * Explicitly convert to Quaternion/Vector3 objects so that you + * can pass simple objects to customCameraState prop. + * (i.e. no need to use THREE.js constructors) + */ + const quaternion = new THREE.Quaternion(q?.x, q?.y, q?.z, q?.w); + const position = new THREE.Vector3(p?.x, p?.y, p?.z); + scene.current!.updateCamera(position!, quaternion!, zoom!); + if (cameraDispatch) { + cameraDispatch({ + type: CameraReducerAction.NEW_POSITION, + payload: { + componentId: componentId.current, + position, + quaternion, + zoom + } + }); + } + } + console.log('new props'); + }, [props.customCameraState]); + + useEffect(() => { + props.animation && scene.current!.updateAnimationStyle(props.animation as AnimationStyle); + }, [props.animation]); + + /** + * Make atom move + */ + + const size = getSceneSize(props.sceneSize); + + // NOTE(chab) we could let the user opt for a flex layout, instead of using relative/absolute + return ( + +
+ {props.showControls && ( + <> + + {props.showExpandButton && ( + + )} + {hasSettingsPanel && ( + + )} + {props.showPositionButton && ( + + )} + {props.showImageButton && ( +
ReactTooltip.hide()} data-tip data-for={`image-${tooltipId}`}> + } isArrowless isRight> +

{ + requestImage(ExportType.png, scene.current!); + }} + > + {'Screenshot (PNG)'} +

+ +

{ + requestImage(ExportType.dae, scene.current!); + }} + > + {'3D Model (DAE)'} +

+ +

{ + requestImage(ExportType.gltf, scene.current!); + }} + > + {'3D Model (GLTF)'} +

+ +

{ + requestImage(ExportType.glb, scene.current!); + }} + > + {'3D Model (GLB)'} +

+ +

{ + requestImage(ExportType.usdz, scene.current!); + }} + > + {'Augmented Reality (iOS devices only)'} +

+ + + Download visualization as + +
+ )} + {props.showExportButton && ( +
ReactTooltip.hide()} data-tip data-for={`export-${tooltipId}`}> + } isArrowless isRight> + {props.fileOptions?.map((option, i) => ( +

{ + props.setProps({ fileType: option, fileTimestamp: Date.now() }); + }} + > + {option} +

+ ))} + + + Export as + +
+ )} + + + )} + {hasSettingsPanel && ( +
+ setShowSettingsPanel(false)} /> + {settingsPanel} +
+ )} + {hasBottomPanel &&
{bottomPanel}
} +
+
+
+
+ {props.debug && ( +
+ )} + + {props.animation === AnimationStyle.SLIDER && ( + scene.current!.updateTime(values[0] / 100)} + /> + )} +
+
+ + ); +}; diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/index.tsx b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/index.tsx new file mode 100644 index 00000000..af99a2a3 --- /dev/null +++ b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/index.tsx @@ -0,0 +1 @@ +export { CrystalToolkitAnimationScene } from './CrystalToolkitAnimationScene'; diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts index b8103242..a4299615 100644 --- a/src/components/crystal-toolkit/scene/Scene.ts +++ b/src/components/crystal-toolkit/scene/Scene.ts @@ -630,7 +630,10 @@ export default class Scene { animate() { this.animationHelper.animate(); - this.controls.update(); + //this.controls.update(); + if (this.controls) { + this.controls.update(); + } this.refreshOutline(); this.renderScene(); diff --git a/src/components/crystal-toolkit/scene/animation-helper.ts b/src/components/crystal-toolkit/scene/animation-helper.ts index 07800377..9817e472 100644 --- a/src/components/crystal-toolkit/scene/animation-helper.ts +++ b/src/components/crystal-toolkit/scene/animation-helper.ts @@ -22,64 +22,130 @@ export class AnimationHelper { const animations = json.animate!; const kf = json.keyframes!; const kfl = kf.length; + const animationType = json.animateType!; // this supports animations based on the position + // pseudo code: + // ``` + // - THREE.js require a flatten array. For example, for position keyframes, + // an array like [1, 0, 0, 0, 0, 1] represents movement from (1, 0, 0) to (0, 0, 1). + // This array is used as input for VectorKeyframeTrack. + // Similarly, flattened arrays are used for QuaternionKeyframeTrack, NumberKeyframeTrack, etc. + // Reference: https://threejs.org/docs/#api/en/animation/KeyframeTrack + // - A nested array structure that improves readability and maintains compatibility with + // the original data format. This structure is later parsed into a flattened array, as required by THREE.js. + // - Construct a THREE.KeyframeTrack object. For example: + // const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values); + // where `values` is the flattened array generated in the previous step. + // - Use the private function `pushAnimations` to bind the animation to a THREE.AnimationClip + // and THREE.AnimationMixer instance. + // Example: + // this.pushAnimations('Action', kfl, [positionKF], three); + // ``` if (json.type === JSON3DObject.SPHERES || json.type === JSON3DObject.CUBES) { - if (Array.isArray(animations[0])) { - animations.forEach((a: any, idx) => - this.addAnimationForPosition(a, three.children[idx], kf, kfl) - ); + const animation = json.animate!; + const p = json.positions![0]; + + const values: number[] = []; + if (animationType == 'displacement') { + for (let i = 0; i < kfl; i++) { + // VectorKeyframeTrack requires absolute positions relative to the current position + // i.e. displacemnt itself + values.push(animation[i][0], animation[i][1], animation[i][2]); + } + } else if (animationType == 'position') { + for (let i = 0; i < kfl; i++) { + // Given an absolute position, we subtract the animation values to compute relative displacement + values.push(animation[i][0] - p[0], animation[i][1] - p[1], animation[i][2] - p[2]); + } } else { - this.addAnimationForPosition(animations, three, kf, kfl); + console.warn(`Unknown animationType: ${animationType}`); } + + const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values); + + let kflVal; + if (animationType == 'displacement') { + kflVal = -1; + } else { + kflVal = kfl; + } + this.pushAnimations('Action', kflVal, [positionKF], three); } else if (json.type === JSON3DObject.CYLINDERS) { animations.forEach((animation, aIdx) => { - const idx = animation[2]; - const positionPair = json.positionPairs![idx]; - const start = positionPair[0]; - const end = positionPair[1]; - const targetPP = [ - [start[0] + animation[0][0], start[1] + animation[0][1], start[2] + animation[0][2]], - [end[0] + animation[1][0], end[1] + animation[1][1], end[2] + animation[1][2]] - ]; - const { - scale: scaleStart, - position: positionStart, - quaternion: rotation - } = three.children[idx]; - const st = [positionStart.x, positionStart.y, positionStart.z]; - const qt = [rotation.x, rotation.y, rotation.z, rotation.w]; - const { - position, - scale, - quaternion: quaternionEnd - } = this.objectBuilder.getCylinderInfo(targetPP); - let valuesp = [...st, ...position]; - let valuesq = [ - ...qt, - ...[quaternionEnd.x, quaternionEnd.y, quaternionEnd.z, quaternionEnd.w] - ]; - const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], valuesp); - const scaleKF = new THREE.NumberKeyframeTrack( - '.scale', - [...kf], - [scaleStart.x, scaleStart.y, scaleStart.z, scaleStart.x, scale, scaleStart.z] - ); - const quaternion = new THREE.VectorKeyframeTrack('.quaternion', [...kf], valuesq); + // create cylinders from u to v + const positionPair = json.positionPairs![aIdx]; + const u_position = positionPair[0]; + const v_position = positionPair[1]; + + let valuesp: any[] = []; + let valuesq: any[] = []; + let valuess: any[] = []; + + for (let i = 0; i < kfl; i++) { + let target; + // The function `this.objectBuilder.getCylinderInfo` requires the actual positions + // of the atoms involved in the bond. + if (animationType == 'displacement') { + target = positionPair.map((item, index) => + item.map((num, idx) => num + animation[i][index][idx]) + ); + } else if (animationType == 'position') { + target = [0, 1].map((r) => [0, 1, 2].map((c) => animation[i][r][c])); + } else { + console.warn(`Unknown animationType: ${animationType}`); + } + + const { + position: positionEnd, + scale: scaleEnd, + quaternion: quaternionEnd + } = this.objectBuilder.getCylinderInfo(target); + + // make keyframeTrack's value + valuesp = [...valuesp, ...positionEnd]; + // valuesq = [...valuesq, ...quaternion]; + valuesq = [ + ...valuesq, + ...[quaternionEnd.x, quaternionEnd.y, quaternionEnd.z, quaternionEnd.w] + ]; + valuess = [...valuess, ...[1, scaleEnd, 1]]; + } + + // make keyframeTrack + const positionKF = new THREE.VectorKeyframeTrack('.position', kf, valuesp); + const quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', kf, valuesq); + const scalenKF = new THREE.VectorKeyframeTrack('.scale', kf, valuess); + + // attach keyframe to object + let kflVal; + if (animationType == 'displacement') { + kflVal = -1; + } else { + kflVal = kfl; + } this.pushAnimations( - `Cylinder-${idx}`, - kfl, - [positionKF, scaleKF, quaternion], - three.children[idx] + `Cylinder-${aIdx}`, + kflVal, + [positionKF, quaternionKF, scalenKF], + three.children[aIdx] ); }); } else if (json.type === JSON3DObject.LINES) { // for line geometries, we are doing a small hack. We cannot use morphTargets to animate a line // geometry, so the trick is to use a field that will hold the interpolated value. We can // use those values to update the vertices of the geometry in the animate method - const pt: number[] = []; + const pt: any[] = []; json.positions!.forEach((p, idx) => { - pt.push(p[0] + animations[idx][0], p[1] + animations[idx][1], p[2] + animations[idx][2]); + const pta: number[] = []; + for (let i = 0; i < kfl; i++) { + pta.push( + p[0] + animations[idx][i][0], + p[1] + animations[idx][i][1], + p[2] + animations[idx][i][2] + ); + } + pt.push(pta); }); const lines = three.children[0] as THREE.LineSegments; const a: any = ( @@ -136,15 +202,28 @@ export class AnimationHelper { } } - private addAnimationForPosition(animation, three, kf: number[], kfl: number) { - const values = this.calculateTargetPosition(three, animation); + private addAnimationForPosition(animation, three, kf: number[], kfl: number, animationType) { + const values = this.calculateTargetPosition(three, animation, kfl, animationType); const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values); this.pushAnimations('Action', kfl, [positionKF], three); } - private calculateTargetPosition({ position }: THREE.Object3D, animation) { + private calculateTargetPosition({ position }: THREE.Object3D, animation, kfl, animationType) { + // Iterate through all keyframes and construct a flattened array of their corresponding positions. const p = [position.x, position.y, position.z]; - return [...p, ...[p[0] + animation[0], p[1] + animation[1], p[2] + animation[2]]]; + const result: number[] = []; + if (animationType == 'displacement') { + for (let i = 0; i < kfl; i++) { + result.push(p[0] + animation[i][0], p[1] + animation[i][1], p[2] + animation[i][2]); + } + } else if (animationType == 'position') { + for (let i = 0; i < kfl; i++) { + result.push(animation[i][0], animation[i][1], animation[i][2]); + } + } else { + console.warn(`Unknown animationType: ${animationType}`); + } + return result; } private updateMixers(timeOrDelta, absolute = false) { @@ -176,6 +255,7 @@ export class AnimationHelper { tracks: THREE.KeyframeTrack[], rootObject: THREE.Object3D ) { + // change duration to -1 for seamlessly animation const clip = new THREE.AnimationClip(name, duration, tracks); const mixer = new THREE.AnimationMixer(rootObject); this.mixers.push(mixer); diff --git a/src/components/crystal-toolkit/scene/phonon-animation-position-scene.ts b/src/components/crystal-toolkit/scene/phonon-animation-position-scene.ts new file mode 100644 index 00000000..156e01ea --- /dev/null +++ b/src/components/crystal-toolkit/scene/phonon-animation-position-scene.ts @@ -0,0 +1,1034 @@ +export const phonon_position_scene = { + name: 'StructureGraph', + contents: [ + { + name: 'atoms', + contents: [ + { + positions: [[0.7845758536059999, 1.168836795732, 2.03394740841]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (0.785, 1.169, 2.034)\nindex:3', + clickable: true, + _meta: [3], + animate: [ + [0.7845758536059999, 1.168836795732, 2.03394740841], + [0.7764011262621325, 1.1564743747342543, 1.9693416991968262], + [0.7693524352922018, 1.14584705657254, 1.9137064570260045], + [0.7551490203946188, 1.124562568415074, 1.8018828276636505], + [0.7665157769254474, 1.141681832938288, 1.8915547948661673], + [0.7743041941886194, 1.1581135029294687, 1.8520051407759752], + [0.7809964800788669, 1.1721809739113564, 1.8176300576672375], + [0.7772337677519019, 1.1974383508047417, 1.8275308708192468], + [0.7760258934220792, 1.2054955241667076, 1.8306901905212336], + [0.7565070337053685, 1.2085684828500558, 1.8175386118201893], + [0.7481685337015371, 1.2098701529403486, 1.811908865189772], + [0.7454905148367617, 1.2112677751132475, 1.8035249443758419], + [0.7434537014061458, 1.212301354065175, 1.7971613550442314], + [0.7393570479609999, 1.2142630805047097, 1.7844126186852023], + [0.7556203149188947, 1.193007229331248, 1.7784707225420207], + [0.757033025493729, 1.1911610809047501, 1.777954822849209], + [0.7804121150766399, 1.1839443049924963, 1.8026989458661613], + [0.780635164170305, 1.1838754611882187, 1.8029349260407974], + [0.7848361378633367, 1.1735521448631512, 1.8059316743398437], + [0.7841354432652617, 1.1752743339338718, 1.805431512429739], + [0.7866382987301291, 1.1728263170143594, 1.80846818658305], + [0.7896211568505603, 1.1699136688549718, 1.8120863883438116], + [0.7900009182597948, 1.1707268258243357, 1.8133132505091423], + [0.7901857167281203, 1.1711228598798726, 1.8139106745723474], + [0.7901857167281203, 1.1711228598798726, 1.8139106745723474], + [0.7946171146453558, 1.1695200238011105, 1.8220860010733593], + [0.7966668940134863, 1.1687785910930604, 1.825867469877549], + [0.7992512099354379, 1.1650301836092578, 1.8300338070857993], + [0.8070146160179664, 1.1538236962680217, 1.8425486448327826], + [0.8225832975714963, 1.131567029430958, 1.8676415531740607], + [0.8252465261024187, 1.1298435256893182, 1.8724392110669692], + [0.8315733242574056, 1.1257656637738978, 1.8838330615408374], + [0.831758640434408, 1.126535643370932, 1.8842804058546672], + [0.8323146423060596, 1.1288456710828934, 1.8856216313251608] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.8058217408419999, 0.066124554204, 6.963321117506]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.806, 0.066, 6.963)\nindex:10', + clickable: true, + _meta: [10], + animate: [ + [0.8058217408419999, 0.066124554204, 6.963321117506], + [0.7785387855958903, 0.0309707294429991, 6.716601583503969], + [0.7551446490074605, 0.0008439671773763022, 6.505276845974348], + [0.7085383441482932, -0.0591104893938955, 6.085201122371824], + [0.7461984289541918, -0.010623396855030207, 6.425268772181077], + [0.7358946882283134, -0.0375092084046509, 6.254309643394467], + [0.7269134920363551, -0.061090932113776295, 6.106583669103355], + [0.7117095731604705, -0.009194625547007007, 6.144877440311174], + [0.7068438527959857, 0.0074297154392259975, 6.157137879521095], + [0.6738249208730884, 0.0630674917228299, 6.125322599964042], + [0.6597124045911201, 0.08688529539996051, 6.1117205665644425], + [0.641792103582078, 0.11116947784605649, 6.086220157710926], + [0.6282235794999578, 0.1295383622439194, 6.066900547115964], + [0.6011744305658459, 0.166084854839033, 6.0283393893765025], + [0.5987742785345531, 0.16591080037962358, 5.9537252166511045], + [0.598565126117454, 0.16589577651157128, 5.947241937878052], + [0.6110206075562781, 0.1761293772901737, 5.985070787042552], + [0.6111394214203271, 0.17622695911799824, 5.985431603444784], + [0.6037087555030727, 0.18280484615397202, 5.971095910927969], + [0.6049483271589574, 0.18170952963844267, 5.973484533629584], + [0.6033793848002819, 0.1835868658225554, 5.975062897618045], + [0.6015096528446814, 0.1858251079685181, 5.976941556021905], + [0.6023785786749474, 0.1862148893419568, 5.980350057971594], + [0.6028016241688364, 0.1864047917428322, 5.982009387653487], + [0.6028016241688364, 0.1864047917428322, 5.982009387653487], + [0.6036019493879263, 0.18872280499838973, 5.994556475630788], + [0.6039699082863889, 0.189794746686188, 6.000354605671681], + [0.6035455298845072, 0.19208813598720628, 6.000214877739265], + [0.6022443385997337, 0.1989322067010098, 5.999752877530518], + [0.5995299953213886, 0.21247599123605698, 5.998657880388485], + [0.600510389021842, 0.21600787913661823, 6.002327065644605], + [0.602816463825888, 0.224374057106656, 6.0110118002752], + [0.6046131239740102, 0.226371964289039, 6.011649249688299], + [0.610005029581575, 0.2323695913911279, 6.013562473796582] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[2.9509585818639996, 5.593276804547999, 10.717722116670998]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (2.951, 5.593, 10.718)\nindex:5', + clickable: true, + _meta: [5], + animate: [ + [2.9509585818639996, 5.593276804547999, 10.717722116670998], + [2.910135862661794, 5.572583440194601, 10.347818370982255], + [2.8751146802428793, 5.554789597022323, 10.03008774485167], + [2.805268393964876, 5.519135231345622, 9.394804711590293], + [2.8616464397486907, 5.547805047030131, 9.90653118523608], + [2.8957336338751256, 5.686406543802927, 9.668627124244683], + [2.925315003748154, 5.8068707354972355, 9.462379487920941], + [2.936957733184834, 5.970404275371443, 9.544801907933683], + [2.940681520835841, 6.022694175497022, 9.571157703679425], + [2.898114983021827, 6.0774947016117125, 9.563643855842017], + [2.8798757809160476, 6.100971492222529, 9.560408949366709], + [2.8836745720755586, 6.139760918643642, 9.582733938416101], + [2.886540167733004, 6.169190994767981, 9.599666263797888], + [2.892210081617389, 6.228102547614745, 9.633536530211758], + [2.933139042989367, 6.176085758430146, 9.609484367021054], + [2.9366957552323507, 6.171564931853767, 9.607393917300506], + [3.000517211802852, 6.174647817391077, 9.710026658367358], + [3.0011259916824438, 6.1746772352777874, 9.711005660835616], + [2.992913285221382, 6.165607144103769, 9.70372665082016], + [2.9942830184811404, 6.167117399672343, 9.704939932189154], + [2.99470830695861, 6.170640694302306, 9.712495396816045], + [2.99521605510453, 6.174836104214205, 9.721501183364534], + [2.998291900807914, 6.176945391946945, 9.727650581127637], + [2.999789475451925, 6.1779722412056985, 9.730644550318143], + [2.999789475451925, 6.1779722412056985, 9.730644550318143], + [3.00880635196471, 6.186375210059834, 9.759181772735019], + [3.01297361544174, 6.190260584506059, 9.772375257926518], + [3.0181749498977237, 6.184555992594681, 9.78160670917878], + [3.033779890686775, 6.167407967600396, 9.809293501087012], + [3.064993749408298, 6.132973431105498, 9.864637715419018], + [3.072429818644351, 6.134728324272944, 9.879236452340432], + [3.090070044761202, 6.138885546456722, 9.913877882204703], + [3.0921606731411138, 6.143901447147164, 9.915456620331177], + [3.0984333761000182, 6.15895113824067, 9.920193453643808] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.766183039244, 2.055509868408, 5.167530275648]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.766, 2.056, 5.168)\nindex:6', + clickable: true, + _meta: [6], + animate: [ + [0.766183039244, 2.055509868408, 5.167530275648], + [0.7598325658254006, 2.0391667632187174, 5.002036453938823], + [0.7543140158854877, 2.0251181603643293, 4.859655994783154], + [0.7430209508006529, 1.9969843668875946, 4.5740331515977815], + [0.751944340972483, 2.0196141761664532, 4.803455113067689], + [0.7710863860526485, 2.067126708411313, 4.698563647561208], + [0.7878295613452247, 2.1084556555100478, 4.6074783654688085], + [0.80018962688556, 2.1805569099140913, 4.641255494020431], + [0.8041513820348336, 2.2036230110757744, 4.6520560374139155], + [0.8063894626557943, 2.2427661553389586, 4.6402622758713825], + [0.8073123182755807, 2.259531196026561, 4.635215888985691], + [0.8279346199474134, 2.2930399623034825, 4.642695720769197], + [0.8436224501826665, 2.3184984127796997, 4.648373611765027], + [0.8751906806205567, 2.369598830842808, 4.659750550315609], + [0.91854974195764, 2.3612519705317236, 4.6530180580099545], + [0.9223180687552335, 2.360526243968267, 4.652432814684401], + [0.9580220478604883, 2.3648007116982415, 4.693562595474127], + [0.9583625913589637, 2.3648415009693906, 4.693954926080972], + [0.9586796865606377, 2.366226267674549, 4.679973439220917], + [0.9586267993132558, 2.365993889710521, 4.682304685965655], + [0.9598305155126382, 2.3685034758580077, 4.6828138377713255], + [0.9612644166199115, 2.3714901191456246, 4.683421266324121], + [0.9623569133867158, 2.3723222724518087, 4.686851618117375], + [0.962888817563153, 2.372727427912548, 4.688521820796092], + [0.962888817563153, 2.372727427912548, 4.688521820796092], + [0.9677566843430174, 2.3769056715405634, 4.700366816261842], + [0.970007211707301, 2.378837698610671, 4.705842251154486], + [0.9738423167172356, 2.3785384068164444, 4.708231991958287], + [0.9853457267457298, 2.3776014967259966, 4.715398401554906], + [1.008344764133625, 2.375571471938035, 4.72972095618946], + [1.0127258462247628, 2.378425891038428, 4.7345601022647035], + [1.0231220208019514, 2.3851872681698283, 4.7460412761296755], + [1.0241086223841067, 2.3879141140860094, 4.746319136228938], + [1.0270687716976556, 2.3960963746414845, 4.74715461596201] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[3.032793386686, 1.595800684452, 7.298952718514]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (3.033, 1.596, 7.299)\nindex:1', + clickable: true, + _meta: [1], + animate: [ + [3.032793386686, 1.595800684452, 7.298952718514], + [2.992410429339984, 1.5622232434168297, 7.056963750296071], + [2.957692922583618, 1.533386928120192, 6.849043960488137], + [2.8881540560174224, 1.475750384458143, 6.433064213424041], + [2.944085899215813, 1.522189245974174, 6.7679626713260745], + [2.975402088408139, 1.5321223627491989, 6.617328810410407], + [3.0024896471891025, 1.5403211066283284, 6.486616934160823], + [3.0068493111167833, 1.5874313213010827, 6.533831284346947], + [3.008235285058749, 1.6024543006365786, 6.5489198955098376], + [2.9533750863492556, 1.6247385151836875, 6.532664437997139], + [2.929882842127644, 1.6342978764052294, 6.525664641483365], + [2.9195485214825156, 1.652545907968935, 6.537071537182982], + [2.9116735534220113, 1.6663830258440722, 6.545718619957251], + [2.8957733709298608, 1.6940503407147993, 6.562998404162375], + [2.907223232506234, 1.6715779366880794, 6.57034446568924], + [2.9082183264076686, 1.6696243761960783, 6.570982290961367], + [2.949098124516538, 1.6659635733855924, 6.65750688454351], + [2.9494880682244067, 1.6659286784106901, 6.658332175211338], + [2.9362830817945045, 1.664888365422654, 6.655278185157553], + [2.9384850269316174, 1.6650633086735271, 6.655785924343111], + [2.9373381593320533, 1.6655021234782343, 6.662324539363483], + [2.9359725476735017, 1.6660296490963213, 6.670114910403812], + [2.9389082091305876, 1.6667155844608605, 6.674374804097814], + [2.9403375183910865, 1.667049566344847, 6.676448686427591], + [2.9403375183910865, 1.667049566344847, 6.676448686427591], + [2.947369009368653, 1.6665115554128933, 6.699246273503547], + [2.950618544243106, 1.6662623010837085, 6.709787675527696], + [2.9528494081336145, 1.6629067105017794, 6.718641393694432], + [2.9595458302729667, 1.6528721258800787, 6.745200338961533], + [2.9729544154682515, 1.6329325219241262, 6.798309519581669], + [2.977259455371906, 1.6330589041788892, 6.809558467265189], + [2.987468783381174, 1.633367174886567, 6.836251364410611], + [2.988496330420791, 1.635738632860975, 6.836629730193891], + [2.9915790045533757, 1.6428530326729622, 6.837764157986674] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.6861637058060001, 5.963917645752001, 8.681792248521003]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.686, 5.964, 8.682)\nindex:9', + clickable: true, + _meta: [9], + animate: [ + [0.6861637058060001, 5.963917645752001, 8.681792248521003], + [0.6760905986243155, 5.938154261536394, 8.401698406775303], + [0.6673968198196736, 5.9159685637798045, 8.16060723083064], + [0.6498428587500065, 5.87137895362681, 7.676487431281501], + [0.6638641889451774, 5.90713806532911, 8.065021235052676], + [0.6780794886657785, 6.049134505120945, 7.9006685603962215], + [0.6904390491232011, 6.172499195521175, 7.757706116699081], + [0.686995366903221, 6.312686213995841, 7.81740646611721], + [0.6858919467888978, 6.357468902056265, 7.836476354297331], + [0.6652490581500087, 6.377489127636643, 7.818847356873572], + [0.6564227878210406, 6.386040362772613, 7.811287078577358], + [0.6560998789077079, 6.407271806631659, 7.824966708863841], + [0.6558376407928749, 6.4233572596665836, 7.835334782997361], + [0.6552440607454211, 6.4554641496295035, 7.8560459293949805], + [0.7005152511566594, 6.3906733671729254, 7.824545213087006], + [0.7044489268599107, 6.385043282607708, 7.821807849292304], + [0.7554980372779942, 6.364224623086645, 7.876032350034757], + [0.7559849644284654, 6.364026018884843, 7.876549589124378], + [0.7589600344843279, 6.33532495503332, 7.8655047766756745], + [0.7584643307537352, 6.340109325591703, 7.8673455914573935], + [0.7603837206151746, 6.337636489565971, 7.871820095427799], + [0.7626704722372184, 6.33469062332197, 7.87715070481746], + [0.7640287645233919, 6.3375890022449894, 7.882707409418263], + [0.7646901007897117, 6.339000144193649, 7.885412840655778], + [0.7646901007897117, 6.339000144193649, 7.885412840655778], + [0.7712084770931004, 6.34295291780342, 7.908954164740619], + [0.7742223378479971, 6.344780119133613, 7.919838822182596], + [0.7804015805233532, 6.333662380626967, 7.9283316537986], + [0.7989462778838143, 6.300345838690924, 7.953819380272929], + [0.836063898520425, 6.233860013768185, 8.004831817721417], + [0.8426512221301915, 6.230341622114879, 8.017511857026676], + [0.8582856302157768, 6.222006436688716, 8.047605476808092], + [0.8598155162365992, 6.225575516933714, 8.049328219851274], + [0.8644056905664546, 6.23628274673038, 8.054494556146834] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[2.99256034193, 3.60988921464, 5.040689959921]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (2.993, 3.610, 5.041)\nindex:4', + clickable: true, + _meta: [4], + animate: [ + [2.99256034193, 3.60988921464, 5.040689959921], + [2.964902412318623, 3.6097208831023937, 4.859516828034254], + [2.9411607019317563, 3.609563142599293, 4.70386914601991], + [2.893751323432298, 3.609194604185214, 4.392545142563747], + [2.931979663432422, 3.609456642181041, 4.64323951520776], + [2.980062800724279, 3.7133041199703807, 4.525063819802162], + [3.021854859870012, 3.8036638404118053, 4.422603174887048], + [3.041819412656187, 3.9031894639809, 4.4653770739608625], + [3.0482061738005095, 3.9350158292991577, 4.479054852872735], + [3.0139295458641233, 3.961090619952242, 4.485956487638399], + [2.999236467877178, 3.9722713695034875, 4.488893357126261], + [3.0130073348627553, 3.9941277736313623, 4.51487888166854], + [3.023432513065631, 4.010739810188704, 4.5345777746848235], + [3.0442090750281965, 4.04411067556213, 4.573943053105603], + [3.087834216639466, 4.026832354062302, 4.57845479239251], + [3.0916255415291514, 4.025330444632731, 4.578846523672343], + [3.1425866561115114, 4.0349406659898985, 4.629739891951059], + [3.143072782374656, 4.035032306101735, 4.630225323839136], + [3.141167321767244, 4.0265462562806835, 4.6291461306296995], + [3.1414844218974025, 4.027959462984462, 4.629326496544208], + [3.1448298609055603, 4.029823315780269, 4.63349156495045], + [3.1488168054242203, 4.0320417364114975, 4.638457569949605], + [3.151161665625382, 4.033395734650364, 4.641686692428847], + [3.152303239765103, 4.034054881253184, 4.643258942603115], + [3.152303239765103, 4.034054881253184, 4.643258942603115], + [3.164157160729041, 4.0395036487900775, 4.65826224670567], + [3.169638616364527, 4.042023034859936, 4.665199257931246], + [3.174872185573386, 4.038112855492947, 4.67101821701972], + [3.190579504344443, 4.026367166889129, 4.688483966753328], + [3.2220208156906, 4.002815269104387, 4.723451656119673], + [3.2288857163893945, 4.0032315825856415, 4.731698143840704], + [3.245179795279124, 4.004218407660531, 4.751270637432117], + [3.2461937726814525, 4.006353216524984, 4.752168632138513], + [3.249235168425956, 4.012755583369661, 4.754861191243684] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[2.9301375471039997, 6.699044893728, 5.491387800056]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (2.930, 6.699, 5.491)\nindex:11', + clickable: true, + _meta: [11], + animate: [ + [2.9301375471039997, 6.699044893728, 5.491387800056], + [2.9002223026724034, 6.625458330318599, 5.312185477438123], + [2.8744307903116226, 6.562229949548272, 5.157761181803464], + [2.822472143302693, 6.4357194960978985, 4.846949950386374], + [2.864061850207006, 6.537558110551298, 5.0958982512089985], + [2.9105532371206215, 6.64015944947164, 4.997739337410047], + [2.950631671114683, 6.728168357876726, 4.91215442882344], + [2.9726219707853634, 6.876310527313597, 4.976954931434797], + [2.9796539674910254, 6.923672218234841, 4.997673569433611], + [2.9487281445368443, 6.944472785219895, 5.016245405969315], + [2.935475674981825, 6.953388293487095, 5.024178946804785], + [2.944204817848732, 6.967880883043867, 5.0552948324157985], + [2.9507763569784218, 6.97887890185681, 5.078878487302378], + [2.9637256772838305, 7.000903620312932, 5.125989019779839], + [2.997219722128506, 6.926781848577969, 5.130414638361548], + [3.0001296035775877, 6.920341316689811, 5.130799205958144], + [3.04806242172786, 6.908033150432709, 5.198399965548709], + [3.048519657312982, 6.907915721450962, 5.199044766928811], + [3.0435246776119316, 6.867656083374557, 5.202917139880484], + [3.044357121081928, 6.874367748348979, 5.202271149471493], + [3.0463726729714833, 6.869444808650149, 5.207996286002833], + [3.0487743377132235, 6.863580947414616, 5.214817245752353], + [3.0515457567127315, 6.867207994134045, 5.217970750687398], + [3.052895119100574, 6.868973975823973, 5.2195061147819635], + [3.052895119100574, 6.868973975823973, 5.2195061147819635], + [3.0638397213329505, 6.872689741176913, 5.2349968300113074], + [3.068899899831643, 6.874407255035769, 5.242158402050375], + [3.0746334770089243, 6.860958666244638, 5.248542010240167], + [3.09182964116728, 6.820670233190331, 5.267691825167584], + [3.126203912824289, 6.740323737707954, 5.305987891268315], + [3.133436376466273, 6.734967039408454, 5.315575167134979], + [3.1505952495015497, 6.722270494271918, 5.338318477817891], + [3.151642558534598, 6.725743475634991, 5.339758602160414], + [3.154783906333045, 6.736161062992448, 5.3440784097294065] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.7380484592580001, 3.421993761576, 7.8297096615549995]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (0.738, 3.422, 7.830)\nindex:0', + clickable: true, + _meta: [0], + animate: [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [0.7227969669948978, 3.3872979932055656, 7.5612626045825575], + [0.7096822061625654, 3.3575194064522003, 7.33081594835094], + [0.6834032227996591, 3.298074859528445, 6.870617203033552], + [0.7045354796173633, 3.346022733753191, 7.2417009832362575], + [0.7124559052040463, 3.4144453651686426, 7.07438792379714], + [0.7193683336409692, 3.47379469342197, 6.929313406490817], + [0.7165079052487358, 3.605486853932721, 7.002795427003373], + [0.7155944703590478, 3.647656475061565, 7.02631925277228], + [0.6970927925331173, 3.7203654257297667, 7.029823458320881], + [0.6891756110034148, 3.7515131358608445, 7.031345119135143], + [0.6880316216536684, 3.7828739888286687, 7.039823963354358], + [0.6871737849491572, 3.8066601998433907, 7.0462656207114645], + [0.6854971156779174, 3.8542433168973043, 7.059195134205952], + [0.7208278093421244, 3.786736508517037, 7.022070398677862], + [0.7238966370397729, 3.7808722131824823, 7.018845389199765], + [0.7681682735072197, 3.757268259298503, 7.084231332788219], + [0.7685905480820787, 3.757043097664824, 7.084855020196947], + [0.7705657007824903, 3.735135509229641, 7.074231038913135], + [0.7702366292444142, 3.7387894018211068, 7.076000908018795], + [0.7716509625909722, 3.7346395859205255, 7.079861914770527], + [0.7733358125742781, 3.7297002115683324, 7.084459008961423], + [0.7744362110533346, 3.7318641017864134, 7.089136193435641], + [0.7749719487260887, 3.732917697813316, 7.09141329463749], + [0.7749719487260887, 3.732917697813316, 7.09141329463749], + [0.7798503994129861, 3.731290995719217, 7.110978510726724], + [0.782105293428279, 3.7305379721572036, 7.120023754875001], + [0.7865222326299437, 3.722189549385402, 7.12576335932299], + [0.7997663255462021, 3.6971957139500184, 7.142975192971225], + [0.8262277669991835, 3.647415153325346, 7.177371442152935], + [0.8311210089065318, 3.6447705730473663, 7.1862619527698275], + [0.8427254160951626, 3.6385057467828354, 7.207349374134501], + [0.8438310749468616, 3.641589583714862, 7.207592249229161], + [0.8471476823983061, 3.650840428293937, 7.208320583628476] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[3.0054153938400003, 2.98169526492, 1.8661274149220002]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (3.005, 2.982, 1.866)\nindex:12', + clickable: true, + _meta: [12], + animate: [ + [3.0054153938400003, 2.98169526492, 1.8661274149220002], + [2.9842590986203787, 2.9802644477255047, 1.7798829613102964], + [2.9660966613297166, 2.9790593698678256, 1.706019134565325], + [2.929823242526078, 2.9767488593024143, 1.5592237126298338], + [2.9590714469751465, 2.978678114525868, 1.6780828791206968], + [3.0108087607474485, 3.0591282788052796, 1.6199418219642157], + [3.0557278039392353, 3.128959815009703, 1.5696627003605157], + [3.080159246612389, 3.211433573465999, 1.5955450465323038], + [3.087976359169884, 3.237831450424666, 1.6038301555779644], + [3.061578913199075, 3.267236832184381, 1.6137473263210511], + [3.0502655733924646, 3.2798331225467106, 1.6180060782868735], + [3.066869280423499, 3.308219400288779, 1.617591573438289], + [3.079488980201903, 3.3297543081496315, 1.6172926004981019], + [3.1048396098703286, 3.3728530165613626, 1.6167564632177713], + [3.1299566232297193, 3.369903636208692, 1.6038747625221874], + [3.132139268328994, 3.369647241911095, 1.6027554370564132], + [3.1667784979312676, 3.3714061700456672, 1.6317887866333127], + [3.1671089026395927, 3.371422978774961, 1.632065700461384], + [3.1628740901067656, 3.3535843127195992, 1.639315063652502], + [3.1635793967532737, 3.3565578144538453, 1.6381068023249243], + [3.1659411292057116, 3.354732292339542, 1.6415989202131624], + [3.1687556735177846, 3.3525575924671, 1.6457610650336116], + [3.171276646001316, 3.354337691925843, 1.6468669159524392], + [3.1725040557430972, 3.3552043616126177, 1.6474052980656682], + [3.1725040557430972, 3.3552043616126177, 1.6474052980656682], + [3.1832960609469416, 3.358512129255809, 1.6540315112778714], + [3.1882866720605976, 3.3600414868136323, 1.6570955706946393], + [3.1932374479718257, 3.3560180619072613, 1.6609957638932011], + [3.2080987541558117, 3.3439466968968956, 1.6727128409663445], + [3.2378570909512643, 3.3197992488599923, 1.6962132445909446], + [3.244451677674327, 3.3189483741121397, 1.7013353190552205], + [3.2601111074097178, 3.3169327713289127, 1.7134986935713], + [3.2610282701252395, 3.318165009396453, 1.714685598815116], + [3.2637796596215383, 3.3218606869080802, 1.7182454702309855] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.7270396717979999, 3.9607204700159997, 3.0575744099469997]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.727, 3.961, 3.058)\nindex:7', + clickable: true, + _meta: [7], + animate: [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [0.7195475971281557, 3.937625162152782, 2.9618031383444032], + [0.7130821345423999, 3.917747394693829, 2.8791452620817664], + [0.7000301247740074, 3.877838342569246, 2.7122504464062756], + [0.7104567679403144, 3.9098715439420015, 2.845565150269937], + [0.725645907576392, 3.9872250258206754, 2.7907021869991624], + [0.7387408863881154, 4.0540625105240276, 2.742870725448423], + [0.7442345642064732, 4.129055594327187, 2.775721213806391], + [0.7459891674028719, 4.153005223545213, 2.786213823862602], + [0.7401219883163759, 4.148636993839904, 2.78957884350417], + [0.7376036318962842, 4.146760221101075, 2.7910024717215576], + [0.7542626838271297, 4.147398569191966, 2.796150252190531], + [0.7668915837493673, 4.14788159607135, 2.8000261103903044], + [0.7921293463544874, 4.148843609351759, 2.8076654856583465], + [0.8436694665733628, 4.118730489688804, 2.7835161656933365], + [0.8481476978346552, 4.116114935395764, 2.781418347361876], + [0.8929135403680852, 4.126688027226543, 2.798388040509676], + [0.8933405623155793, 4.126788890617889, 2.798549894508891], + [0.8985179175901655, 4.1153167033887295, 2.7924558475133185], + [0.8976543434501218, 4.117226717874219, 2.7934728721312183], + [0.9003209011955681, 4.118347924831322, 2.7938113577942927], + [0.9034978670596161, 4.119678496291453, 2.7942167207033406], + [0.9043788868818258, 4.122036227168638, 2.7956983147064975], + [0.9048078486264418, 4.123184186160548, 2.796419653714192], + [0.9048078486264418, 4.123184186160548, 2.796419653714192], + [0.9105625890973116, 4.131688704167851, 2.8002716050271537], + [0.9132237447422638, 4.135621483410006, 2.802050078125988], + [0.917689417520108, 4.134799469976953, 2.800514399938154], + [0.9310767246278039, 4.1322555287245635, 2.795898859249366], + [0.9578131173157506, 4.126854395102504, 2.786634330381002], + [0.9617971130736239, 4.129535145710568, 2.7876850130179247], + [0.9712471133103135, 4.135873954034115, 2.7901680106259468], + [0.9706767255966604, 4.137847715448133, 2.791224916787714], + [0.9689648283784482, 4.143768243351003, 2.7943940406022447] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[3.053526411968, 0.621334319676, 4.1697121733169995]], + color: '#8aff00', + radius: 0.5, + type: 'spheres', + tooltip: 'Mg (3.054, 0.621, 4.170)\nindex:2', + clickable: true, + _meta: [2], + animate: [ + [3.053526411968, 0.621334319676, 4.1697121733169995], + [3.017644453912349, 0.6151013208717431, 4.011624118869819], + [2.9868627466704223, 0.609783706130502, 3.876211166035583], + [2.925477485461715, 0.599301189457209, 3.6070166921762667], + [2.975034168492126, 0.6078486711907455, 3.824927732663233], + [3.01454925313152, 0.6363387918586078, 3.708680400994294], + [3.048927433717769, 0.6612781176467731, 3.6082657055656853], + [3.0729976854390366, 0.719425320051871, 3.6112064952144887], + [3.080709132417344, 0.7380471221204611, 3.6121475544782546], + [3.056122542782835, 0.7855691487851082, 3.5818125430744767], + [3.0455662874847813, 0.8059102788293938, 3.568845151308847], + [3.0675282375184683, 0.8338850494685495, 3.5685330356242666], + [3.084219327625617, 0.8551398850779014, 3.5682920391750663], + [3.117743625427899, 0.8978063921192185, 3.567793035542949], + [3.149798779130972, 0.9022550260485444, 3.5789792333007653], + [3.1525845841206848, 0.9026414477460191, 3.5799511178628722], + [3.184921677057607, 0.9113987602181841, 3.6304126652291617], + [3.185230140317156, 0.9114822624272318, 3.630893995738151], + [3.1775693356693013, 0.9178044627223862, 3.6268640696767322], + [3.178846122433761, 0.9167501651806454, 3.6275358266098876], + [3.1802250847891176, 0.9196316168643042, 3.6302589933546363], + [3.1818686736883057, 0.9230642678329937, 3.633505653138842], + [3.1844137056028887, 0.9231389682059765, 3.6362952279379077], + [3.18565276913141, 0.9231753578134174, 3.6376534424189053], + [3.18565276913141, 0.9231753578134174, 3.6376534424189053], + [3.1952846414660856, 0.9266461500541087, 3.649941981714476], + [3.199738132135905, 0.9282512611664822, 3.65562386221887], + [3.2033468729052115, 0.9291309502439298, 3.6605837763557094], + [3.2141800585018387, 0.9317553834495732, 3.675471797113554], + [3.235873895132365, 0.9369450628510586, 3.705280322284105], + [3.24114267057999, 0.9391473977613995, 3.7114212181235593], + [3.2536477608967593, 0.9443708448533469, 3.7259965840797182], + [3.2542623258136665, 0.9456014208409165, 3.7258811533817275], + [3.256105284152384, 0.9492914822512131, 3.7255344398568084] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[0.6988530682080001, 5.388527888675999, 5.464564104883001]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.699, 5.389, 5.465)\nindex:13', + clickable: true, + _meta: [13], + animate: [ + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [0.6879707049299666, 5.380526097465887, 5.251019452686832], + [0.6787137090252874, 5.3736768413508775, 5.068037575396872], + [0.6605732125202213, 5.360083032357914, 4.704002718112162], + [0.6754338456540084, 5.371105572716542, 4.998495484752515], + [0.680593648633637, 5.520308984420111, 4.842251720967757], + [0.6850852965855307, 5.650214508710781, 4.707341997798831], + [0.6737738928532222, 5.81723345651462, 4.735406041816092], + [0.670158948674429, 5.870686872656464, 4.744387973909726], + [0.6446246209831791, 5.93655593614297, 4.715409992934223], + [0.6337667742768184, 5.964694418163638, 4.703096781264102], + [0.6341139958463289, 6.003604165360831, 4.677255860714425], + [0.6344338966900352, 6.033047887574819, 4.657697177294185], + [0.6353004552919529, 6.091676025868916, 4.618734458507575], + [0.6772340617897419, 6.036922116486178, 4.561348556619011], + [0.6808769156537027, 6.032165597158874, 4.556362838721732], + [0.7297127413230573, 6.021274483568583, 4.589905220173607], + [0.7301785625928949, 6.021170627393612, 4.590225169931655], + [0.7384389102421658, 6.000134902816782, 4.581119969838586], + [0.7370613657697694, 6.003638985368495, 4.58263893673139], + [0.7404630404439148, 6.003205653427543, 4.584162676897286], + [0.7445158372800988, 6.002684617329512, 4.585979677136258], + [0.7453894719952272, 6.005056736765586, 4.589165816756884], + [0.7458148283639783, 6.006211571855447, 4.5907171132307525], + [0.7458148283639783, 6.006211571855447, 4.5907171132307525], + [0.7522994548396428, 6.01152059112102, 4.6015219005823065], + [0.7552982156298576, 6.013975129474299, 4.606516128934557], + [0.7613843870358449, 6.006249975998558, 4.607317759599329], + [0.7796312910446419, 5.983058080722432, 4.609715308377315], + [0.8160791964318799, 5.936608843870302, 4.614481354305557], + [0.8221953506311558, 5.935958349838657, 4.618374867690754], + [0.8367066381720089, 5.934405048889192, 4.627603095255856], + [0.8375785702069871, 5.938535645822148, 4.628311598149281], + [0.8401941412110759, 5.950928665280752, 4.63043983628704] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + }, + { + positions: [[2.9648909976780002, 4.9781254120559995, 7.611631257921001]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (2.965, 4.978, 7.612)\nindex:8', + clickable: true, + _meta: [8], + animate: [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [2.932237233814531, 4.976380837669579, 7.351690516185544], + [2.9042161656604333, 4.97483473751762, 7.128170133992203], + [2.8482969866664907, 4.97154949442463, 6.680253990613236], + [2.893408162559799, 4.974065676778563, 7.04036472084186], + [2.934372054416142, 5.114761708605387, 6.895571589442621], + [2.969902081397079, 5.237180078003118, 6.769549070891664], + [2.9837136679289307, 5.371661244971887, 6.877713563896416], + [2.9881206968485325, 5.4146827875167025, 6.912325335556192], + [2.947529395606405, 5.445834874158329, 6.9477304217123255], + [2.930123038671715, 5.459227031364428, 6.962835545223593], + [2.933135735622693, 5.473145567242105, 6.989088060332245], + [2.9353684035811383, 5.483706941188249, 7.008975682891222], + [2.939625785568609, 5.504853476220535, 7.048662963965107], + [2.975130079080583, 5.443460234212949, 7.044679425860252], + [2.9782148878112404, 5.438125652687485, 7.044333266560505], + [3.0353196279004373, 5.432219853950045, 7.132113674973112], + [3.0358643358020734, 5.432163526894093, 7.132950947415005], + [3.0339426807327254, 5.414816146490985, 7.131557785137712], + [3.034262825351584, 5.417707453580104, 7.131789828776475], + [3.037048069301463, 5.4174782392864955, 7.138646505928309], + [3.0403677218596115, 5.417206017491675, 7.146818396016116], + [3.042944705847382, 5.419275366404618, 7.152091223947539], + [3.0441993580989717, 5.42028284074714, 7.1546585646219985], + [3.0441993580989717, 5.42028284074714, 7.1546585646219985], + [3.055232907641508, 5.424008180055163, 7.179697505854071], + [3.0603344150775293, 5.425730296475549, 7.191275956996735], + [3.0664559994715006, 5.4178846942150924, 7.201975909990429], + [3.084838104585909, 5.39436571976026, 7.2340950727688424], + [3.1216719397562573, 5.34739958768056, 7.298411380010474], + [3.1294595783257204, 5.346573047105142, 7.311449124248999], + [3.1479438471143837, 5.344617994375692, 7.342395289552503], + [3.149316572162961, 5.348985109383603, 7.342369138779322], + [3.1534335271290983, 5.362084821009794, 7.342292878115267] + ], + keyframes: [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, 31, 32, 33 + ], + animateType: 'position' + } + ], + origin: [-2.184827, -3.561594, -6.015533], + visible: true + }, + { + name: 'bonds', + contents: [ + { + positionPairs: [ + [ + [0.7845758536059999, 1.168836795732, 2.03394740841], + [1.8949956237230001, 2.075266030326, 1.950037411666] + ], + [ + [0.7845758536059999, 1.168836795732, 2.03394740841], + [0.7558077627019999, 2.564778632874, 2.5457609091785] + ], + [ + [2.9509585818639996, 5.593276804547999, 10.717722116670998], + [1.8185611438349998, 5.7785972251499995, 9.699757182596] + ], + [ + [2.9509585818639996, 5.593276804547999, 10.717722116670998], + [2.957924789771, 5.285701108302, 9.164676687296] + ], + [ + [3.032793386686, 1.595800684452, 7.298952718514], + [1.9193075637639998, 0.8309626193280001, 7.13113691801] + ], + [ + [2.99256034193, 3.60988921464, 5.040689959921], + [1.879371690587, 2.8326995415239997, 5.1041101177845] + ], + [ + [2.99256034193, 3.60988921464, 5.040689959921], + [2.978725669804, 4.294007313348, 6.3261606089210005] + ], + [ + [2.99256034193, 3.60988921464, 5.040689959921], + [1.845706705069, 4.499208551658, 5.252627032402001] + ], + [ + [2.99256034193, 3.60988921464, 5.040689959921], + [1.859800006864, 3.785304842328, 4.049132184934] + ], + [ + [2.99256034193, 3.60988921464, 5.040689959921], + [2.961348944517, 5.154467054184, 5.2660388799885] + ], + [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [0.712106082532, 4.692955703664, 8.255750955038001] + ], + [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [1.8514697284680002, 4.200059586816, 7.720670459738001] + ], + [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [0.752115749251, 2.738751814992, 6.498619968601499] + ], + [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [0.7184507637330001, 4.405260825126, 6.647136883219] + ], + [ + [3.053526411968, 0.621334319676, 4.1697121733169995], + [1.909854725606, 1.338422094042, 4.6686212244825] + ] + ], + color: '#8aff00', + radius: 0.1, + type: 'cylinders', + tooltip: ' ', + clickable: true, + _meta: [ + [3, 12], + [3, 7], + [5, 9], + [5, 8], + [1, 10], + [4, 6], + [4, 8], + [4, 13], + [4, 7], + [4, 11], + [0, 9], + [0, 8], + [0, 6], + [0, 13], + [2, 6] + ] + }, + { + positionPairs: [ + [ + [0.8058217408419999, 0.066124554204, 6.963321117506], + [1.9193075637639998, 0.8309626193280001, 7.13113691801] + ], + [ + [0.766183039244, 2.055509868408, 5.167530275648], + [1.879371690587, 2.8326995415239997, 5.1041101177845] + ], + [ + [0.766183039244, 2.055509868408, 5.167530275648], + [0.7466113555209999, 3.008115169212, 4.1125523427975] + ], + [ + [0.766183039244, 2.055509868408, 5.167530275648], + [1.909854725606, 1.338422094042, 4.6686212244825] + ], + [ + [0.766183039244, 2.055509868408, 5.167530275648], + [0.752115749251, 2.738751814992, 6.498619968601499] + ], + [ + [0.6861637058060001, 5.963917645752001, 8.681792248521003], + [0.712106082532, 4.692955703664, 8.255750955038001] + ], + [ + [0.6861637058060001, 5.963917645752001, 8.681792248521003], + [1.825527351742, 5.471021528904, 8.146711753221002] + ], + [ + [0.6861637058060001, 5.963917645752001, 8.681792248521003], + [1.8185611438349998, 5.7785972251499995, 9.699757182596] + ], + [ + [2.9301375471039997, 6.699044893728, 5.491387800056], + [1.8144953076559998, 6.043786391202, 5.4779759524695] + ], + [ + [2.9301375471039997, 6.699044893728, 5.491387800056], + [2.947514272391, 5.838585152892, 6.5515095289885] + ], + [ + [2.9301375471039997, 6.699044893728, 5.491387800056], + [2.961348944517, 5.154467054184, 5.2660388799885] + ], + [ + [3.0054153938400003, 2.98169526492, 1.8661274149220002], + [1.8662275328190001, 3.471207867468, 2.4618509124345] + ], + [ + [3.0054153938400003, 2.98169526492, 1.8661274149220002], + [1.8949956237230001, 2.075266030326, 1.950037411666] + ], + [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [1.8662275328190001, 3.471207867468, 2.4618509124345] + ], + [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [0.712946370003, 4.674624179345999, 4.261069257415] + ], + [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [0.7466113555209999, 3.008115169212, 4.1125523427975] + ], + [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [0.7558077627019999, 2.564778632874, 2.5457609091785] + ], + [ + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [1.859800006864, 3.785304842328, 4.049132184934] + ], + [ + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [1.8144953076559998, 6.043786391202, 5.4779759524695] + ], + [ + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [0.712946370003, 4.674624179345999, 4.261069257415] + ], + [ + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [1.845706705069, 4.499208551658, 5.252627032402001] + ], + [ + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [0.7184507637330001, 4.405260825126, 6.647136883219] + ], + [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [1.825527351742, 5.471021528904, 8.146711753221002] + ], + [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [1.8514697284680002, 4.200059586816, 7.720670459738001] + ], + [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [2.947514272391, 5.838585152892, 6.5515095289885] + ], + [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [2.978725669804, 4.294007313348, 6.3261606089210005] + ], + [ + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [2.957924789771, 5.285701108302, 9.164676687296] + ] + ], + color: '#f0c8a0', + radius: 0.1, + type: 'cylinders', + tooltip: ' ', + clickable: true, + _meta: [ + [10, 1], + [6, 4], + [6, 7], + [6, 2], + [6, 0], + [9, 0], + [9, 8], + [9, 5], + [11, 13], + [11, 8], + [11, 4], + [12, 7], + [12, 3], + [7, 12], + [7, 13], + [7, 6], + [7, 3], + [7, 4], + [13, 11], + [13, 7], + [13, 4], + [13, 0], + [8, 9], + [8, 0], + [8, 11], + [8, 4], + [8, 5] + ] + } + ], + origin: [-2.184827, -3.561594, -6.015533], + visible: false + }, + { + name: 'polyhedra', + contents: [ + { + positions: [ + [2.99256034193, 3.60988921464, 5.040689959921], + [0.766183039244, 2.055509868408, 5.167530275648], + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [0.6988530682080001, 5.388527888675999, 5.464564104883001], + [0.7270396717979999, 3.9607204700159997, 3.0575744099469997], + [2.9301375471039997, 6.699044893728, 5.491387800056] + ], + color: '#8aff00', + type: 'convex', + clickable: false + }, + { + positions: [ + [0.7380484592580001, 3.421993761576, 7.8297096615549995], + [0.6861637058060001, 5.963917645752001, 8.681792248521003], + [2.9648909976780002, 4.9781254120559995, 7.611631257921001], + [0.766183039244, 2.055509868408, 5.167530275648], + [0.6988530682080001, 5.388527888675999, 5.464564104883001] + ], + color: '#8aff00', + type: 'convex', + clickable: false + } + ], + origin: [-2.184827, -3.561594, -6.015533], + visible: false + }, + { + name: 'magmoms', + contents: [], + origin: [-2.184827, -3.561594, -6.015533], + visible: true + }, + { + name: 'unit_cell', + contents: [ + { + name: 'a=4.524169821692041, b=8.308320455806276, c=8.023992, alpha=59.04121836317795, beta=93.38212325880284, gamma=92.74934984765541', + contents: [ + { + positions: [ + [0, 0, 0], + [4.51629, 0.0, -0.266903], + [0, 0, 0], + [-0.146636, 7.123188, 4.273977], + [0, 0, 0], + [0.0, 0.0, 8.023992], + [4.51629, 0.0, -0.266903], + [4.369654, 7.123188, 4.007074], + [4.51629, 0.0, -0.266903], + [4.51629, 0.0, 7.757089], + [-0.146636, 7.123188, 4.273977], + [4.369654, 7.123188, 4.007074], + [-0.146636, 7.123188, 4.273977], + [-0.146636, 7.123188, 12.297969], + [0.0, 0.0, 8.023992], + [4.51629, 0.0, 7.757089], + [0.0, 0.0, 8.023992], + [-0.146636, 7.123188, 12.297969], + [4.369654, 7.123188, 4.007074], + [4.369654, 7.123188, 12.031066], + [4.51629, 0.0, 7.757089], + [4.369654, 7.123188, 12.031066], + [-0.146636, 7.123188, 12.297969], + [4.369654, 7.123188, 12.031066] + ], + type: 'lines', + clickable: false + } + ], + visible: true + } + ], + origin: [-2.184827, -3.561594, -6.015533], + visible: true + } + ], + origin: [-2.184827, -3.561594, -6.015533], + visible: true +}; diff --git a/src/components/crystal-toolkit/scene/phonon-animation-scene.ts b/src/components/crystal-toolkit/scene/phonon-animation-scene.ts new file mode 100644 index 00000000..918f7cb1 --- /dev/null +++ b/src/components/crystal-toolkit/scene/phonon-animation-scene.ts @@ -0,0 +1,181 @@ +export const phonon_scene = { + name: 'StructureGraph', + contents: [ + { + name: 'atoms', + contents: [ + { + positions: [[2.7156667001979935, 2.7156667001979935, 2.7156667001979935]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (2.716, 2.716, 2.716)\nindex:0', + clickable: true, + _meta: [0], + animate: [ + [0.0, -0.0, -0.0], + [6.89275107e-7, -8.370267879e-6, -0.372089590600337], + [0.0, -0.0, -0.0], + [-6.89275107e-7, 8.370267879e-6, 0.372089590600337], + [0.0, -0.0, -0.0] + ], + keyframes: [0, 1, 2, 3, 4], + animateType: 'displacement' + }, + { + positions: [[4.073500050296991, 4.073500050296991, 4.073500050296991]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (4.074, 4.074, 4.074)\nindex:1', + clickable: true, + _meta: [1], + animate: [ + [0.0, -0.0, -0.0], + [6.89275107e-7, -8.370267879e-6, -0.372089590600337], + [0.0, -0.0, -0.0], + [-6.89275107e-7, 8.370267879e-6, 0.372089590600337], + [0.0, -0.0, -0.0] + ], + keyframes: [0, 1, 2, 3, 4], + animateType: 'displacement' + } + ], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: true + }, + { + name: 'bonds', + contents: [ + { + positionPairs: [ + [ + [2.7156667001979935, 2.7156667001979935, 2.7156667001979935], + [3.394583375247492, 3.394583375247492, 3.394583375247492] + ], + [ + [4.073500050296991, 4.073500050296991, 4.073500050296991], + [3.394583375247492, 3.394583375247492, 3.394583375247492] + ] + ], + color: '#f0c8a0', + radius: 0.1, + type: 'cylinders', + tooltip: ' ', + clickable: true, + _meta: [ + [0, 1], + [1, 0] + ], + animate: [ + [ + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ], + [ + [6.8927511e-7, -8.370267885e-6, -0.372089590600335], + [6.8927511e-7, -8.370267885e-6, -0.372089590600335] + ], + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ], + [ + [-6.8927511e-7, 8.370267885e-6, 0.372089590600335], + [-6.8927511e-7, 8.370267885e-6, 0.372089590600335] + ], + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ] + ], + [ + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ], + [ + [6.8927511e-7, -8.370267885e-6, -0.372089590600335], + [6.8927511e-7, -8.370267885e-6, -0.372089590600335] + ], + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ], + [ + [-6.8927511e-7, 8.370267885e-6, 0.372089590600335], + [-6.8927511e-7, 8.370267885e-6, 0.372089590600335] + ], + [ + [0.0, -0.0, -0.0], + [0.0, -0.0, -0.0] + ] + ] + ], + keyframes: [0, 1, 2, 3, 4], + animateType: 'displacement' + } + ], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: true + }, + { + name: 'polyhedra', + contents: [], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: false + }, + { + name: 'magmoms', + contents: [], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: true + }, + { + name: 'unit_cell', + contents: [ + { + name: 'a=3.8405326783049922, b=3.8405326783049922, c=3.8405326783049922, alpha=59.99999999999999, beta=59.99999999999999, gamma=59.99999999999999', + contents: [ + { + positions: [ + [0, 0, 0], + [0.0, 2.7156667001979935, 2.7156667001979935], + [0, 0, 0], + [2.7156667001979935, 0.0, 2.7156667001979935], + [0, 0, 0], + [2.7156667001979935, 2.7156667001979935, 0.0], + [0.0, 2.7156667001979935, 2.7156667001979935], + [2.7156667001979935, 2.7156667001979935, 5.431333400395987], + [0.0, 2.7156667001979935, 2.7156667001979935], + [2.7156667001979935, 5.431333400395987, 2.7156667001979935], + [2.7156667001979935, 0.0, 2.7156667001979935], + [2.7156667001979935, 2.7156667001979935, 5.431333400395987], + [2.7156667001979935, 0.0, 2.7156667001979935], + [5.431333400395987, 2.7156667001979935, 2.7156667001979935], + [2.7156667001979935, 2.7156667001979935, 0.0], + [2.7156667001979935, 5.431333400395987, 2.7156667001979935], + [2.7156667001979935, 2.7156667001979935, 0.0], + [5.431333400395987, 2.7156667001979935, 2.7156667001979935], + [2.7156667001979935, 2.7156667001979935, 5.431333400395987], + [5.431333400395987, 5.431333400395987, 5.431333400395987], + [2.7156667001979935, 5.431333400395987, 2.7156667001979935], + [5.431333400395987, 5.431333400395987, 5.431333400395987], + [5.431333400395987, 2.7156667001979935, 2.7156667001979935], + [5.431333400395987, 5.431333400395987, 5.431333400395987] + ], + type: 'lines', + clickable: false + } + ], + visible: true + } + ], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: true + } + ], + origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935], + visible: true +}; diff --git a/src/components/crystal-toolkit/scene/simple-scene.ts b/src/components/crystal-toolkit/scene/simple-scene.ts index 3e13f9b2..bb7ae36e 100644 --- a/src/components/crystal-toolkit/scene/simple-scene.ts +++ b/src/components/crystal-toolkit/scene/simple-scene.ts @@ -18,6 +18,7 @@ export interface SceneJsonObject { keyframes?: number[]; animate?: any[]; id?: string; + animateType?: string; } export const s4 = { @@ -30,27 +31,27 @@ export const s4 = { positions: [ [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575], - [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821], + [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821] ], color: '#9ee373', radius: 0.8, type: 'ellipsoids', scale: [0.4, 1.2, 1.9], - clickable: true, + clickable: true }, { positions: [ [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], + [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245] ], color: '#b0b9e6', radius: 0.5, type: 'spheres', - clickable: true, - }, + clickable: true + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'bonds', @@ -59,68 +60,67 @@ export const s4 = { positionPairs: [ [ [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], - [0.8040725300000001, 1.39269448, 2.29248357625], + [0.8040725300000001, 1.39269448, 2.29248357625] ], [ [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], - [1.6081450794147842, 0.9284629773820368, 3.6024741912500002], + [1.6081450794147842, 0.9284629773820368, 3.6024741912500002] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575], - [0.8040725300000001, 1.39269448, 4.91246480625], + [0.8040725300000001, 1.39269448, 4.91246480625] ], [ [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821], - [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999], - ], + [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999] + ] ], color: '#9ee373', radius: 0.1, type: 'cylinders', - clickable: false, + clickable: false }, { positionPairs: [ [ [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [0.8040725300000001, 1.39269448, 4.91246480625], + [0.8040725300000001, 1.39269448, 4.91246480625] ], [ [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [1.6081450794147842, 0.9284629773820368, 3.6024741912500002], + [1.6081450794147842, 0.9284629773820368, 3.6024741912500002] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], - [0.8040725300000001, 1.39269448, 2.29248357625], + [0.8040725300000001, 1.39269448, 2.29248357625] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], - [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999], - ], + [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999] + ] ], animate: [[[1, 1, 1], [2, 2, 2], 0]], keyframes: [0, 1], color: '#b0b9e6', radius: 0.1, type: 'cylinders', - clickable: false, - }, + clickable: false + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'polyhedra', contents: [], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'unit_cell', contents: [ { - name: - 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569', + name: 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569', contents: [ { positions: [ @@ -147,17 +147,17 @@ export const s4 = { [3.21629013, 0, 5.23996246], [1.60814506, 2.78538896, 5.23996246], [-1.60814507, 2.78538896, 5.23996246], - [1.60814506, 2.78538896, 5.23996246], + [1.60814506, 2.78538896, 5.23996246] ], type: 'lines', - clickable: false, - }, + clickable: false + } ], - visible: false, - }, + visible: false + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'axes', @@ -166,57 +166,57 @@ export const s4 = { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [0.19592747, -1.39269448, -2.61998123], - ], + [0.19592747, -1.39269448, -2.61998123] + ] ], color: 'red', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [-1.304072530966841, -0.5266690767737673, -2.61998123], - ], + [-1.304072530966841, -0.5266690767737673, -2.61998123] + ] ], color: 'green', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [-0.80407253, -1.39269448, -1.61998123], - ], + [-0.80407253, -1.39269448, -1.61998123] + ] ], color: 'blue', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positions: [[-0.80407253, -1.39269448, -2.61998123]], color: 'white', radius: 0.0175, type: 'spheres', - clickable: false, - }, + clickable: false + } ], - visible: false, - }, + visible: false + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }; export const s2 = { @@ -235,7 +235,7 @@ export const s2 = { [4.2, 4.2, 4.2], [0, 0, 0], [0, 0, 4.2], - [4.2, 0, 0], + [4.2, 0, 0] ], color: '#f9dc3c', radius: 0.5, @@ -250,9 +250,9 @@ export const s2 = { [4, 4, 4], [1, 1, 1], [1, 1, 4], - [4, 1, 1], + [4, 1, 1] ], - keyframes: [0, 1], + keyframes: [0, 1] }, { positions: [[2.1, 2.1, 2.1]], @@ -262,11 +262,11 @@ export const s2 = { tooltip: 'label', clickable: true, animate: [1, 1, 1], - keyframes: [0, 1], - }, + keyframes: [0, 1] + } ], origin: [-2.1, -2.1, -2.1], - visible: true, + visible: true }, { name: 'bonds', @@ -275,36 +275,36 @@ export const s2 = { positionPairs: [ [ [4.2, 4.2, 0], - [3.1500000000000004, 3.1500000000000004, 1.05], + [3.1500000000000004, 3.1500000000000004, 1.05] ], [ [0, 4.2, 4.2], - [1.05, 3.1500000000000004, 3.1500000000000004], + [1.05, 3.1500000000000004, 3.1500000000000004] ], [ [0, 4.2, 0], - [1.05, 3.1500000000000004, 1.05], + [1.05, 3.1500000000000004, 1.05] ], [ [4.2, 0, 4.2], - [3.1500000000000004, 1.05, 3.1500000000000004], + [3.1500000000000004, 1.05, 3.1500000000000004] ], [ [4.2, 4.2, 4.2], - [3.1500000000000004, 3.1500000000000004, 3.1500000000000004], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] ], [ [0, 0, 0], - [1.05, 1.05, 1.05], + [1.05, 1.05, 1.05] ], [ [0, 0, 4.2], - [1.05, 1.05, 3.1500000000000004], + [1.05, 1.05, 3.1500000000000004] ], [ [4.2, 0, 0], - [3.1500000000000004, 1.05, 1.05], - ], + [3.1500000000000004, 1.05, 1.05] + ] ], animate: [ [[4, 4, 1], [1, 1, 1], 0], @@ -314,49 +314,49 @@ export const s2 = { [[4, 4, 4], [1, 1, 1], 4], [[1, 1, 1], [1, 1, 1], 5], [[1, 1, 4], [1, 1, 1], 6], - [[4, 1, 1], [1, 1, 1], 7], + [[4, 1, 1], [1, 1, 1], 7] ], keyframes: [0, 1], color: '#f9dc3c', tooltip: 'label', radius: 0.1, type: 'cylinders', - clickable: true, + clickable: true }, { positionPairs: [ [ [2.1, 2.1, 2.1], // starts from center sphere - [1.05, 1.05, 1.05], // end in yellow + [1.05, 1.05, 1.05] // end in yellow ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 1.05, 1.05], + [3.1500000000000004, 1.05, 1.05] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 3.1500000000000004, 3.1500000000000004], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 1.05, 3.1500000000000004], + [3.1500000000000004, 1.05, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [1.05, 3.1500000000000004, 1.05], + [1.05, 3.1500000000000004, 1.05] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 3.1500000000000004, 1.05], + [3.1500000000000004, 3.1500000000000004, 1.05] ], [ [2.1, 2.1, 2.1], - [1.05, 1.05, 3.1500000000000004], + [1.05, 1.05, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [1.05, 3.1500000000000004, 3.1500000000000004], - ], + [1.05, 3.1500000000000004, 3.1500000000000004] + ] ], animate: [ [[1, 1, 1], [0, 0, 0], 0], @@ -366,18 +366,18 @@ export const s2 = { [[1, 1, 1], [0, 0, 0], 4], [[1, 1, 1], [0, 0, 0], 5], [[1, 1, 1], [0, 0, 0], 6], - [[1, 1, 1], [0, 0, 0], 7], + [[1, 1, 1], [0, 0, 0], 7] ], keyframes: [0, 1], color: '#a121f6', radius: 0.1, type: 'cylinders', tooltip: 'label', - clickable: true, - }, + clickable: true + } ], origin: [-2.1, -2.1, -2.1], - visible: true, + visible: true }, { name: 'cubes', @@ -385,16 +385,16 @@ export const s2 = { { positions: [ [4, 4, 4], - [10, 10, 10], + [10, 10, 10] ], width: 2, color: '#ababaa', type: 'cubes', animate: [10, 10, 10], tooltip: 'label', - keyframes: [0, 1], - }, - ], + keyframes: [0, 1] + } + ] }, { name: 'polyhedra', @@ -409,7 +409,7 @@ export const s2 = { [0, 4.2, 0], [4.2, 4.2, 0], [0, 0, 4.2], - [0, 4.2, 4.2], + [0, 4.2, 4.2] ], animate: [ [[3.1, 3.1, 3.1], 0], @@ -420,16 +420,16 @@ export const s2 = { [[1, 4, 1], 6], [[4, 4, 1], 7], [[1, 1, 4], 8], - [[1, 4, 4], 9], + [[1, 4, 4], 9] ], keyframes: [0, 1], color: '#a121f6', - type: 'convex', - }, + type: 'convex' + } ], origin: [-2.1, -2.1, -2.1], tooltip: 'label', - visible: true, + visible: true }, { name: 'unit_cell', @@ -462,7 +462,7 @@ export const s2 = { [4.2, 0, 4.2], [4.2, 4.2, 4.2], [0, 4.2, 4.2], - [4.2, 4.2, 4.2], + [4.2, 4.2, 4.2] ], animate: [ [0, 0, 0], @@ -488,17 +488,17 @@ export const s2 = { [4.2, 0, 4.2], [4.2, 4.2, 4.2], [0, 4.2, 4.2], - [4.2, 4.2, 4.2], + [4.2, 4.2, 4.2] ], keyframes: [0, 1], - type: 'lines', - }, + type: 'lines' + } ], - visible: false, - }, + visible: false + } ], origin: [-2.1, -2.1, -2.1], - visible: false, + visible: false }, { name: 'axes', @@ -507,57 +507,57 @@ export const s2 = { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-1.4, -1.4, -3.1], - ], + [-1.4, -1.4, -3.1] + ] ], color: 'red', radius: 0.07, // / 0.37302772291498865) * 2, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-0.1, -2.5, -1.1], - ], + [-0.1, -2.5, -1.1] + ] ], color: 'green', radius: 0.07, // / 0.37302772291498865) * 2, headLength: 0.24, // / 0.37302772291498865, headWidth: 0.14, // 0.37302772291498865, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-1.1, -1.1, -1.1], - ], + [-1.1, -1.1, -1.1] + ] ], color: 'blue', radius: 0.07, // 0.37302772291498865) * 2, headLength: 0.24, // / 0.37302772291498865) * 2, headWidth: 0.14, // / 0.37302772291498865) * 2, type: 'arrows', - clickable: false, + clickable: false }, { positions: [[-2.1, -2.1, -2.1]], color: 'black', radius: 0.0175, type: 'spheres', - clickable: false, - }, + clickable: false + } ], - visible: false, - }, + visible: false + } ], origin: [-2.1, -2.1, -2.1], - visible: true, + visible: true }; export const s3 = { @@ -570,36 +570,36 @@ export const s3 = { positionPairs: [ [ [4.2, 4.2, 0], - [3.1500000000000004, 3.1500000000000004, 1.05], + [3.1500000000000004, 3.1500000000000004, 1.05] ], [ [0, 4.2, 4.2], - [1.05, 3.1500000000000004, 3.1500000000000004], + [1.05, 3.1500000000000004, 3.1500000000000004] ], [ [0, 4.2, 0], - [1.05, 3.1500000000000004, 1.05], + [1.05, 3.1500000000000004, 1.05] ], [ [4.2, 0, 4.2], - [3.1500000000000004, 1.05, 3.1500000000000004], + [3.1500000000000004, 1.05, 3.1500000000000004] ], [ [4.2, 4.2, 4.2], - [3.1500000000000004, 3.1500000000000004, 3.1500000000000004], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] ], [ [0, 0, 0], - [1.05, 1.05, 1.05], + [1.05, 1.05, 1.05] ], [ [0, 0, 4.2], - [1.05, 1.05, 3.1500000000000004], + [1.05, 1.05, 3.1500000000000004] ], [ [4.2, 0, 0], - [3.1500000000000004, 1.05, 1.05], - ], + [3.1500000000000004, 1.05, 1.05] + ] ], animate: [ [[4, 4, 1], [1, 1, 1], 0], @@ -609,49 +609,49 @@ export const s3 = { [[4, 4, 4], [1, 1, 1], 4], [[1, 1, 1], [1, 1, 1], 5], [[1, 1, 4], [1, 1, 1], 6], - [[4, 1, 1], [1, 1, 1], 7], + [[4, 1, 1], [1, 1, 1], 7] ], keyframes: [0, 1], color: '#f9dc3c', tooltip: 'label', radius: 0.1, type: 'cylinders', - clickable: true, + clickable: true }, { positionPairs: [ [ [2.1, 2.1, 2.1], // starts from center sphere - [1.05, 1.05, 1.05], // end in yellow + [1.05, 1.05, 1.05] // end in yellow ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 1.05, 1.05], + [3.1500000000000004, 1.05, 1.05] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 3.1500000000000004, 3.1500000000000004], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 1.05, 3.1500000000000004], + [3.1500000000000004, 1.05, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [1.05, 3.1500000000000004, 1.05], + [1.05, 3.1500000000000004, 1.05] ], [ [2.1, 2.1, 2.1], - [3.1500000000000004, 3.1500000000000004, 1.05], + [3.1500000000000004, 3.1500000000000004, 1.05] ], [ [2.1, 2.1, 2.1], - [1.05, 1.05, 3.1500000000000004], + [1.05, 1.05, 3.1500000000000004] ], [ [2.1, 2.1, 2.1], - [1.05, 3.1500000000000004, 3.1500000000000004], - ], + [1.05, 3.1500000000000004, 3.1500000000000004] + ] ], animate: [ [[1, 1, 1], [0, 0, 0], 0], @@ -661,18 +661,18 @@ export const s3 = { [[1, 1, 1], [0, 0, 0], 4], [[1, 1, 1], [0, 0, 0], 5], [[1, 1, 1], [0, 0, 0], 6], - [[1, 1, 1], [0, 0, 0], 7], + [[1, 1, 1], [0, 0, 0], 7] ], keyframes: [0, 1], color: '#a121f6', radius: 0.1, type: 'cylinders', tooltip: 'label', - clickable: true, - }, + clickable: true + } ], origin: [-2.1, -2.1, -2.1], - visible: true, + visible: true }, { name: 'cubes', @@ -680,16 +680,16 @@ export const s3 = { { positions: [ [4, 4, 4], - [10, 10, 10], + [10, 10, 10] ], width: 2, color: '#ababaa', type: 'cubes', animate: [10, 10, 10], tooltip: 'label', - keyframes: [0, 1], - }, - ], + keyframes: [0, 1] + } + ] }, { name: 'polyhedra', @@ -704,7 +704,7 @@ export const s3 = { [0, 4.2, 0], [4.2, 4.2, 0], [0, 0, 4.2], - [0, 4.2, 4.2], + [0, 4.2, 4.2] ], animate: [ [[3.1, 3.1, 3.1], 0], @@ -715,16 +715,16 @@ export const s3 = { [[1, 4, 1], 6], [[4, 4, 1], 7], [[1, 1, 4], 8], - [[1, 4, 4], 9], + [[1, 4, 4], 9] ], keyframes: [0, 1], color: '#a121f6', - type: 'convex', - }, + type: 'convex' + } ], origin: [-2.1, -2.1, -2.1], tooltip: 'label', - visible: true, + visible: true }, { name: 'unit_cell', @@ -757,7 +757,7 @@ export const s3 = { [4.2, 0, 4.2], [4.2, 4.2, 4.2], [0, 4.2, 4.2], - [4.2, 4.2, 4.2], + [4.2, 4.2, 4.2] ], animate: [ [0, 0, 0], @@ -783,17 +783,17 @@ export const s3 = { [4.2, 0, 4.2], [4.2, 4.2, 4.2], [0, 4.2, 4.2], - [4.2, 4.2, 4.2], + [4.2, 4.2, 4.2] ], keyframes: [0, 1], - type: 'lines', - }, + type: 'lines' + } ], - visible: false, - }, + visible: false + } ], origin: [-2.1, -2.1, -2.1], - visible: false, + visible: false }, { name: 'axes', @@ -802,276 +802,107 @@ export const s3 = { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-1.4, -1.4, -3.1], - ], + [-1.4, -1.4, -3.1] + ] ], color: 'red', radius: 0.07, // / 0.37302772291498865) * 2, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-0.1, -2.5, -1.1], - ], + [-0.1, -2.5, -1.1] + ] ], color: 'green', radius: 0.07, // / 0.37302772291498865) * 2, headLength: 0.24, // / 0.37302772291498865, headWidth: 0.14, // 0.37302772291498865, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-2.1, -2.1, -2.1], - [-1.1, -1.1, -1.1], - ], + [-1.1, -1.1, -1.1] + ] ], color: 'blue', radius: 0.07, // 0.37302772291498865) * 2, headLength: 0.24, // / 0.37302772291498865) * 2, headWidth: 0.14, // / 0.37302772291498865) * 2, type: 'arrows', - clickable: false, + clickable: false }, { positions: [[-2.1, -2.1, -2.1]], color: 'black', radius: 0.0175, type: 'spheres', - clickable: false, - }, - ], - visible: false, - }, - ], - origin: [-2.1, -2.1, -2.1], - visible: true, -}; - -export const scene = { - name: 'StructureMoleculeComponent', - contents: [ - { - name: 'axes', - contents: [ - { - positionPairs: [ - [ - [-2.13336842, -1.2940969500000001, -7.74158491], - [-1.618063699237322, -1.2962610988334031, -6.884580615250245], - ], - ], - color: 'red', - radius: 0.7, - headLength: 2.3, - headWidth: 1.4, - type: 'arrows', - clickable: true, - }, - { - positionPairs: [ - [ - [-2.13336842, -1.2940969500000001, -7.74158491], - [-1.8972015468796977, -0.8360916583284603, -6.884580615470827], - ], - ], - color: 'green', - radius: 0.7, - headLength: 2.3, - headWidth: 1.4, - type: 'arrows', - clickable: true, - }, - { - positionPairs: [ - [ - [-2.13336842, -1.2940969500000001, -7.74158491], - [-2.1369361013796637, -1.296261098833144, -6.741593615983197], - ], - ], - color: 'blue', - radius: 0.7, - headLength: 2.3, - headWidth: 1.4, - type: 'arrows', - clickable: true, - }, - { - positions: [[-2.13336842, -1.2940969500000001, -7.74158491]], - color: 'white', - radius: 0.175, - type: 'spheres', - clickable: true, - }, - ], - origin: [0, 0, 0], - }, - ], - origin: [2.13336842, 1.2940969500000001, 7.74158491], -}; - -export const shperes = { - name: 'StructureMoleculeComponent', - contents: [ - { - name: 'atoms', - contents: [ - { - name: 'axes', - contents: [ - { - positionPairs: [ - [ - [-2.1, -2.1, -2.1], - [-1.4, -1.4, -3.1], - ], - ], - color: 'red', - radius: 0.07, // / 0.37302772291498865) * 2, - headLength: 0.24, - headWidth: 0.14, - type: 'arrows', - clickable: false, - }, - { - positionPairs: [ - [ - [-2.1, -2.1, -2.1], - [-0.1, -2.5, -1.1], - ], - ], - color: 'green', - radius: 0.07, // / 0.37302772291498865) * 2, - headLength: 0.24, // / 0.37302772291498865, - headWidth: 0.14, // 0.37302772291498865, - type: 'arrows', - clickable: false, - }, - { - positionPairs: [ - [ - [-2.1, -2.1, -2.1], - [-1.1, -1.1, -1.1], - ], - ], - color: 'blue', - radius: 0.07, // 0.37302772291498865) * 2, - headLength: 0.24, // / 0.37302772291498865) * 2, - headWidth: 0.14, // / 0.37302772291498865) * 2, - type: 'arrows', - clickable: false, - }, - { - positions: [[-2.1, -2.1, -2.1]], - color: 'black', - radius: 0.0175, - type: 'spheres', - clickable: false, - }, - ], - visible: false, - }, - { - positions: [ - [-2.13336842, -1.2940969500000001, -7.74158491], - [0.8064071299999997, -1.3064432600000002, -2.8524384100000004], - [2.1537217799999997, 1.30644326, 2.0367080899999994], - [-0.8064071300000002, 1.30644326, 2.8524384099999995], - [2.13336842, 1.2940969500000001, 7.74158491], - [-2.15372178, -1.3064432600000002, -2.0367080900000003], - [0.7860537699999997, -1.31878957, 2.8524384099999995], - [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004], - ], - clickable: true, - color: '#ffaaaa', - radius: [0.5], - type: 'spheres', - }, - { - positions: [ - [1.1352943356867837, 0.688667561081374, 4.1197692008924705], - [-1.1352941382531998, -0.6886632575514795, -4.119769120104752], - ], - color: '#111111', - radius: [0.5], - type: 'spheres', - }, - { - positions: [[1.3132662690651387e-7, 0.000002162567968477802, -0.000004955452009625105]], - color: '#00ffdd', - radius: [0.65], - type: 'spheres', - }, + clickable: false + } ], - origin: [0, 0, 0], - }, + visible: false + } ], origin: [-2.1, -2.1, -2.1], + visible: true }; -export const buggyScene = { - name: 'TestScene', - contents: [ - { - name: 'atoms', - contents: [ - { - positions: [ - [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004], - [-1.7860537700000001, 1.3187895699999999, -2.8524384100000004], - [-2.7860537700000001, 1.3187895699999999, -2.8524384100000004], - [-3.7860537700000001, 1.3187895699999999, -2.8524384100000004], - ], - color: '#ffaaaa', - radius: [0.5], - type: 'spheres', - }, - ], - origin: [0, 0, 0], - }, - ], - origin: [2.13336842, 1.2940969500000001, 7.74158491], -}; - -export const s5 = { +export const s6 = { name: '_ct_StructureMoleculeComponent_1', contents: [ { name: 'atoms', + clickable: true, contents: [ { positions: [ - [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], - [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575], - [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821], + [4.2, 4.2, 0], + [0, 4.2, 4.2], + [0, 4.2, 0], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0] ], - color: '#9ee373', + color: '#f9dc3c', radius: 0.5, + tooltip: 'label', type: 'spheres', - tooltip: 'heell', clickable: true, + animate: [ + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0], + [0, 0, 0, 1, 1, 1, 0, 0, 0] + ], + keyframes: [0, 1, 2] }, { - positions: [ - [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], - ], - color: '#b0b9e6', + positions: [[2.1, 2.1, 2.1]], + color: '#4444ff', radius: 0.5, type: 'spheres', - tooltip: 'heell2', + tooltip: 'label', clickable: true, - }, + animate: [0, 0, 0, 1, 1, 1, 0, 0, 0], + keyframes: [0, 1, 2] + } ], - origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + origin: [-2.1, -2.1, -2.1], + visible: true }, { name: 'bonds', @@ -1079,21 +910,1290 @@ export const s5 = { { positionPairs: [ [ - [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], - [0.8040725300000001, 1.39269448, 2.29248357625], + [4.2, 4.2, 0], + [3.1500000000000004, 3.1500000000000004, 1.05] ], [ - [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], - [1.6081450794147842, 0.9284629773820368, 3.6024741912500002], + [0, 4.2, 4.2], + [1.05, 3.1500000000000004, 3.1500000000000004] + ], + [ + [0, 4.2, 0], + [1.05, 3.1500000000000004, 1.05] + ], + [ + [4.2, 0, 4.2], + [3.1500000000000004, 1.05, 3.1500000000000004] + ], + [ + [4.2, 4.2, 4.2], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] + ], + [ + [0, 0, 0], + [1.05, 1.05, 1.05] + ], + [ + [0, 0, 4.2], + [1.05, 1.05, 3.1500000000000004] + ], + [ + [4.2, 0, 0], + [3.1500000000000004, 1.05, 1.05] + ] + ], + animate: [ + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 0 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 1 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 2 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 3 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 4 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 5 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 6 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 7 + ] + ], + keyframes: [0, 1, 2], + color: '#f9dc3c', + tooltip: 'label', + radius: 0.1, + type: 'cylinders', + clickable: true + }, + { + positionPairs: [ + [ + [2.1, 2.1, 2.1], // starts from center sphere + [1.05, 1.05, 1.05] // end in yellow + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 1.05, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 3.1500000000000004, 3.1500000000000004] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 1.05, 3.1500000000000004] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 3.1500000000000004, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 3.1500000000000004, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 1.05, 3.1500000000000004] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 3.1500000000000004, 3.1500000000000004] + ] + ], + animate: [ + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 0 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 1 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 2 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 3 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 4 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 5 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 6 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [1, 1, 1], + [1, 1, 1] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 7 + ] + ], + keyframes: [0, 1, 2], + color: '#a121f6', + radius: 0.1, + type: 'cylinders', + tooltip: 'label', + clickable: true + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true + }, + { + name: 'polyhedra', + contents: [ + { + positions: [ + [2.1, 2.1, 2.1], + [0, 0, 0], + [4.2, 0, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 0, 4.2], + [0, 4.2, 4.2] + ], + animate: [ + [[3.1, 3.1, 3.1], 0], + [[1, 1, 1], 1], + [[4, 1, 1], 2], + [[4, 4, 4], 3], + [[4, 1, 4], 5], + [[1, 4, 1], 6], + [[4, 4, 1], 7], + [[1, 1, 4], 8], + [[1, 4, 4], 9] + ], + keyframes: [0, 1], + color: '#a121f6', + type: 'convex' + } + ], + origin: [-2.1, -2.1, -2.1], + tooltip: 'label', + visible: false + }, + { + name: 'unit_cell', + contents: [ + { + name: 'a=4.2, b=4.2, c=4.2, alpha=90.0, beta=90.0, gamma=90.0', + contents: [ + { + positions: [ + [0, 0, 0], + [4.2, 0, 0], + [0, 0, 0], + [0, 4.2, 0], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0], + [4.2, 4.2, 0], + [4.2, 0, 0], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 4.2, 0], + [0, 4.2, 4.2], + [0, 0, 4.2], + [4.2, 0, 4.2], + [0, 0, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 4.2] + ], + /* + animate: [ + [0, 0, 0], + [4.2, 0, 0], + [0, 0, 0], + [0, 4.2, 0], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0], + [4.2, 4.2, 0], + [4.2, 0, 0], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 4.2, 0], + [0, 4.2, 4.2], + [0, 0, 4.2], + [4.2, 0, 4.2], + [0, 0, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 4.2], + ], + */ + keyframes: [0, 1], + type: 'lines' + } + ], + visible: true + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true + }, + { + name: 'axes', + contents: [ + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.4, -1.4, -3.1] + ] + ], + color: 'red', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, + headWidth: 0.14, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-0.1, -2.5, -1.1] + ] + ], + color: 'green', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865, + headWidth: 0.14, // 0.37302772291498865, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.1, -1.1, -1.1] + ] + ], + color: 'blue', + radius: 0.07, // 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865) * 2, + headWidth: 0.14, // / 0.37302772291498865) * 2, + type: 'arrows', + clickable: false + }, + { + positions: [[-2.1, -2.1, -2.1]], + color: 'black', + radius: 0.0175, + type: 'spheres', + clickable: false + } + ], + visible: false + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true +}; + +export const s7 = { + name: '_ct_StructureMoleculeComponent_1', + contents: [ + { + name: 'atoms', + clickable: true, + contents: [ + { + positions: [ + [4.2, 4.2, 0], + [0, 4.2, 4.2], + [0, 4.2, 0], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0] + ], + color: '#f9dc3c', + radius: 0.5, + tooltip: 'label', + type: 'spheres', + clickable: true, + animate: [ + [0, 0, 0, 0, 0, 1, 0, 0, 0], + [0, 0, 0, 0, 0, -1, 0, 0, 0], + [0, 0, 0, 0, 0, 1, 0, 0, 0], + [0, 0, 0, 0, 0, -1, 0, 0, 0], + [0, 0, 0, 0, 0, -1, 0, 0, 0], + [0, 0, 0, 0, 0, 1, 0, 0, 0], + [0, 0, 0, 0, 0, -1, 0, 0, 0], + [0, 0, 0, 0, 0, 1, 0, 0, 0] + ], + keyframes: [0, 1, 2] + }, + { + positions: [[2.1, 2.1, 2.1]], + color: '#4444ff', + radius: 0.5, + type: 'spheres', + tooltip: 'label', + clickable: true, + animate: [0, 0, 0, 0, 0, 0, 0, 0, 0], + keyframes: [0, 1, 2] + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true + }, + { + name: 'bonds', + contents: [ + { + positionPairs: [ + [ + [4.2, 4.2, 0], + [3.1500000000000004, 3.1500000000000004, 1.05] + ], + [ + [0, 4.2, 4.2], + [1.05, 3.1500000000000004, 3.15] + ], + [ + [0, 4.2, 0], + [1.05, 3.1500000000000004, 1.05] + ], + [ + [4.2, 0, 4.2], + [3.1500000000000004, 1.05, 3.15] + ], + [ + [4.2, 4.2, 4.2], + [3.1500000000000004, 3.1500000000000004, 3.15] + ], + [ + [0, 0, 0], + [1.05, 1.05, 1.05] + ], + [ + [0, 0, 4.2], + [1.05, 1.05, 3.15] + ], + [ + [4.2, 0, 0], + [3.1500000000000004, 1.05, 1.05] + ] + ], + animate: [ + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 1], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 0 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, -1], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 1 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 1], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 2 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, -1], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 3 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, -1], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 4 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 1], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 5 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, -1], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 6 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 1], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 7 + ] + ], + keyframes: [0, 1, 2], + color: '#f9dc3c', + tooltip: 'label', + radius: 0.1, + type: 'cylinders', + clickable: true + }, + { + positionPairs: [ + [ + [2.1, 2.1, 2.1], // starts from center sphere + [1.05, 1.05, 1.05] // end in yellow + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 1.05, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 3.1500000000000004, 3.15] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 1.05, 3.15] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 3.1500000000000004, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [3.1500000000000004, 3.1500000000000004, 1.05] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 1.05, 3.15] + ], + [ + [2.1, 2.1, 2.1], + [1.05, 3.1500000000000004, 3.15] + ] + ], + animate: [ + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 0 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 1 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 2 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 3 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 4 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, 0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 5 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 6 + ], + [ + [ + [0, 0, 0], + [0, 0, 0] + ], + [ + [0, 0, 0], + [0, 0, -0.5] + ], + [ + [0, 0, 0], + [0, 0, 0] + ], + 7 + ] + ], + keyframes: [0, 1, 2], + color: '#a121f6', + radius: 0.1, + type: 'cylinders', + tooltip: 'label', + clickable: true + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true + }, + { + name: 'polyhedra', + contents: [ + { + positions: [ + [2.1, 2.1, 2.1], + [0, 0, 0], + [4.2, 0, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 0, 4.2], + [0, 4.2, 4.2] + ], + animate: [ + [[3.1, 3.1, 3.1], 0], + [[1, 1, 1], 1], + [[4, 1, 1], 2], + [[4, 4, 4], 3], + [[4, 1, 4], 5], + [[1, 4, 1], 6], + [[4, 4, 1], 7], + [[1, 1, 4], 8], + [[1, 4, 4], 9] + ], + keyframes: [0, 1], + color: '#a121f6', + type: 'convex' + } + ], + origin: [-2.1, -2.1, -2.1], + tooltip: 'label', + visible: false + }, + { + name: 'unit_cell', + contents: [ + { + name: 'a=4.2, b=4.2, c=4.2, alpha=90.0, beta=90.0, gamma=90.0', + contents: [ + { + positions: [ + [0, 0, 0], + [4.2, 0, 0], + [0, 0, 0], + [0, 4.2, 0], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0], + [4.2, 4.2, 0], + [4.2, 0, 0], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 4.2, 0], + [0, 4.2, 4.2], + [0, 0, 4.2], + [4.2, 0, 4.2], + [0, 0, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 4.2] + ], + /* + animate: [ + [0, 0, 0], + [4.2, 0, 0], + [0, 0, 0], + [0, 4.2, 0], + [0, 0, 0], + [0, 0, 4.2], + [4.2, 0, 0], + [4.2, 4.2, 0], + [4.2, 0, 0], + [4.2, 0, 4.2], + [0, 4.2, 0], + [4.2, 4.2, 0], + [0, 4.2, 0], + [0, 4.2, 4.2], + [0, 0, 4.2], + [4.2, 0, 4.2], + [0, 0, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 0], + [4.2, 4.2, 4.2], + [4.2, 0, 4.2], + [4.2, 4.2, 4.2], + [0, 4.2, 4.2], + [4.2, 4.2, 4.2], + ], + */ + keyframes: [0, 1], + type: 'lines' + } + ], + visible: true + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true + }, + { + name: 'axes', + contents: [ + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.4, -1.4, -3.1] + ] + ], + color: 'red', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, + headWidth: 0.14, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-0.1, -2.5, -1.1] + ] + ], + color: 'green', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865, + headWidth: 0.14, // 0.37302772291498865, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.1, -1.1, -1.1] + ] + ], + color: 'blue', + radius: 0.07, // 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865) * 2, + headWidth: 0.14, // / 0.37302772291498865) * 2, + type: 'arrows', + clickable: false + }, + { + positions: [[-2.1, -2.1, -2.1]], + color: 'black', + radius: 0.0175, + type: 'spheres', + clickable: false + } + ], + visible: false + } + ], + origin: [-2.1, -2.1, -2.1], + visible: true +}; + +export const scene = { + name: 'StructureMoleculeComponent', + contents: [ + { + name: 'axes', + contents: [ + { + positionPairs: [ + [ + [-2.13336842, -1.2940969500000001, -7.74158491], + [-1.618063699237322, -1.2962610988334031, -6.884580615250245] + ] + ], + color: 'red', + radius: 0.7, + headLength: 2.3, + headWidth: 1.4, + type: 'arrows', + clickable: true + }, + { + positionPairs: [ + [ + [-2.13336842, -1.2940969500000001, -7.74158491], + [-1.8972015468796977, -0.8360916583284603, -6.884580615470827] + ] + ], + color: 'green', + radius: 0.7, + headLength: 2.3, + headWidth: 1.4, + type: 'arrows', + clickable: true + }, + { + positionPairs: [ + [ + [-2.13336842, -1.2940969500000001, -7.74158491], + [-2.1369361013796637, -1.296261098833144, -6.741593615983197] + ] + ], + color: 'blue', + radius: 0.7, + headLength: 2.3, + headWidth: 1.4, + type: 'arrows', + clickable: true + }, + { + positions: [[-2.13336842, -1.2940969500000001, -7.74158491]], + color: 'white', + radius: 0.175, + type: 'spheres', + clickable: true + } + ], + origin: [0, 0, 0] + } + ], + origin: [2.13336842, 1.2940969500000001, 7.74158491] +}; + +export const shperes = { + name: 'StructureMoleculeComponent', + contents: [ + { + name: 'atoms', + contents: [ + { + name: 'axes', + contents: [ + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.4, -1.4, -3.1] + ] + ], + color: 'red', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, + headWidth: 0.14, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-0.1, -2.5, -1.1] + ] + ], + color: 'green', + radius: 0.07, // / 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865, + headWidth: 0.14, // 0.37302772291498865, + type: 'arrows', + clickable: false + }, + { + positionPairs: [ + [ + [-2.1, -2.1, -2.1], + [-1.1, -1.1, -1.1] + ] + ], + color: 'blue', + radius: 0.07, // 0.37302772291498865) * 2, + headLength: 0.24, // / 0.37302772291498865) * 2, + headWidth: 0.14, // / 0.37302772291498865) * 2, + type: 'arrows', + clickable: false + }, + { + positions: [[-2.1, -2.1, -2.1]], + color: 'black', + radius: 0.0175, + type: 'spheres', + clickable: false + } + ], + visible: false + }, + { + positions: [ + [-2.13336842, -1.2940969500000001, -7.74158491], + [0.8064071299999997, -1.3064432600000002, -2.8524384100000004], + [2.1537217799999997, 1.30644326, 2.0367080899999994], + [-0.8064071300000002, 1.30644326, 2.8524384099999995], + [2.13336842, 1.2940969500000001, 7.74158491], + [-2.15372178, -1.3064432600000002, -2.0367080900000003], + [0.7860537699999997, -1.31878957, 2.8524384099999995], + [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004] + ], + clickable: true, + color: '#ffaaaa', + radius: [0.5], + type: 'spheres' + }, + { + positions: [ + [1.1352943356867837, 0.688667561081374, 4.1197692008924705], + [-1.1352941382531998, -0.6886632575514795, -4.119769120104752] + ], + color: '#111111', + radius: [0.5], + type: 'spheres' + }, + { + positions: [[1.3132662690651387e-7, 0.000002162567968477802, -0.000004955452009625105]], + color: '#00ffdd', + radius: [0.65], + type: 'spheres' + } + ], + origin: [0, 0, 0] + } + ], + origin: [-2.1, -2.1, -2.1] +}; + +export const buggyScene = { + name: 'TestScene', + contents: [ + { + name: 'atoms', + contents: [ + { + positions: [ + [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004], + [-1.7860537700000001, 1.3187895699999999, -2.8524384100000004], + [-2.7860537700000001, 1.3187895699999999, -2.8524384100000004], + [-3.7860537700000001, 1.3187895699999999, -2.8524384100000004] + ], + color: '#ffaaaa', + radius: [0.5], + type: 'spheres' + } + ], + origin: [0, 0, 0] + } + ], + origin: [2.13336842, 1.2940969500000001, 7.74158491] +}; + +export const s5 = { + name: '_ct_StructureMoleculeComponent_1', + contents: [ + { + name: 'atoms', + contents: [ + { + positions: [ + [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], + [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575], + [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821] + ], + color: '#9ee373', + radius: 0.5, + type: 'spheres', + tooltip: 'heell', + clickable: true + }, + { + positions: [ + [1.6081450794147842, 0.9284629773820368, 4.589578371864425], + [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245] + ], + color: '#b0b9e6', + radius: 0.5, + type: 'spheres', + tooltip: 'heell2', + clickable: true + } + ], + origin: [-0.80407253, -1.39269448, -2.61998123], + visible: true + }, + { + name: 'bonds', + contents: [ + { + positionPairs: [ + [ + [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], + [0.8040725300000001, 1.39269448, 2.29248357625] + ], + [ + [1.6081450794147842, 0.9284629773820368, 2.6153700106355755], + [1.6081450794147842, 0.9284629773820368, 3.6024741912500002] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575], - [0.8040725300000001, 1.39269448, 4.91246480625], + [0.8040725300000001, 1.39269448, 4.91246480625] ], [ [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821], - [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999], - ], + [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999] + ] ], color: '#9ee373', radius: 0.1, @@ -1101,50 +2201,49 @@ export const s5 = { radiusBottom: 0.4, type: 'cylinders', tooltip: 'heell4', - clickable: false, + clickable: false }, { positionPairs: [ [ [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [0.8040725300000001, 1.39269448, 4.91246480625], + [0.8040725300000001, 1.39269448, 4.91246480625] ], [ [1.6081450794147842, 0.9284629773820368, 4.589578371864425], - [1.6081450794147842, 0.9284629773820368, 3.6024741912500002], + [1.6081450794147842, 0.9284629773820368, 3.6024741912500002] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], - [0.8040725300000001, 1.39269448, 2.29248357625], + [0.8040725300000001, 1.39269448, 2.29248357625] ], [ [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245], - [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999], - ], + [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999] + ] ], color: '#b0b9e6', radius: 0.1, radiusTop: [0.13, 0.01, 0.05, 0.1, 0.25], radiusBottom: [0.4, 0.3, 0.25, 0.5, 0.01], type: 'cylinders', - clickable: false, - }, + clickable: false + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'polyhedra', contents: [], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'unit_cell', contents: [ { - name: - 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569', + name: 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569', contents: [ { positions: [ @@ -1171,17 +2270,17 @@ export const s5 = { [3.21629013, 0, 5.23996246], [1.60814506, 2.78538896, 5.23996246], [-1.60814507, 2.78538896, 5.23996246], - [1.60814506, 2.78538896, 5.23996246], + [1.60814506, 2.78538896, 5.23996246] ], type: 'lines', - clickable: false, - }, + clickable: false + } ], - visible: true, - }, + visible: true + } ], origin: [-0.80407253, -1.39269448, -2.61998123], - visible: true, + visible: true }, { name: 'axes', @@ -1190,55 +2289,155 @@ export const s5 = { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [0.19592747, -1.39269448, -2.61998123], - ], + [0.19592747, -1.39269448, -2.61998123] + ] ], color: 'red', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [-1.304072530966841, -0.5266690767737673, -2.61998123], - ], + [-1.304072530966841, -0.5266690767737673, -2.61998123] + ] ], color: 'green', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positionPairs: [ [ [-0.80407253, -1.39269448, -2.61998123], - [-0.80407253, -1.39269448, -1.61998123], - ], + [-0.80407253, -1.39269448, -1.61998123] + ] ], color: 'blue', radius: 0.07, headLength: 0.24, headWidth: 0.14, type: 'arrows', - clickable: false, + clickable: false }, { positions: [[-0.80407253, -1.39269448, -2.61998123]], color: 'white', radius: 0.0175, type: 'spheres', - clickable: false, + clickable: false + } + ], + visible: false + } + ], + origin: [-0.80407253, -1.39269448, -2.61998123], + visible: true +}; + +export const s8 = { + name: 'Structure', + contents: [ + { + name: 'atoms', + contents: [ + { + positions: [[3.8891685, 2.7500584999999997, 6.7362365]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (3.889, 2.750, 6.736) (magmom = -0.0)', + clickable: true, + animation: [ + 0.0, -0.0, -0.0, 1.2253779684838535e-6, -1.4880476230084796e-5, -0.6614926055117101, + 0.0, -0.0, -0.0, -1.2253779684838535e-6, 1.4880476230084796e-5, 0.6614926055117101 + ], + animate: [ + 0.0, 0.0, 0.0, 0.00011513059561120247, 0.000500802115067177, 0.6614924060877703, 0.0, + 0.0, 0.0, -0.00011513059561120247, -0.000500802115067177, -0.6614924060877703 + ], + keyframes: [0, 1, 2, 3] }, + { + positions: [[0.5555955, 0.3928655, 0.9623195]], + color: '#f0c8a0', + radius: 0.5, + type: 'spheres', + tooltip: 'Si (0.556, 0.393, 0.962) (magmom = -0.0)', + clickable: true, + animation: [ + 0.0, -0.0, -0.0, 1.2253779684961932e-6, -1.4880476229968724e-5, -0.6614926055117094, + 0.0, -0.0, -0.0, -1.2253779684961932e-6, 1.4880476229968724e-5, 0.6614926055117094 + ], + animate: [ + -0.0, -0.0, -0.0, -0.0001151305956111568, -0.0005008021150672369, -0.6614924060877709, + -0.0, -0.0, -0.0, 0.0001151305956111568, 0.0005008021150672369, 0.6614924060877709 + ], + keyframes: [0, 1, 2, 3] + } ], - visible: false, + origin: [-2.222382, -1.571462, -3.849278], + visible: true }, + { name: 'bonds', contents: [], origin: [-2.222382, -1.571462, -3.849278], visible: true }, + { name: 'polyhedra', contents: [], origin: [-2.222382, -1.571462, -3.849278], visible: true }, + { name: 'magmoms', contents: [], origin: [-2.222382, -1.571462, -3.849278], visible: true }, + { + name: 'unit_cell', + contents: [ + { + name: 'a=3.8492784033699095, b=3.8492794116013456, c=3.849278, alpha=60.00001213094421, beta=60.00000346645984, gamma=60.00001097545789', + contents: [ + { + positions: [ + [0, 0, 0], + [3.333573, 0.0, 1.924639], + [0, 0, 0], + [1.111191, 3.142924, 1.924639], + [0, 0, 0], + [0.0, 0.0, 3.849278], + [3.333573, 0.0, 1.924639], + [4.444764, 3.142924, 3.849278], + [3.333573, 0.0, 1.924639], + [3.333573, 0.0, 5.773917], + [1.111191, 3.142924, 1.924639], + [4.444764, 3.142924, 3.849278], + [1.111191, 3.142924, 1.924639], + [1.111191, 3.142924, 5.773917], + [0.0, 0.0, 3.849278], + [3.333573, 0.0, 5.773917], + [0.0, 0.0, 3.849278], + [1.111191, 3.142924, 5.773917], + [4.444764, 3.142924, 3.849278], + [4.444764, 3.142924, 7.698556], + [3.333573, 0.0, 5.773917], + [4.444764, 3.142924, 7.698556], + [1.111191, 3.142924, 5.773917], + [4.444764, 3.142924, 7.698556] + ], + type: 'lines', + clickable: false + } + ], + visible: true + } + ], + origin: [-2.222382, -1.571462, -3.849278], + visible: true + } ], - origin: [-0.80407253, -1.39269448, -2.61998123], + origin: [-2.222382, -1.571462, -3.849278], visible: true, + lattice: [ + [3.333573, 0.0, 1.924639], + [1.111191, 3.142924, 1.924639], + [0.0, 0.0, 3.849278] + ] }; diff --git a/src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx b/src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx new file mode 100644 index 00000000..7fdbb342 --- /dev/null +++ b/src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx @@ -0,0 +1,249 @@ +import React, { useEffect, useState } from 'react'; +import { scene, scene2 } from '../../components/crystal-toolkit/scene/mike'; +import { + s2, + s3, + s4, + s5, + s6, + s7, + s8, + shperes +} from '../../components/crystal-toolkit/scene/simple-scene'; +import { phonon_scene } from '../../components/crystal-toolkit/scene/phonon-animation-scene'; +import { phonon_position_scene } from '../../components/crystal-toolkit/scene/phonon-animation-position-scene'; +import { CameraContextProvider } from '../../components/crystal-toolkit/CameraContextProvider'; +import { AnimationStyle, Renderer } from '../../components/crystal-toolkit/scene/constants'; +import { CrystalToolkitScene } from '../../components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene'; +import { ExportType } from '../../components/crystal-toolkit/scene/constants'; +import { Download } from '../../components/crystal-toolkit/Download'; +import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-helper'; +import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer'; +import * as THREE from 'three'; +import { Camera } from 'three'; +import { useRef } from 'react'; +import { Enlargeable } from '../../components/data-display/Enlargeable'; +import { CrystalToolkitAnimationScene } from '../../components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene'; + +/** + * Component for testing Scene + */ + +const vis = { atoms: true }; + +function SceneSwitcher() { + const [_scene, setScene] = useState(s2) as any; + const [_vis, setVisibility] = useState(vis) as any; + const [_anim, setAnim] = useState(AnimationStyle.NONE) as any; + + return ( +
+
setScene(s2)}> SCENE A
+
setScene(s3)}> SCENE B
+
setScene(s4)}> SCENE C
+
setScene(scene)}> SCENE D
+
setAnim(AnimationStyle.PLAY)}> PLAY
+
setAnim(AnimationStyle.NONE)}> NONE
+
setAnim(AnimationStyle.SLIDER)}> SLIDER
+
{ + vis.atoms = !vis.atoms; + setVisibility({ ...vis }); + }} + > + {' '} + TOGGLE VIS{' '} +
+ +
+ ); +} + +export const CrystalStructureAnimationViewer: React.FC = () => { + const [dataInput, setDataInput] = useState(); + const [structureContainerWidth, setStructureContainerWidth] = useState('50%'); + const structureContainer = useRef(null); + + const cameraState1 = { + quaternion: { + x: -0.3824241795060149, + y: -0.008442802938742472, + z: 0.0004401494693141228, + w: 0.9239481978315308 + }, + position: { + x: -0.25682715953384966, + y: 11.387372804441647, + z: 11.398460914084055 + }, + zoom: 4 + }; + + const cameraState2 = { + quaternion: new THREE.Quaternion( + 0.024653779710988616, + -0.08400795009836932, + -0.18017488693493414, + 0.9797305066109842 + ), + position: new THREE.Vector3(-2.7956984323728205, -0.29063127398876126, 15.867032946487644), + zoom: 2.4640147374718713 + }; + + const [state, setState] = useState({ + imageData: undefined, + imageRequest: undefined, + imageDataTimestamp: undefined, + currentCameraState: undefined, + customCameraState: cameraState2, + fileType: '', + fileTimestamp: '' + }); + + const [stateTwo, setStateTwo] = useState({ + imageData: undefined, + imageRequest: undefined, + imageDataTimestamp: undefined, + currentCameraState: undefined, + customCameraState: cameraState2 + }); + + const [value, setValue] = useState('test'); + + useEffect(() => { + if (state.imageData) { + setDataInput({ + filename: 'crystal', + content: state.imageData, + mimeType: 'image/png', + isDataURL: true + }); + } + }, [state.imageDataTimestamp]); + + // useEffect(() => { + // if (state.cameraState) { + // console.log(state.cameraState); + // } + // }, [state.cameraState]); + + return ( +
+ + + + + + <> +
+
+ +

Settings panel

+

This could be a legend

+ +
+
+ {/* */} + + +

{state.fileType}

+

{state.fileTimestamp}

+

{state.imageDataTimestamp}

+

Parent Current Camera State:

+

{JSON.stringify(state.currentCameraState)}

+ + {/* + <> + + + + */} + {/* + + */} + {/* */} +
+ ); +}; diff --git a/src/pages/CrystalStructureAnimationViewer/index.tsx b/src/pages/CrystalStructureAnimationViewer/index.tsx new file mode 100644 index 00000000..f3db6915 --- /dev/null +++ b/src/pages/CrystalStructureAnimationViewer/index.tsx @@ -0,0 +1 @@ +export { CrystalStructureAnimationViewer } from './CrystalStructureAnimationViewer';