### Install and Build Project

Source: https://github.com/pixiv/three-vrm/blob/dev/CONTRIBUTING.md

Commands to install dependencies, build the project, and start the development server for the three-vrm package.

```sh
pnpm install
pnpm build
cd packages/three-vrm
pnpm dev
```

--------------------------------

### WebGPU Setup and Scene Initialization

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html

Initializes the WebGPU renderer, camera, scene, and lighting. Includes setup for orbit controls and a plane mesh for shadow reception.

```javascript
import * as THREE from 'three/webgpu';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';

// renderer
const renderer = new THREE.WebGPURenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 10.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.castShadow = true;
scene.add( light );

// a plane to receive shadows
const planeGeometry = new THREE.PlaneGeometry( 10, 10 );
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x808080 } );
const planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.receiveShadow = true;
planeMesh.position.z = - 0.5;
scene.add( planeMesh );
```

--------------------------------

### Importing Libraries for three-vrm Example

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/humanoidAnimation/index.html

These imports are necessary to run the three-vrm example, including three.js, its addons, and the fflate library for potential compression handling.

```javascript
{
  "imports": {
    "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
    "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
    "@pixiv/three-vrm": "../../lib/three-vrm.module.js"
  }
}
```

--------------------------------

### Renderer, Camera, and Controls Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/aim.html

Initializes the WebGL renderer, perspective camera, and OrbitControls for scene interaction.

```javascript
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 10.0 );

const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();
```

--------------------------------

### Helper and Constraint Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/aim.html

Adds GridHelper and AxesHelper to the scene, and initializes VRMNodeConstraintManager and VRMAimConstraint.

```javascript
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

const constraintManager = new VRMNodeConstraintManager( {
  autoRemoveCircularDependency: true
} );
const constraint = new VRMAimConstraint( aim, lowerArm );
constraint.aimAxis = 'PositiveY';
constraintManager.addConstraint( constraint );

Array.from( constraintManager.constraints ).forEach( ( constraint ) => {
  const helper = new VRMNodeConstraintHelper( constraint );
  scene.add( helper );
} );
```

--------------------------------

### Import necessary modules for three-vrm-animation example

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-animation/examples/dnd.html

Imports core three.js modules, loaders, controls, GUI, and specific plugins/utilities from three-vrm and three-vrm-animation. This setup is required for the example to function.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import GUI from 'three/addons/libs/lil-gui.module.min.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import { createVRMAnimationClip, VRMAnimationLoaderPlugin, VRMLookAtQuaternionProxy } from '@pixiv/three-vrm-animation';
```

--------------------------------

### Basic Three.js and three-vrm Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/basic.html

Initializes the renderer, camera, controls, scene, and light. This forms the foundation for displaying 3D content.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );
```

--------------------------------

### Setup and Initialization

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/rotation.html

Initializes the Three.js renderer, camera, controls, scene, lights, and meshes. It also sets up the Tweakpane GUI for interactive control.

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import 'tweakpane';
import 'tweakpane-plugin-rotation';
import { VRMNodeConstraintManager, VRMRotationConstraint, VRMNodeConstraintHelper } from '@pixiv/three-vrm-node-constraint';

/* global Tweakpane, TweakpaneRotationInputPlugin */

// gui
const guiParams = {
  source: { x: 0.0, y: 0.0, z: 0.0 },
  weight: 0.5,
};

const pane = new Tweakpane.Pane();
pane.registerPlugin( TweakpaneRotationInputPlugin );
pane.addInput( guiParams, 'source', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
pane.addInput( guiParams, 'weight', {
  min: 0.0,
  max: 1.0,
} );

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 10.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 2.0, 3.0 ).normalize();
scene.add( light );

// objects
const geometry = new THREE.ConeGeometry( 0.25, 0.5, 5 );
const material = new THREE.MeshStandardMaterial( { color: 0xbbbbbb } );

