今回はThree.jsで3Dの矢印を作ってみました。

３Ｄの矢印を作成します。javascript、CSS、HTMLを使います。

HTML＆JavaScript＆CSS

これを矢印を描画したい箇所に記載します。

<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;で、固定サイズを設定しています。

それではまた！