概要
OCI Cloud Free Tierを取得してみた。
ubuntuに wordpressをインストールした。
three.jsを投稿してみた。
手順
管理画面を開く。
ブラウザでhttp://****/wp-admin/ を開く。
投稿 新規投稿を追加をクリック
カスタム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();
公開する。
写真
以上。