const source = new THREE.Mesh( geometry, material );
source.name = 'source';
source.quaternion.set( 0.022, 0.440, 0.360, 0.822 );
scene.add( source );

const destination = new THREE.Mesh( geometry, material );
destination.position.y = 2.0;
destination.name = 'destination';
scene.add( destination );

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
```

--------------------------------

### Tweakpane GUI Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/aim.html

Sets up a Tweakpane GUI to control the rotation of the upper and lower arms, and the weight of the aim constraint.

```javascript
const guiParams = {
  upperArm: { x: 0.0, y: 0.0, z: 0.0 },
  lowerArm: { x: 0.0, y: 0.0, z: 0.0 },
  weight: 1.0,
};

const pane = new Tweakpane.Pane();
pane.registerPlugin( TweakpaneRotationInputPlugin );
pane.addInput( guiParams, 'upperArm', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
pane.addInput( guiParams, 'lowerArm', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
pane.addInput( guiParams, 'weight', {
  min: 0.0,
  max: 1.0,
} );
```

--------------------------------

### Setup Scene and Lighting

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html

Initializes the three.js scene and adds a directional light. The light's position will be animated later.

```javascript
// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
scene.add( light );
```

--------------------------------

### Setup and Load VRM/VRMA with Plugins

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-animation/examples/loader-plugin.html

Initializes the Three.js environment and sets up GLTFLoader with VRMLoaderPlugin and VRMAnimationLoaderPlugin. This snippet is essential for loading VRM and VRMA assets.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import { createVRMAnimationClip, VRMAnimationLoaderPlugin, VRMLookAtQuaternionProxy } from '@pixiv/three-vrm-animation';

( async () => {
  // renderer
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setPixelRatio( window.devicePixelRatio );
  document.body.appendChild( renderer.domElement );

  // camera
  const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
  camera.position.set( 0.0, 1.0, 5.0 );

  // camera controls
  const controls = new OrbitControls( camera, renderer.domElement );
  controls.screenSpacePanning = true;
  controls.target.set( 0.0, 1.0, 0.0 );
  controls.update();

  // scene
  const scene = new THREE.Scene();

  // light
  const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
  light.position.set( 1.0, 1.0, 1.0 ).normalize();
  scene.add( light );

  // gltf loader (which can be used to load both VRM and VRMA!)
  const loader = new GLTFLoader();
  loader.crossOrigin = 'anonymous';
  loader.register( ( parser ) => {
    return new VRMLoaderPlugin( parser );
  } );
  loader.register( ( parser ) => {
    return new VRMAnimationLoaderPlugin( parser );
  } );

  // load VRM
  const gltfVrm = await loader.loadAsync( './models/VRM1_Constraint_Twist_Sample.vrm' );
  const vrm = gltfVrm.userData.vrm;

  // calling these functions greatly improves the performance
  VRMUtils.removeUnnecessaryVertices( vrm.scene );
  VRMUtils.removeUnnecessaryJoints( vrm.scene );

  // Disable frustum culling
  vrm.scene.traverse( ( obj ) => {
    obj.frustumCulled = false;
  } );

  // Add look at quaternion proxy to the VRM; which is needed to play the look at animation
  const lookAtQuatProxy = new VRMLookAtQuaternionProxy( vrm.lookAt );
  lookAtQuatProxy.name = 'lookAtQuaternionProxy';
  vrm.scene.add( lookAtQuatProxy );

  // Add VRM to the scene
  console.log( vrm );
  scene.add( vrm.scene );

  // load VRMA
  const gltfVrma = await loader.loadAsync( './models/test.vrma' );
  const vrmAnimation = gltfVrma.userData.vrmAnimations[ 0 ];

  // create animation clip
  const clip = createVRMAnimationClip( vrmAnimation, vrm );

  // play animation
  const mixer = new THREE.AnimationMixer( vrm.scene );
  mixer.clipAction( clip ).play();

  // helpers
  const gridHelper = new THREE.GridHelper( 10, 10 );
  scene.add( gridHelper );

  const axesHelper = new THREE.AxesHelper( 5 );
  scene.add( axesHelper );

  // animate
  const clock = new THREE.Clock();
  clock.start();

  function animate() {
    requestAnimationFrame( animate );

    const deltaTime = clock.getDelta();
    mixer.update( deltaTime );
    vrm.update( deltaTime );

    renderer.render( scene, camera );
  }

  animate();
} )();
```

--------------------------------

### Tweakpane Setup for Rotation Control

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/upper-arm.html

Initializes Tweakpane and registers the rotation plugin to allow interactive control of upper and lower arm rotations in degrees.

```javascript
const guiParams = {
  upperArm: { x: 0.0, y: 0.0, z: 0.0 },
  lowerArm: { x: 0.0, y: 0.0, z: 0.0 },
};

const pane = new Tweakpane.Pane();
pane.registerPlugin( TweakpaneRotationInputPlugin );

pane.addInput( guiParams, 'upperArm', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
pane.addInput( guiParams, 'lowerArm', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
```

--------------------------------

### Import Paths for three-vrm Example

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-core/examples/humanoidAnimation/index.html

Specifies the CDN and local paths for importing libraries like fflate, three.js, and three-vrm-core. These are essential for setting up the 3D environment and loading assets.

```javascript
{
  "imports": {
    "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
    "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
    "@pixiv/three-vrm-core": "../../lib/three-vrm-core.module.js"
  }
}
```

--------------------------------

### Install three-vrm via npm

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/README.md

Install the necessary packages for using three-vrm in your project. This command installs both Three.js and the @pixiv/three-vrm package.

```sh
npm install three @pixiv/three-vrm
```

--------------------------------

### Setup and Loading MToon Model

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-materials-mtoon/examples/emissive-strength.html

Initializes the Three.js renderer, camera, controls, and scene. It then sets up the GLTFLoader with the MToonMaterialLoaderPlugin and loads a glTF model that utilizes emissive strength.

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { MToonMaterialLoaderPlugin } from '@pixiv/three-vrm-materials-mtoon';

/* global THREE_VRM_MATERIALS_MTOON */

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 10.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
scene.add( light );

// gltf and vrm
let currentGltf = null;
const loader = new GLTFLoader();
loader.register( ( parser ) => {
	const plugin = new MToonMaterialLoaderPlugin( parser );
	return plugin;
} );

function load( url ) {
	loader.crossOrigin = 'anonymous';
	loader.load(
		url,
		( gltf ) => {
			scene.add( gltf.scene );
			console.log( gltf );
			currentGltf = gltf;
		},
		( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
		( error ) => console.error( error )
	);
}

load( './models/khr-materials-emissive-strength-test.gltf' );

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
```

--------------------------------

### Setup Three.js Scene and Components

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-springbone/examples/inside-collider.html

Initializes the Three.js renderer, camera, orbit controls, scene, and lighting. Also sets up basic scene helpers like a grid and axes.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {
  VRMSpringBoneColliderShapeCapsule,
  VRMSpringBoneColliderShapePlane,
  VRMSpringBoneColliderShapeSphere,
  VRMSpringBoneCollider,
  VRMSpringBoneColliderHelper,
  VRMSpringBoneManager,
  VRMSpringBoneJoint,
  VRMSpringBoneJointHelper
} from '@pixiv/three-vrm-springbone';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 2.0, 3.0 ).normalize();
scene.add( light );

// objects
const geometry = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
const material = new THREE.MeshStandardMaterial( { color: 0xbbbbbb } );
const cubeA = new THREE.Mesh( geometry, material );
cubeA.name = 'cubeA';
cubeA.position.set( 0.0, 0.5, 0.0 );
scene.add( cubeA );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.name = 'cubeB';
cubeB.position.set( 0.0, - 0.5, 0.0 );
cubeA.add( cubeB );

const cubeC = new THREE.Mesh( geometry, material );
cubeC.name = 'cubeC';
cubeC.position.set( 0.0, - 0.5, 0.0 );
cubeB.add( cubeC );

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
```

--------------------------------

### Scene and Light Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/importer.html

Creates a new Three.js scene and adds a directional light to illuminate the scene.

```javascript
const scene = new THREE.Scene();

const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 2.0, 3.0 ).normalize();
scene.add( light );
```

--------------------------------

### Setup Three.js Scene and Load VRM

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-core/examples/meta.html

Initializes the Three.js renderer, camera, scene, and lights. It then configures the GLTFLoader with the VRMCoreLoaderPlugin to enable thumbnail loading and proceeds to load a VRM model.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMCoreLoaderPlugin } from '@pixiv/three-vrm-core';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );

// gltf and vrm
let currentGltf = undefined;
const loader = new GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.register( ( parser ) => {
  // enable thumbnail loading
  const plugin = new VRMCoreLoaderPlugin( parser );
  plugin.metaPlugin.needThumbnailImage = true;
  return plugin;
} );
loader.load(
  // URL of the VRM you want to load
  './models/cube.gltf',
  // called when the resource is loaded
  ( gltf ) => {
    // put the model to the scene
    scene.add( gltf.scene );
    console.log( gltf );
    currentGltf = gltf;

    // print meta fields
    const meta = gltf.userData.vrmCore.meta;
    Object.keys( meta ).forEach( ( key ) => {
      document.getElementById( 'meta' ).innerText += key + ' : ' + meta[ key ] + '\n';
    } );

    // show thumbnail
    document.getElementById( 'thumbnail' ).src = meta.thumbnailImage.src;
  },
  // called while loading is progressing
  ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
  // called when loading has errors
  ( error ) => console.error( error )
);

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}

