3D基本セット全部入り
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
<script>
// グローバル設定
//fov：視野角。デフォルト値は 50。
//aspect：カメラのアスペクト比（画面の横幅と縦幅の比）。デフォルト値は 1。
//near：描画する最小距離。デフォルト値は 0.1。
//far：描画する最大距離。デフォルト値は 2000。
const CAMERA_POSITION = { x: 0, y: 0, z: 5 };
const CAMERA_LOOKAT = { x: 0, y: 0, z: 0 };
const CAMERA_FOV = 45;
const CAMERA_ASPECT_RATIO = window.innerWidth / window.innerHeight;
const CAMERA_NEAR = 0.1;
const CAMERA_FAR = 1000;
const BG_COLOR = 0xffffff;
function init() {
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(
CAMERA_FOV, CAMERA_ASPECT_RATIO, CAMERA_NEAR, CAMERA_FAR);
camera.position.set(CAMERA_POSITION.x, CAMERA_POSITION.y, CAMERA_POSITION.z);
camera.lookAt(CAMERA_LOOKAT.x, CAMERA_LOOKAT.y, CAMERA_LOOKAT.z);
//camera.position：カメラの位置を指定するためのVector3オブジェクト
//camera.rotation：カメラの回転を指定するためのEuler角またはQuaternionオブジェクト
//camera.up：カメラの上方向を指定するためのVector3オブジェクト
//camera.fov：カメラの視野角（field of view）
//camera.aspect：カメラのアスペクト比
//camera.near：カメラの手前のクリップ面
//camera.far：カメラの奥のクリップ面
// レンダラーを作成します
const renderer = new THREE.WebGLRenderer({
// キャンバスの透過を有効にする
alpha: true,
// デバイスピクセル比の調整を行う
pixelRatio: window.devicePixelRatio,
// ステンシルバッファを有効にする
stencil: false,
// アンチエイリアシングを有効にする
antialias: true,
// カラースペースを設定する
// 'auto': ブラウザが自動で選択
// 'sRGB': sRGBカラースペース
// 'linear': リニアカラースペース
// その他に 'RGB' も指定可能
// 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/renderers/WebGLRenderer.outputEncoding
outputEncoding: THREE.sRGBEncoding,
// フレームバッファオブジェクトを自動的にクリアする
autoClear: true,
// canvas 要素が WebGL コンテキストを失ったときにレンダラーを自動的に消去する
autoDispose: true,
// 頂点データをダイナミックに更新するかどうか
// true にすると、頂点バッファオブジェクトを更新する際に、毎回 GPU にデータを転送する
// false にすると、GPU にデータを一度転送した後、更新する際にはメモリ上でデータを保持する
// ダイナミックな更新を頻繁に行う場合は true にするとパフォーマンスが向上する
// 一方、頂点データの更新頻度が低い場合は false にするとメモリの節約になる
// 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/core/BufferAttribute.dynamic
attributes: {
dynamic: true,
},
// インスタンス描画をサポートするかどうか
// 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/core/InstancedBufferGeometry
instancing: true,
// WebGL のドライバがサポートするかどうかにかかわらず、3D テクスチャを有効にする
// 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/loaders/TextureLoader
texture3D: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(BG_COLOR);
document.body.appendChild(renderer.domElement);
//renderer.gammaFactor: 色の補正係数（既定値は2.0）
//renderer.gammaOutput: 色空間のガンマ値（既定値はtrue）
//renderer.gammaInput: 入力のガンマ値（既定値はtrue）
//renderer.renderer.physicallyCorrectLights: 物理ベースのレンダリングを行うかどうかを指定する（既定値はfalse）
//renderer.shadowMap: シャドウマップの設定を管理するオブジェクト
//renderer.toneMapping: トーンマッピングのアルゴリズムを指定する（既定値はThree.LinearToneMapping）
//renderer.toneMappingExposure: トーンマッピングの露光値を指定する（既定値は1.0）
//renderer.toneMappingWhitePoint: トーンマッピングの白色点を指定する（既定値は1.0）
// ライトを作成
//AmbientLight（環境光）
//シーン全体に均等に光を当てます。色を指定する引数の他、明るさを指定する引数があります
const ambientLight = new THREE.AmbientLight(color, intensity);
scene.add(ambientLight);
//DirectionalLight（平行光源）
//平行に光を当てる光源です。位置を指定する必要がなく、方向と色を指定する引数があります。影を作る場合は shadow プロパティを true に設定し、影の解像度や範囲を調整する必要があります。
const directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z); // 光の向きを指定することもできる
directionalLight.castShadow = true; // 影を有効にする
directionalLight.shadow.mapSize.width = 1024; // 影の解像度（横幅）
directionalLight.shadow.mapSize.height = 1024; // 影の解像度（縦幅）
directionalLight.shadow.camera.near = 0.1; // 影を発生させる最小距離
directionalLight.shadow.camera.far = 500; // 影を発生させる最大距離
directionalLight.shadow.bias = -0.005; // シャドウマッピングのバイアス
scene.add(directionalLight);
//PointLight（点光源）
//点から放射状に光を当てる光源です。位置を指定する必要があります。色と明るさを指定する引数があります。影を作る場合は shadow プロパティを true に設定し、影の解像度や範囲を調整する必要があります。
const pointLight = new THREE.PointLight(color, intensity, distance, decay);
pointLight.position.set(x, y, z);
pointLight.castShadow = true; // 影を有効にする
pointLight.shadow.mapSize.width = 1024; // 影の解像度（横幅）
light.shadow.mapSize.height = 1024; // 影の解像度（縦幅）
pointLight.shadow.camera.near = 0.1; // 影を発生させる最小距離
pointLight.shadow.camera.far = 500; // 影を発生させる最大距離
pointLight.shadow.bias = -0.005; // シャドウマッピングのバイアス
scene.add(pointLight);
//SpotLight（スポットライト）
//ある方向から照射される円錐形の光源です。位置と方向を指定する必要があります。色と明るさを指定する引数があります。角度や範囲を指定する引数があります。影を作る場合は shadow プロパティを true に設定し、影の解像度や範囲、影の強さなどを調整する必要があります。
const light = new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay);
light.position.set(x, y, z);
light.target.position.set(targetX, targetY, targetZ);
light.castShadow = true; // 影を有効にする
light.shadow.mapSize.width = 1024; // 影の解像度（横幅）
light.shadow.mapSize.height = 1024; // 影の解像度（縦幅）
light.shadow.camera.near = 0.1; // 影を発生させる最小距離
light.shadow.camera.far = 500; // 影を発生させる最大距離
light.shadow.bias = -0.005; // シャドウマッピングのバイアス
// オブジェクトを作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// アニメーション
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
init();
</script>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？