Three.js
Three.js は、WebGL を使用して 3D グラフィックスを描画するための JavaScript ライブラリです。
Web ページに 3D コンテンツを追加するための高レベルの API を提供し、開発者が直接 WebGL を使用するのと比べて、はるかに簡単に 3D シーンを構築できるようにします。
*スマホ版は、スクロールして見ることができます。
コード
<div id="threejs-container" style="width: 400px; height: 400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// シーンを作成
var scene = new THREE.Scene();
// カメラを作成
var camera = new THREE.PerspectiveCamera(75, 400 / 400, 0.1, 1000);
camera.position.z = 5;
// レンダラーを作成
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(400, 400);
document.getElementById('threejs-container').appendChild(renderer.domElement);
// トーラスのジオメトリを作成
var geometry = new THREE.TorusGeometry(2, 0.5, 16, 100);
// マテリアルを作成
var material = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
// トーラスを作成してシーンに追加
var torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// アニメーション関数を定義
function animate() {
requestAnimationFrame(animate);
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
Chat GPT4で変わるプログラミング学習
[初心者の Three.js ] Chat GPT４と一緒に美しい空間の世界へ
私たちの学習や情報収集の方法は、時代とともに大きく変わってきました。
書物から始まり
インターネットの登場により検索エンジンを介した情報獲得が主流となりました。
そして現在、AIの時代を迎え、知識の獲得やスキルの習得方法もまた、新しいステージに進んでいます。
学習方法の比較
過去の学習方法
過去の学習方法は、時間をかけて段階的に知識やスキルを積み上げるものでした。このアプローチは、時間軸に沿った直線的なプロセスとして、長期間の学習と実践が不可欠でした。
現代の学習方法
現代においては、AIとの直接的な対話を通じて、実際に何かを制作する過程でその構造や知識を習得する方法が浸透してきました。伝統的な方法とは全く異なるアプローチであり、迅速かつ効率的な学びを可能にしています。
AIと対話：「構造」の情報交換
おそらく、その程度の知識だけでAIとともに独学してさまざまなプログラミング言語やライブラリを使いこなすことができるでしょう。
その証拠に、私がまさにそういう人間の一人なのです。
大学で「HTML」を学ぶ機会がありました。
その半年間の講義の知識だけをもとに、AIと一緒に独学で
開発環境を整え、短期間でJavaScript、Three.jsやjQueryなどを使って様々なウイジェットやWEB記事を作っています。Pythonも独学で学び、簡単なニューラルネットワークを構築しています。 
Three.jsの美しい世界
・[初心者の Three.js ] Chat GPT４と一緒に美しい空間の世界へ