animate();

```

--------------------------------

### Basic Three.js Scene Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/lookat-advanced.html

Initializes the WebGL renderer, perspective camera, and orbit controls for a standard 3D scene. Ensures the renderer and camera are configured for the window dimensions.

```javascript
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

const scene = new THREE.Scene();

const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );
```

--------------------------------

### Basic Setup and Scene Initialization

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-materials-mtoon/examples/feature-test.html

Initializes the Three.js renderer, camera, scene, and lighting. Sets up orbit controls for camera manipulation. This forms the foundation for rendering 3D objects.

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MToonMaterial } from '@pixiv/three-vrm-materials-mtoon';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 10.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.castShadow = true;
scene.add( light );

// a plane to receive shadows
const planeGeometry = new THREE.PlaneGeometry( 10, 10 );
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x808080 } );
const planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.receiveShadow = true;
planeMesh.position.z = - 0.5;
scene.add( planeMesh );
```

--------------------------------

### Setup Three.js Scene and Load VRM Model

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/expressions.html

Initializes the WebGL renderer, perspective camera, orbit controls, and the scene. It then loads a VRM model using GLTFLoader and applies VRM-specific utilities for performance optimization.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );

// gltf and vrm
let currentVrm = undefined;
const loader = new GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.register( ( parser ) => {
  return new VRMLoaderPlugin( parser );
} );
loader.load( './models/VRM1_Constraint_Twist_Sample.vrm', ( gltf ) => {
  const vrm = gltf.userData.vrm;
  // calling these functions greatly improves the performance
  VRMUtils.removeUnnecessaryVertices( gltf.scene );
  VRMUtils.combineSkeletons( gltf.scene );
  VRMUtils.combineMorphs( vrm );
  // Disable frustum culling
  vrm.scene.traverse( ( obj ) => {
    obj.frustumCulled = false;
  } );
  scene.add( vrm.scene );
  currentVrm = vrm;
  console.log( vrm );
}, ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ), ( error ) => console.error( error ) );

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
```

--------------------------------

### Three.js Scene Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/upper-arm.html

Configures the WebGL renderer, perspective camera, and OrbitControls for scene navigation. Adds a directional light to illuminate the scene.

```javascript
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 10.0 );

