Three.jsのアニメーションを直接HatenaBlogに埋め込みできるか確認

Three.jsのアニメーションを直接HatenaBlogに埋め込みできるか確認

コードはこれ↓

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<script type="text/javascript">
var ThreeCanvas = document.getElementById("ThreeCanvas");
var Width = ThreeCanvas.clientWidth;
var Height = ThreeCanvas.clientHeight;
var ThreeCamera = new THREE.PerspectiveCamera( 45 , Width / Height , 1 , 10000 );
var ThreeRenderer = new THREE.WebGLRenderer({antialias: true});
var ThreeScene = new THREE.Scene();
var Theta = 0;
function onLoad() {
ThreeRenderer.setSize(Width, Height );
ThreeCanvas.appendChild(ThreeRenderer.domElement);
ThreeRenderer.setClearColor(0xFFFFFF);

var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
light.position.set( -100, -100, 200 );
ThreeScene.add(light);
var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 200 );
ThreeScene.add(light);
var ambientLight = new THREE.AmbientLight(0x888888);
ThreeScene.add(ambientLight);

ThreeScene.add(ThreeCamera);
ThreeCamera.position.z = 100;
ThreeCamera.up.x = 0;
ThreeCamera.up.y = 0;
ThreeCamera.up.z = 1;

var col = 0xff0000;
var mat = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var box = new THREE.Mesh(new THREE.CubeGeometry(20,20,20), mat);
ThreeScene.add(box);
box.position.set(0,0,0);
var tri2 = createTriangle(-20,40,-20, 100,40,0, 0,40,100, 0xFF00FF);
var tri3 = createTriangle(-20,60,-20, 100,60,0, 0,60,100, 0xFFFF00);
var tri1 = createTriangle(-20,25,-20, 100,25,0, 0,25,100, 0x00FFFF);
ThreeScene.add(tri3);
ThreeScene.add(tri2);
ThreeScene.add(tri1);

window.requestAnimationFrame(loop);
}
function createTriangle(x0,y0,z0, x1,y1,z1, x2,y2,z2, col) {
var geometry = new THREE.Geometry();
var vect0 = new THREE.Vector3(x0, y0, z0);
var vect1 = new THREE.Vector3(x1, y1, z1);
var vect2 = new THREE.Vector3(x2, y2, z2);
var face = new THREE.Face3(
geometry.vertices.push(vect0)-1,
geometry.vertices.push(vect1)-1,
geometry.vertices.push(vect2)-1);

geometry.faces.push(face);
geometry.computeFaceNormals();
var mat = new THREE.MeshLambertMaterial({color:col, ambient:col,
opacity:0.5,
side:THREE.DoubleSide, transparent:true });
var tri = new THREE.Mesh( geometry, mat );
return tri;
}
function loop() {
Theta += 0.02;
ThreeCamera.position.x = 300*Math.sin(Theta);
ThreeCamera.position.y = 300*Math.cos(Theta);
ThreeCamera.lookAt( {x:0, y:0, z:0 } );

ThreeRenderer.clear();
ThreeRenderer.render(ThreeScene, ThreeCamera);
window.requestAnimationFrame(loop);
}
onLoad();
</script>