2e:null 2f:["$","title",null,{"children":"pimJS 3D Web Components | Steven De Keninck | Observable"}] 34:[] 32:{"id":"2771e34edb89d538","slug":"pimjs-3d-web-components","title":"pimJS 3D Web Components","thumbnail":"6768ed36a6dad76186e4df04d60a4410bf69cb8a22b56c5b34a6ae8b41a5d747","access_level":"public","create_time":"$D2018-05-31T21:43:42.112Z","update_time":"$D2019-09-29T09:03:01.194Z","view_time":null,"first_public_time":"$D2018-05-31T22:29:13.532Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"679a6b4e77863c60","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":"starter_2024"},"version":175,"publish_version":175,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null}],"members":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"pimJS 3D Web Components","cells":[{"id":0,"value":"md`# pimJS 3D Web Components\n\nThis notebook illustrates the web component version of the pimJS 3D engine that allows you to include 3D content in your webpages and notebooks without scripting, converting or frame handlers.\n\nWe start of by including the pimJS 3D engine :\n\n* For browsers other than Chrome or Safari, you'll need a webcomponents polyfill !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"require('https://enkimute.github.io/res/custom-elements.min.js').catch(()=>\"custom-elements.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"pim=require('https://enkimute.github.io/res/pim-min-jr.js').catch(()=>{return window.pimDirector})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`Once the engine is loaded, you can load 3D content using the **pimjs-element** html tag.\n\n## Loading 3D Objects\n\nFirst lets load a lightwave LWO file, with PBR materials and display it with HDR lighting.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html2``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`Similar for wavefront OBJ files :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"html2``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Loading 3D Animations\n\nThe same technique can be used to load files with full animations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html2``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## HTML Events\n\nThese 3D elements have event handlers just like any other html element. The sphere below responds to mouse enter/leave and clicks :\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html2``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## Particles\n\nParticles and other pimJS features are also easy to access :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html2`\nmyDir.scene.addParticle({\n parent : this.obj.inst,\n Version : 2,\n alphaName : 'https://enkimute.github.io/res/star.jpg',\n birthRate : 20, \n Intensity : 1,\n lifeTime : 4,\n Size : 0.1,\n velocity : 0.25,\n randomColor : true,\n GravityY : -0.1,\n Weight : 1,\n direction : [0,1,0],\n coneAngle : 0.08,\n scale : [0.01,0.01,0.01]\n});\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"html2 = function(string) {\n function toPRE(x,s) { \n var xt = x[0]; if (!xt) return;\n if (xt.length>150 && !xt.match(/\\n/)) xt = xt.replace(/\\s+(\\S+=\".*?\")/g,'\\n $1').replace(/([^\\n])\\>\\<\\/pimjs\\-element\\>/,'$1\\n>');\n if (s!==false) xt=xt.replace(/ *id=\".*?\"| *style=\".*?\"/g,'');\n xt = xt.replace(/\\$1=');\n xt = xt.replace(/=\"\"/g,\"\");\n xt = xt.replace(/=\"(.*?)\"/g,'=\"$1\"');\n return `

${xt.replace(/\\.pimJS/,'.lws').replace(/=\"\"/g,'').replace(/\\n\\s*\\n/g,'\\n')}

`;\n }\n return html`

${toPRE(string)+string[0]}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"