const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

const scene = new THREE.Scene();

const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 2.0, 3.0 ).normalize();
scene.add( light );
```

--------------------------------

### Constraint Setup and Animation Loop

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/rotation.html

Configures the VRMRotationConstraint and its manager, then enters an animation loop to update the scene and constraints based on user input.

```javascript
// constraints
const constraintManager = new VRMNodeConstraintManager( {
  autoRemoveCircularDependency: true
} );
const constraint = new VRMRotationConstraint( destination, source );
constraintManager.addConstraint( constraint );

// constraint helpers
Array.from( constraintManager.constraints ).forEach( ( constraint ) => {
  const helper = new VRMNodeConstraintHelper( constraint );
  scene.add( helper );
} );

// init constraints
scene.updateMatrixWorld();
constraintManager.setInitState();

// animate
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame( animate );

  source.rotation.set( THREE.MathUtils.DEG2RAD * guiParams.source.x, THREE.MathUtils.DEG2RAD * guiParams.source.y, THREE.MathUtils.DEG2RAD * guiParams.source.z, 'ZYX' );
  constraint.weight = guiParams.weight;
  constraintManager.update();

  renderer.render( scene, camera );
}

animate();
```

--------------------------------

### Setup VRMSpringBoneManager and Spring Bone

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-springbone/examples/inside-collider.html

Initializes the VRMSpringBoneManager and a VRMSpringBoneJoint connecting cubeB to cubeC. The spring bone is configured to interact with the defined colliders.

```javascript
const springBoneManager = new VRMSpringBoneManager();
const springBone = new VRMSpringBoneJoint( cubeB, cubeC, { hitRadius: 0.2 } );
springBone.colliderGroups = [ { colliders } ];
springBoneManager.addSpringBone( springBone );

