"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Interaktiv 3D-simulering av trebyggjeklossar med realistisk fysikk. Drag-and-drop, mål-verktøy og reset." }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "lang" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "en", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "meta"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "charset" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "UTF-8", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "meta"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "name" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "viewport", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "content" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Realistic Wooden Blocks", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "style"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "body" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "overflow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " hidden", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#ffffff" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " -apple-system", _jsx(_components.span, { className: "token punctuation", children: "," }), " BlinkMacSystemFont", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"Segoe UI\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " Roboto", _jsx(_components.span, { className: "token punctuation", children: "," }), " Helvetica", _jsx(_components.span, { className: "token punctuation", children: "," }), " Arial", _jsx(_components.span, { className: "token punctuation", children: "," }), " sans-serif", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "touch-action" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "user-select" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "-webkit-user-select" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token id", children: "#canvas-container" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "vw" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "vh" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " block", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token id", children: "#ui-layer" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " absolute", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "right" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "pointer-events" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "flex-direction" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "z-index" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".icon-btn" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "pointer-events" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " auto", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "transparent" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "outline" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#000000" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pointer", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.4" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " all ", _jsx(_components.span, { className: "token number", children: "0.2" }), _jsx(_components.span, { className: "token unit", children: "s" }), " ease", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "align-items" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "justify-content" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".icon-btn" }), _jsx(_components.span, { className: "token pseudo-class", children: ":hover" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.9" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "scale" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".icon-btn" }), _jsx(_components.span, { className: "token class", children: ".active" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "drop-shadow" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0.2" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token id", children: "#dimension-label" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " absolute", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "255" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "255" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "255" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.98" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#000" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "6" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "line-height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.3" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "pointer-events" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "translate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "-50" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "-130" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "white-space" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pre-line", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "text-align" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " opacity ", _jsx(_components.span, { className: "token number", children: "0.15" }), _jsx(_components.span, { className: "token unit", children: "s" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "z-index" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "px" }), " solid ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0.05" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".label-title" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "700" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#444" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " block", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "text-transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " uppercase", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "importmap", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"imports\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"three\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"three/addons/\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"cannon-es\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js\"" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "canvas-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dimension-label", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "ui-layer", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "icon-btn", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "measureBtn", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Measure", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "svg"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "14", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "height" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "14", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "viewBox" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "0 0 24 24", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "fill" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "none", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "currentColor", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "3", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-linecap" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "round", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-linejoin" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "round", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "path"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "d" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "M21.17 3.25q.91.91.91 2.27 0 1.36-.91 2.27L8.46 20.5q-.91.91-2.27.91-1.36 0-2.27-.91l-3.18-3.18q-.91-.91-.91-2.27 0-1.36.91-2.27L13.46 3.25q.91-.91 2.27-.91 1.36 0 2.27.91z", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "line"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "16.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "7.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "18.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "9.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "line"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "12.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "11.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "14.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "13.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "line"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "8.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y1" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "15.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "x2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "10.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "y2" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "17.5", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "icon-btn", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "resetBtn", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Reset", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "svg"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "14", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "height" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "14", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "viewBox" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "0 0 24 24", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "fill" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "none", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "currentColor", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "3", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-linecap" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "round", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "stroke-linejoin" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "round", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "path"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "d" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "polyline"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "points" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "3 3 3 8 8 8", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "module", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token keyword module", children: "as" }), " ", _jsx(_components.span, { className: "token constant", children: "THREE" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'three'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "OrbitControls" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'three/addons/controls/OrbitControls.js'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "RoundedBoxGeometry" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'three/addons/geometries/RoundedBoxGeometry.js'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token keyword module", children: "as" }), " ", _jsx(_components.span, { className: "token constant", children: "CANNON" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'cannon-es'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0.05" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " gap ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0.02" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " colors ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "lightBlue" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0x5ba3cc" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orange" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0xec8123" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "red" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0xc93636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "darkBlue" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0x274885" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " sz ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "blueLong" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "75" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "blueShort" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "60" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "cyl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "60" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orange" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "45" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "45" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "24" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "cube" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "30" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " blockDefinitions ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'base'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Dark Blue Plank'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'box'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "darkBlue" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"30 × 75 × 15 mm\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'cube'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Light Blue Cube'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'box'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cube" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "lightBlue" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " gap ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cube" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"30 × 30 × 30 mm\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'short'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Dark Blue Short'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'box'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueShort" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "darkBlue" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " gap", _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cube" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueShort" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"30 × 60 × 15 mm\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'cyl'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Red Cylinder'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'cylinder'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cyl" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "red" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " gap ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cyl" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Ø 30 mm, H 60 mm\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Orange Block'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'box'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "size" }), _jsx(_components.span, { className: "token operator", children: ":" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "orange" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "orange" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueLong" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " gap", _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token number", children: "3" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cube" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "blueShort" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " sz", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "orange" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"45 × 45 × 24 mm\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " isMeasureMode ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " selectedMeshForMeasure ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " container ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'canvas-container'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " labelEl ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'dimension-label'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " measureBtn ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'measureBtn'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " scene ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Scene"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" scene", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "background" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Color"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0xffffff" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " camera ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "PerspectiveCamera"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "35" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" camera", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "22" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " renderer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "WebGLRenderer"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "antialias" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setSize" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setPixelRatio" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "devicePixelRatio" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "toneMapping" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "THREE" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ACESFilmicToneMapping" }) }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadowMap" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "enabled" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadowMap" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "THREE" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "PCFShadowMap" }) }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" container", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "appendChild" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "domElement" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " controls ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "OrbitControls" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "camera", _jsx(_components.span, { className: "token punctuation", children: "," }), " renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "domElement" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "enableDamping" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "dampingFactor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0.05" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "maxPolarAngle" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "PI" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "0.05" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " sun ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "DirectionalLight"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0xffffff" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "2.8" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "castShadow" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "mapSize" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "width" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "4096" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "mapSize" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "height" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "4096" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "camera" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "left" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "camera" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "right" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "camera" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "top" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "camera" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "bottom" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" sun", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "shadow" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "bias" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "0.0001" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" scene", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "sun", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fill ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "AmbientLight"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0xffffff" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.15" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" scene", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fill", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " world ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "World"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "gravity" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "9.81" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "broadphase" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "NaiveBroadphase"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "solver" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "iterations" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " woodMat ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Material"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'wood'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " contactMat ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "ContactMaterial"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "woodMat", _jsx(_components.span, { className: "token punctuation", children: "," }), " woodMat", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "friction" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.8" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "restitution" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "contactEquationStiffness" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1e9" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "contactEquationRelaxation" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addContactMaterial" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "contactMat", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " groundMesh ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Mesh"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "PlaneGeometry"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "ShadowMaterial"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "opacity" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" groundMesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "rotation" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "PI" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" groundMesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "receiveShadow" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" scene", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "groundMesh", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " groundBody ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Body"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "mass" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "material" }), _jsx(_components.span, { className: "token operator", children: ":" }), " woodMat ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" groundBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addShape" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Box"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" groundBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addBody" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "groundBody", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " meshes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " bodies ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " initialStates ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " blockMatConfig ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "roughness" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.8" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "metalness" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "clearcoat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.05" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" blockDefinitions", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "def" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " geo", _jsx(_components.span, { className: "token punctuation", children: "," }), " shape", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'box'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" geo ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "RoundedBoxGeometry" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.03" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" shape ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Box"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" geo ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "CylinderGeometry"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "32" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" shape ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Cylinder"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "size" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "32" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " mesh ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Mesh"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "geo", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "MeshPhysicalMaterial"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "blockMatConfig ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "castShadow" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " mesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "receiveShadow" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "userData" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "dims" }), _jsx(_components.span, { className: "token operator", children: ":" }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "dims" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "baseColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Color"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" scene", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "add" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mesh", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " body ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Body"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "mass" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "material" }), _jsx(_components.span, { className: "token operator", children: ":" }), " woodMat", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "linearDamping" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "angularDamping" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'cylinder'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " q ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Quaternion"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " q", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setFromAxisAngle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "PI" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" body", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addShape" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "shape", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " q", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " body", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addShape" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "shape", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" body", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addBody" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "body", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" meshes", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mesh", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " bodies", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "body", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " mesh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "userData" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "body" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " body", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" initialStates", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "pos" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "def", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "quat" }), _jsx(_components.span, { className: "token operator", children: ":" }), " body", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "quaternion" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "clone" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " raycaster ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Raycaster"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " mouse ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vector2"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " draggedBody ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " mouseConstraint ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " isPointerDown ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " mouseBody ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Body"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "mass" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "CANNON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Body" }) }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "KINEMATIC" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addBody" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouseBody", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " dragPlane ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Plane"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" measureBtn", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: "onclick" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" isMeasureMode ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "isMeasureMode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" measureBtn", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "classList" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toggle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'active'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " isMeasureMode", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isMeasureMode", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "clearMeasurement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "body" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cursor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " isMeasureMode ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'crosshair'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'default'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "clearMeasurement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" selectedMeshForMeasure ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "opacity" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'0'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" meshes", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "m" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "material" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "emissive" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setHex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "onPointerDown" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "e" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "closest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'.icon-btn'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" isPointerDown ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " x ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientX" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientX" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " y ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientY" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientY" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mouse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "x ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " mouse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "y ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" raycaster", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setFromCamera" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouse", _jsx(_components.span, { className: "token punctuation", children: "," }), " camera", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " hits ", _jsx(_components.span, { className: "token operator", children: "=" }), " raycaster", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "intersectObjects" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "meshes", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isMeasureMode", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "hits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" selectedMeshForMeasure ", _jsx(_components.span, { className: "token operator", children: "=" }), " hits", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "object" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" meshes", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "m" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "material" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "emissive" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setHex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" selectedMeshForMeasure", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "material" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "emissive" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setHex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0x222222" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHTML" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token embedded-code html", children: "${selectedMeshForMeasure.userData.name}${selectedMeshForMeasure.userData.dims}" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "opacity" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'1'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token function", children: "clearMeasurement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "hits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "enabled" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " draggedBody ", _jsx(_components.span, { className: "token operator", children: "=" }), " hits", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "object" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "userData" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "body" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " draggedBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "wakeUp" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" dragPlane", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setFromNormalAndCoplanarPoint" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "camera", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getWorldDirection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vector3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "negate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " hits", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "point" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " local ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " draggedBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "pointToLocalFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "hits", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "point" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " local", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mouseBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "hits", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "point" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mouseConstraint ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "PointToPointConstraint"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "draggedBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " local", _jsx(_components.span, { className: "token punctuation", children: "," }), " mouseBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CANNON", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vec3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addConstraint" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouseConstraint", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "onPointerMove" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "e" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isPointerDown ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "draggedBody", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " x ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientX" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientX" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " y ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientY" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "touches" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "clientY" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mouse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "x ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " mouse", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "y ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" raycaster", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setFromCamera" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouse", _jsx(_components.span, { className: "token punctuation", children: "," }), " camera", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " hit ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["THREE", _jsx(_components.span, { className: "token punctuation", children: "." }), "Vector3"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " raycaster", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "ray" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "intersectPlane" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "dragPlane", _jsx(_components.span, { className: "token punctuation", children: "," }), " hit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "hit", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " hit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "max" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "hit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.4" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " mouseBody", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "hit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "onPointerUp" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" isPointerDown ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouseConstraint", _jsx(_components.span, { className: "token punctuation", children: ")" }), " world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "removeConstraint" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mouseConstraint", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" mouseConstraint ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " draggedBody ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "enabled" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" container", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'pointerdown'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " onPointerDown", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'pointermove'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " onPointerMove", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'pointerup'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " onPointerUp", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'resetBtn'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: "onclick" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "clearMeasurement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" bodies", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["b", _jsx(_components.span, { className: "token punctuation", children: "," }), " i"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initialStates", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "quaternion" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initialStates", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "quat" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "velocity" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "angularVelocity" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " b", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "wakeUp" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'resize'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" camera", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "aspect" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " camera", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "updateProjectionMatrix" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setSize" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "animate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "t" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "requestAnimationFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " dt ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "min" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "animate", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "lt" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " t", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.03" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " animate", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "lt" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " t", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" world", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "step" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " dt", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" meshes", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["m", _jsx(_components.span, { className: "token punctuation", children: "," }), " i"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "isNaN" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "bodies", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" bodies", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initialStates", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "pos" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " bodies", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "velocity" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "bodies", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " m", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "quaternion" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "copy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "bodies", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "quaternion" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "selectedMeshForMeasure ", _jsx(_components.span, { className: "token operator", children: "&&" }), " labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "opacity" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'1'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " pos ", _jsx(_components.span, { className: "token operator", children: "=" }), " selectedMeshForMeasure", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "clone" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" pos", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "+=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "selectedMeshForMeasure", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "geometry" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "parameters" }), _jsx(_components.span, { className: "token operator", children: "?." }), "height ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" pos", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "project" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "camera", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "left" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pos", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "x" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerWidth" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "px" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" labelEl", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "top" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "pos", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "y" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "0.5" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHeight" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "px" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" controls", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "update" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " renderer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "scene", _jsx(_components.span, { className: "token punctuation", children: "," }), " camera", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "requestAnimationFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };