🐒
Three.jsで3Dの矢印を作りました！
今回はThree.jsで3Dの矢印を作ってみました。
３Ｄの矢印を作成する、javascript、CSS、HTMLです。
HTML＆JavaScript
これを矢印を描画したい箇所に記載します。
<html>
<head>
<title>Three.js矢印テスト</title>
<style>
.animation-container {
width: 360px;
height: 200px;
margin: 0 auto;
padding: 0;
position: relative;
background-color: #ffffff;
}
.animation-canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
<script type="importmap">
{"imports":
{"three":
"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from "three";
const container = document.getElementById('animation-arrow');
// シーンの作成
const scene = new THREE.Scene();
// カメラの作成
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;
// レンダラーの作成
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(360, 200); // 固定サイズを設定
renderer.setClearColor(0xffffff); // 背景を白に設定
container.appendChild(renderer.domElement);
renderer.domElement.classList.add('animation-canvas');
// 矢印の形状を定義
const arrowShape = new THREE.Shape();
arrowShape.moveTo(0, -1);
arrowShape.lineTo(0.4, -0.6);
arrowShape.lineTo(0.2, -0.6);
arrowShape.lineTo(0.2, 1);
arrowShape.lineTo(-0.2, 1);
arrowShape.lineTo(-0.2, -0.6);
arrowShape.lineTo(-0.4, -0.6);
arrowShape.lineTo(0, -1);
// 立体形状の矢印を作成
const extrudeSettings = { depth: 0.5, bevelEnabled: false };
const geometry = new THREE.ExtrudeGeometry(arrowShape, extrudeSettings);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const arrow = new THREE.Mesh(geometry, material);
arrow.scale.set(4.2, 1.8, 3);
arrow.rotation.set(Math.PI / 1, 0, 0);
scene.add(arrow);
// 点光源の追加
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 3, 5);
scene.add(pointLight);
// 環境光の追加
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 矢印のアニメーション設定
renderer.setAnimationLoop((time) => {
arrow.rotation.y = time / 1000;
renderer.render(scene, camera);
});
// ウィンドウリサイズ対応
window.addEventListener('resize', function() {
const width = 360; // 固定サイズ
const height = 200; // 固定サイズ
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
</script>
</head>
<body>
<div id="animation-arrow" class="animation-container">
</div>
</body>
</html>
renderer.setSize(360, 200);で、サイズを固定しています。
arrow.scale.set(4, 1.8, 3);の値を変更すると、矢印の大きさを変更することができます。
また、スマホなどで見た時の対応（ウィンドウリサイズ）として、 const width = 360;、const height = 200;で、固定サイズを設定しています。
Discussion