htmlの部分はとてもシンプルです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demoThree</title>
</head>
<body>
<canvas id="demo-three"></canvas>
</body>
<script type="text/javascript" src="./three.js"></script>
<script type="text/javascript" src="./demo_three.js"></script>
</html>
以下はjsセクションで、各コード行にはコメントの詳細な説明があります。
// 幅と高さを定義する
const width = 400;
const height = 400;
const canvas = document.getElementById('demo-three');
// WebGLRendererあなたがパラメータを渡さない場合は、関連するキャンバスが表示されるようにするために、domElementを配置する必要があり、その場合に関連付けられたhtmlのdom要素に画面のうち、最終的なレンダリングではないだろう、ボディに追加する
let renderer = new THREE.WebGLRenderer({
canvas
});
// シーンを描画し、シーンにレンダリングされたオブジェクトをシーンに保持する。
let scene = new THREE.Scene();
// 直交カメラを使用して、直交カメラは、上下左右前後の座標を定義する必要があるので、直交カメラは、関連する平面空間、オブジェクトの状況をインターセプトすることができます指定する
let camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, -)
// 黒背景、透明度1.0
renderer.setClearColor(new THREE.Color(0x), 1.0);
// renderer
renderer.setSize();
// つの.js公式サイトを閲覧することができるが、あらかじめ定義されたジオメトリはたくさんあるが、三角形はなく、shapeGeometryで描画することができる。
let triangleShape = new THREE.Shape();
// 描画開始点をこの位置に移動する
triangleShape.moveTo(0, 100);
// 下線を引く
triangleShape.lineTo(-100, -100);
triangleShape.lineTo(100, -100);
triangleShape.lineTo(0, 100);
// ジオメトリを定義する
const geometry = new THREE.ShapeGeometry(triangleShape);
// マテリアルを定義する。三角形は基本的な形であり、光を当てる必要はない。
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
// デフォルトは片側で、DoubleSideとして定義すると、表と裏の両方がレンダリングされる。
side: THREE.DoubleSide
});
// 最初のパラメータgeometryは、状況の座標のジオメトリを定義するもので、webGlの頂点シェーダの入力頂点シーケンスに非常によく似ている。
// つ目のパラメータであるマテリアルは、webGlのフラグメント・シェーダーとよく似ていて、頂点の列に色をつける。
let mesh = new THREE.Mesh(geometry, material);
// シーン内のメッシュの位置を設定する。
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 1;
scene.add(mesh);
// カメラは負のZ軸に沿って覗き込むので、原点に設定されている。
// 頂点シェーダーに渡されるデータを修正するネイティブのwebGlよりも、positionで直接位置を設定する方がずっと簡単だ。
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;
// cameraの位置から見て
camera.lookAt(new THREE.Vector3(0, 0, 1));
let currentAngle = 0;
let lastTimestamp = Date.now();
function animate() {
// requestAnimationFrameの間隔が毎回不明なので、時間をメモして、現在のタイムスタンプを取得する
const now = Date.now();
// 古いタイムスタンプを差し引く
const duration = now - lastTimestamp;
lastTimestamp = now;
// requestAnimationFrameを180度回転させる。
currentAngle = currentAngle + duration / 1000 * Math.PI;
}
function render() {
animate();
// meshcurrentAngleをy軸周りに回転させる。
mesh.rotation.set(0, currentAngle, 0);
//
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
効果