// helpers
springBoneManager.springBones.forEach( ( bone ) => {
  const helper = new VRMSpringBoneJointHelper( bone );
  scene.add( helper );
} );

// init spring bones
springBoneManager.setInitState();
```

--------------------------------

### Three.js Scene Setup with Spring Bones

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-springbone/examples/single.html

Initializes a Three.js scene, camera, renderer, lighting, and a hierarchy of cubes. It then sets up VRMSpringBoneManager and VRMSpringBoneJoint to apply spring bone physics. Includes helpers for visualization.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 2.0, 3.0 ).normalize();
scene.add( light );

// objects
const geometry = new THREE.BoxGeometry( 0.25, 0.25, 0.25 );
const material = new THREE.MeshStandardMaterial( { color: 0xbbbbbb } );
const cubeA = new THREE.Mesh( geometry, material );
cubeA.name = 'cubeA';
cubeA.position.set( 0.0, 0.5, 0.0 );
scene.add( cubeA );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.name = 'cubeB';
cubeB.position.set( 0.0, - 0.5, 0.0 );
cubeA.add( cubeB );

const cubeC = new THREE.Mesh( geometry, material );
cubeC.name = 'cubeC';
cubeC.position.set( 0.0, - 0.5, 0.0 );
cubeB.add( cubeC );

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// spring bones
const springBoneManager = new VRMSpringBoneManager();
const springBone = new VRMSpringBoneJoint( cubeB, cubeC, { hitRadius: 0.01 } );
springBoneManager.addSpringBone( springBone );

// helper
const springBoneHelper = new VRMSpringBoneJointHelper( springBone );
scene.add( springBoneHelper );

// init spring bones
springBoneManager.setInitState();

// animate
const clock = new THREE.Clock();
let shouldReset = true;

function animate() {
  requestAnimationFrame( animate );
  const deltaTime = clock.getDelta();
  cubeA.position.x = Math.sin( Math.PI * clock.elapsedTime );

  if ( shouldReset ) {
    shouldReset = false;
    springBoneManager.reset();
  }

  springBoneManager.update( deltaTime );
  renderer.render( scene, camera );
}

animate();
```

