お家サーバー その10

概要

お家サーバーやってみる。
ハッカソンなので、wordpressにthree.js載せてみた。

写真

手順

• 新規投稿クリック。
• カスタムHTMLブロックを追加。

サンプルコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/three@0.124.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.124.0/examples/js/controls/DragControls"></script>
<script src="https://unpkg.com/three@0.124.0/examples/js/controls/OrbitControls.js"></script>
<div id="koko"></div>
<script>
let scene, 
    camera, 
    light,
    renderer;
renderer = new THREE.WebGLRenderer({ 
	  antialias: true 
});
renderer.setSize(400, 400);
var conk = document.getElementById('koko');
conk.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfd1e5);
camera = new THREE.PerspectiveCamera(45, 400 / 400, 1, 1000);
camera.position.set(0, 0, 200);
scene.add(camera);
light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);
const size = 70;
const geometry = new THREE.BoxGeometry(size, size, size);
const material = new THREE.MeshNormalMaterial()
const box = new THREE.Mesh(geometry, material);
scene.add(box);
renderer.render(scene, camera);
var raycaster = new THREE.Raycaster();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
renderer.domElement.addEventListener('click', function(e) {
  var raymouse = new THREE.Vector2();
	raymouse.x = (e.offsetX / 400) * 2 - 1;
	raymouse.y = -(e.offsetY / 400) * 2 + 1;
	raycaster.setFromCamera(raymouse, camera);
	var intersects = raycaster.intersectObjects(scene.children);
	if (intersects.length > 0)
	{
		const material0 = new THREE.LineBasicMaterial({ 
  	  color: 0xff0000 
    })
    const points = new Array()
    points.push(intersects[0].point)
    points.push(new THREE.Vector3(50, -50, 40))
    const geometry0 = new THREE.BufferGeometry().setFromPoints(points)
    const line = new THREE.Line(geometry0, material0)
    scene.add(line)
    renderer.render(scene, camera);
    }
})
function tick() {
	requestAnimationFrame(tick);
	//box.rotation.x += 0.03;
	//box.rotation.y -= 0.02;
	renderer.render(scene, camera);
	controls.update();
}
tick();
</script>

以上。