Embedding three.js in WordPress 워드프레스에서 three.js 사용

Embedding three.js in WordPress

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

The little piece of code that I added (under the “text” tab in WordPress’ backend) looks like this:

<iframe src="http://3dspace.com/3dassets/experiments/demo1.html" width="700" height="300" scrolling="no"></iframe>

A little bit of explanation of what’s going on in there:

• src points to where the html file (with the three.js payload) lives on my server. I have to ftp the file into that location – so this isn’t a very “WordPress” solution. But, other than the ftp part, there’s no headaches.
• the height and width I chose are maximums, as far as the .css is concerned. I’m using the twentysixteen theme, and it nicely keeps the size of the iframe within the device window. Though – you do have to reload the page when you resize the window – the three.js part isn’t able to adapt to new window sizes on the fly.
• scrolling is an extra argument that gets rid of the scrollbars on the iframe.

And that’s it. Pretty close to a no-brainer. Which, for me is a bit of a relief. I had been monkeying with adding three.js code in WordPress’ backend – but I found that the backend was helpfully adding html mark-up to my javascript, and that the css/layout issues were nontrivial, to say the least.