--------------------------------

### Tweakpane Setup for Rotation Control

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-node-constraint/examples/importer.html

Initializes Tweakpane and registers the rotation plugin to control the source object's rotation using Euler angles in degrees.

```javascript
const guiParams = {
  source: { x: 0.0, y: 0.0, z: 0.0 },
};
const pane = new Tweakpane.Pane();
pane.registerPlugin( TweakpaneRotationInputPlugin );
pane.addInput( guiParams, 'source', {
  view: 'rotation',
  rotationMode: 'euler',
  unit: 'deg',
} );
```

--------------------------------

### Three.js and VRM Setup

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/firstperson.html

Initializes the Three.js renderer, camera, scene, and lighting. It also sets up OrbitControls for camera manipulation and loads a VRM model using GLTFLoader with the VRMLoaderPlugin.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );

// gltf and vrm
let currentVrm = undefined;
const loader = new GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.register( ( parser ) => {
  return new VRMLoaderPlugin( parser );
} );
loader.load(
  './models/VRM1_Constraint_Twist_Sample.vrm',
  ( gltf ) => {
    const vrm = gltf.userData.vrm;
    // calling these functions greatly improves the performance
    VRMUtils.removeUnnecessaryVertices( gltf.scene );
    VRMUtils.combineSkeletons( gltf.scene );
    VRMUtils.combineMorphs( vrm );

    // Disable frustum culling
    vrm.scene.traverse( ( obj ) => {
      obj.frustumCulled = false;
    } );
    scene.add( vrm.scene );
    currentVrm = vrm;

    // generate firstperson mesh
    vrm.firstPerson.setup();

    // set to first person layer mode
    toggleLayer( true );
    console.log( vrm );
  },
  ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
  ( error ) => console.error( error )
);

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// animate
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}

animate();
```

--------------------------------

### Setup Three.js Scene and Loaders

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm-materials-mtoon/examples/loader-plugin.html

Initializes the Three.js renderer, camera, scene, and OrbitControls. Configures GLTFLoader to use the MToonMaterialLoaderPlugin for handling MToon materials.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MToonMaterialLoaderPlugin } from '@pixiv/three-vrm-materials-mtoon';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 10.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 0.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
scene.add( light );

// gltf and vrm
let currentGltf = null;
const loader = new GLTFLoader();
loader.register( ( parser ) => {
  const plugin = new MToonMaterialLoaderPlugin( parser );
  return plugin;
} );
```

--------------------------------

### Three.js Scene Setup and VRM Loading

Source: https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/bones.html

Initializes the Three.js renderer, camera, controls, and scene. It then loads a VRM model using GLTFLoader with the VRMLoaderPlugin and applies performance optimizations.

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );

// camera controls
const controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.DirectionalLight( 0xffffff, Math.PI );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );

// gltf and vrm
let currentVrm = undefined;
const loader = new GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.register( ( parser ) => {
  return new VRMLoaderPlugin( parser );
} );
loader.load(
  './models/VRM1_Constraint_Twist_Sample.vrm',
  ( gltf ) => {
    const vrm = gltf.userData.vrm;
    // calling these functions greatly improves the performance
    VRMUtils.removeUnnecessaryVertices( gltf.scene );
    VRMUtils.combineSkeletons( gltf.scene );
    VRMUtils.combineMorphs( vrm );

    // Disable frustum culling
    vrm.scene.traverse( ( obj ) => {
      obj.frustumCulled = false;
    } );

    scene.add( vrm.scene );
    currentVrm = vrm;
    console.log( vrm );
  },
  ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
  ( error ) => console.error( error )
);

// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
```