Three.jsこと始め

npm install three

import * as THREE from 'three';
const scene = new THREE.Scene();

//または
import { Scene } from 'three';
const scene = new Scene();

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.121.1/build/three.module.js"
    }
  }
</script>
<script type="module">
  import * as THREE from 'three';
  const scene = new THREE.Scene();

</script>

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.121.1/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.121.1/examples/jsm/"
    }
  }
</script>

<script type="module">
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls( camera, renderer.domElement );

if ( WebGL.isWebGLAvailable() ) {

	// 

} else {
	alert("WebGLにブラウザーまたはマシンが対応していない可能性があります。");
  return;
}

//シーン
const scene = new THREE.Scene();
//レンダラー
/*antialias：輪郭がギザギザになることを抑える処理
有効にすると計算量が増え動作が重くなる場合があります*/
const renderer = new THREE.WebGLRenderer({antialias: true});
document.body.appendChild( renderer.domElement ); //ページに追加する
/* HTMLに配置したcanvas要素を指定する場合
const renderer = new THREE.WebGLRenderer({
 canvas: document.querySelector('#myCanvas')
});
*/
/*デバイスのピクセル比を設定
renderer.setPixelRatio(window.devicePixelRatio);
デバイスのピクセル比を考慮してキャンバスのサイズを変更
renderer.setSize( window.innerWidth, window.innerHeight );
*/
//カメラ
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 5;

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshNormalMaterial();
// new THREE.Mesh(ジオメトリ,マテリアル)
const cube = new THREE.Mesh( geometry, material );
// シーンに追加
scene.add( cube );

function animate() {
	requestAnimationFrame( animate );
	cube.rotation.x += 0.01;  //cube.rotateX(0.01)でもいい
	cube.rotation.y += 0.01;  //cube.rotateY(0.01)でもいい
//レンダラーのrender関数にシーンとカメラに渡し、シーンをレンダリング
	renderer.render( scene, camera );
	};
animate();

/*またはrenderer.setAnimationLoop(callback)
requestAnimationFrameの代わりに使用できる
nullが渡されるとアニメーションが停止 
renderer.setAnimationLoop(animate)
function animate() {
//XとY回転
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
*/

init();
window.addEventListener('resize', init);
function init() {
  //サイズを取得
  const width = window.innerWidth;
  const height = window.innerHeight;
  //レンダラーの調整
  resizeRendererToDisplaySize(renderer);
  // カメラのアスペクト比
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}
function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const pixelRatio = window.devicePixelRatio;
  const width = (canvas.clientWidth * pixelRatio) | 0;
  const height = (canvas.clientHeight * pixelRatio) | 0;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

const geometry = createStarGeometry();
function createStarGeometry(innerRadius = 0.4, outerRadius = 0.8, points = 5) {
  const shape = new THREE.Shape();
  const PI2 = Math.PI * 2;
  const inc = PI2 / (points * 2);
  shape.moveTo(outerRadius, 0);
  let inner = true;
  for (let i = inc; i < PI2; i += inc) {
    const radius = inner ? innerRadius : outerRadius;
    shape.lineTo(Math.cos(i) * radius, Math.sin(i) * radius);
    inner = !inner;
  }
  const extrudeSettings = {
    steps: 1,
    depth: 1,
    bevelEnabled: false,
  };
  return new THREE.ExtrudeGeometry(shape, extrudeSettings);
}

const deg = 45
const rad = deg * (Math.PI / 180 )

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

const cameraHelper = new THREE.CameraHelper(camera);
scene.add(cameraHelper);

const camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );
/*
camera = new THREE.OrthographicCamera(
 window.innerWidth / -16, 
 window.innerWidth / 16, 
 window.innerHeight / 16, 
 window.innerHeight / -16, 
 -200, 
 500
);
*/

// カメラを作成
const camera = new THREE.PerspectiveCamera(/*省略*/);
// カメラの初期座標を設定
camera.position.set(0, 0, 5);
const controls = new OrbitControls( camera, renderer.domElement );
/*原点から5単位上にターゲットを設定する場合の例
controls.target.set(0, 5, 0);
*/
/*滑らかなカメラコントローラーを制御する場合
controls.enableDamping = true;
controls.dampingFactor = 0.2;
アニメーションループ内でupdate()を呼び出す必要がある
controls.update();
*/

// 引数は線の長さ（デフォルトは 1）
const axes = new THREE.AxisHelper(25);
scene.add(axes);

//sizeグリッドのサイズ/デフォルトは10 
//Divisionsグリッド全体の分割数/デフォルトは10
const gridHelper = new THREE.GridHelper( size, divisions );
scene.add(gridHelper);

const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
scene.add(light);

//ターゲットの設定(座標)
const light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
/*light.position.set(0, 10, 0);
scene.add(light);*/
light.target.position.set(-5, 0, 0);
scene.add(light.target);

//ターゲットの設定(オブジェクト)
const light = new THREE.SpotLight(0xFFFFFF, 1.0);
scene.add(ターゲットオブジェクト);
light.target = ターゲットオブジェクト;

const spotLight = new THREE.SpotLight(0xffffff);
const lightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLight);
scene.add(lightHelper);
// ループ内でヘルパーを更新する場合
lightHelper.update();

//DirectionalLightのヘルパー
//const dLightHelper = new THREE.DirectionalLightHelper(light, 5);

const material = new THREE.MeshBasicMaterial({ color: 0xFF0000});

//または
const material = new THREE.MeshPhongMaterial();
material.color.set(0x00FFFF); 

//その他のプロパティの一例
//flatShading:立方体のときの面がそのまま残るような見た目
material.flatShading=true
//side:面のどちら側をレンダリングするか THREE.BackSideand(裏面) 
material.side = THREE.DoubleSide(両側)

//レンダラーで影を有効にする
renderer.shadowMap.enabled = true;
//ライトの影を有効にする
.castShadow = true;
//影を落としたいMeshオブジェクトを設定
.receiveShadow = true;
//影を受けるMeshオブジェクトを設定
.castShadow = true;

light.shadow.camera.right = 100;
light.shadow.camera.left = -100;
light.shadow.camera.top = -100;
light.shadow.camera.bottom = 100;
//カメラのヘルパーにlight.shadow.cameraを渡す
const helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );

//far（color）からnearにcolorがフェード
scene.fog = new THREE.Fog(color, near, far);
//距離に応じて指数関数的に大きくなる
scene.fog = new THREE.FogExp2(color, density);