### JavaScript: Setup Scene, Add Geometries, and Render

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_vertexcolors.html

Initializes the t3d rendering environment, sets up the scene, creates and adds geometries with vertex colors, configures lighting and camera, and starts the animation loop. Handles window resizing.

```javascript
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

const sphere_geometry = new t3d.SphereGeometry(10, 20, 20);
addVertexColors(sphere_geometry, 1, 0, 0, 0.5);

const phong = new t3d.PhongMaterial();
phong.diffuse.setHex(0xffffff);
phong.vertexColors = t3d.VERTEX_COLOR.RGBA;
phong.transparent = true;

const sphere = new t3d.Mesh(sphere_geometry, phong);
scene.add(sphere);

const plane_geometry = new t3d.PlaneGeometry(100, 100);
addVertexColors(plane_geometry, 1, 1, 0, 1);

const lambert = new t3d.LambertMaterial();
lambert.diffuse.setHex(0xffffff);
lambert.vertexColors = t3d.VERTEX_COLOR.RGBA;

const plane = new t3d.Mesh(plane_geometry, lambert);
plane.position.y = -10;
scene.add(plane);

const ambientLight = new t3d.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(-40, 40, 0);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
directionalLight.shadow.windowSize = 100;
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.position.set(0, 80, 100);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

function loop(count) {
  requestAnimationFrame(loop);
  // rotate camera
  camera.position.x = 100 * Math.sin(count / 1000 * .5);
  camera.position.z = 100 * Math.cos(count / 1000 * .5);
  camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
  forwardRenderer.render(scene, camera);
}
requestAnimationFrame(loop);

function onWindowResize() {
  width = window.innerWidth || 2;
  height = window.innerHeight || 2;
  camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
  forwardRenderer.backRenderTarget.resize(width, height);
}
window.addEventListener('resize', onWindowResize, false);
```

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

### Quick Start: Create a rotating cube with PBR materials

Source: https://github.com/uinosoft/t3d.js/blob/dev/README.md

A comprehensive example demonstrating the initialization of a WebGL2 renderer, scene setup, mesh creation with PBR material, lighting, camera configuration, and an animation loop for a rotating cube.

```javascript
// Initialize renderer with WebGL2
const width = window.innerWidth || 2;
const height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

// Create WebGL2 context and renderer
const gl = canvas.getContext('webgl2', {
  antialias: true,
  alpha: false
});
const renderer = new t3d.WebGLRenderer(gl);
const backRenderTarget = new t3d.RenderTargetBack(canvas);
backRenderTarget.setColorClearValue(0.1, 0.1, 0.1, 1);

// Create scene
const scene = new t3d.Scene();

// Create mesh with PBR material
const geometry = new t3d.BoxGeometry(8, 8, 8);
const material = new t3d.PBRMaterial();
const mesh = new t3d.Mesh(geometry, material);
scene.add(mesh);

// Add lighting
const ambientLight = new t3d.AmbientLight(0xffffff);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff);
directionalLight.position.set(-5, 5, 5);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

// Set up camera
const camera = new t3d.Camera();
camera.position.set(0, 10, 30);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

// Animation loop
function loop(count) {
  requestAnimationFrame(loop);

  // Rotate cube
  mesh.euler.y = count / 1000 * .5;

  scene.updateMatrix();
  scene.updateRenderStates(camera);
  scene.updateRenderQueue(camera);

  renderer.renderScene(scene, camera, backRenderTarget);
}
requestAnimationFrame(loop);
```

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

### WebGL Initialization and GUI Setup

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/renderer_deferred_lighting.html

Initializes the WebGL renderer, sets up GUI controls for light count and effects, and integrates the Stats.js performance monitor.

```javascript
var deferredRenderer = new WebGLRenderer({ antialias: true });
deferredRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(deferredRenderer.domElement);
var gui = new GUI();
gui.add(deferredRenderer.info.memory, 'geometries');
gui.add(deferredRenderer.info.memory, 'textures');
gui.add(deferredRenderer.info.memory, 'programs');
gui.add(deferredRenderer.info.render, 'calls', 0, 10000, 1).step(1);
gui.add(deferredRenderer.info.render, 'triangles', 0, 100000, 1).step(1);
gui.add(deferredRenderer.info.render, 'lines', 0, 100000, 1).step(1);
gui.add(deferredRenderer.info.render, 'points', 0, 100000, 1).step(1);
const params = {
  lightCount: 4,
  rotate: true,
  fxaa: false
};
gui.add(deferredRenderer.info.renderer, 'info', 'WebGL ' + deferredRenderer.capabilities.version }, 'version').disable(); gui.add(params, 'lightCount', 0, maxLightCount, 1).onChange(setLights); gui.add(params, 'rotate'); gui.add(params, 'fxaa'); const stats = new Stats(); stats.showPanel(0); document.body.appendChild(stats.dom);
```

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

### t3d.js Scene Setup and Rendering

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_shadermaterial.html

Initializes the t3d.js rendering environment, sets up a scene with a sphere and a plane, applies different ShaderMaterials, configures a camera, and starts the rendering loop. Includes GUI integration for material switching.

```javascript
import * as t3d from 't3d';
import { ForwardRenderer } from 't3d/addons/render/ForwardRenderer.js';
import { GUI } from './libs/lil-gui.esm.min.js';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

const vertexShader = document.getElementById('vertexShader').textContent;
const fragmentShader1 = document.getElementById('fragmentShader1').textContent;
const fragmentShader2 = document.getElementById('fragmentShader2').textContent;

const shader1 = {
  vertexShader: vertexShader,
  fragmentShader: fragmentShader1,
  uniforms: { time: 10 }
};

const shader2 = {
  vertexShader: vertexShader,
  fragmentShader: fragmentShader2,
  uniforms: { time: 10 }
};

const material1 = new t3d.ShaderMaterial(shader1);
const material2 = new t3d.ShaderMaterial(shader2);

const sphere_geometry = new t3d.SphereGeometry(10, 20, 20);
const sphere = new t3d.Mesh(sphere_geometry, material2);
sphere.euler.z = -Math.PI / 2;
sphere.position.y = 10;
scene.add(sphere);

const plane_geometry = new t3d.PlaneGeometry(100, 100);
const plane = new t3d.Mesh(plane_geometry, material2);
plane.position.y = 0;
scene.add(plane);

const camera = new t3d.Camera();
camera.position.set(0, 80, 100);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

const gui = new GUI();
gui.add({ version: 'WebGL ' + forwardRenderer.capabilities.version }, 'version').disable();
gui.add({ material: 'sample1' }, 'material', ['sample1', 'sample2']).onChange(value => {
  sphere.material = value === 'sample1' ? material2 : material1;
  plane.material = value === 'sample1' ? material2 : material1;
});

function loop(count) {
  requestAnimationFrame(loop);
  material1.uniforms.time += 0.01;
  material2.uniforms.time += 0.01;
  if (material1.uniforms.time > 100) {
    material1.uniforms.time = 0;
    material2.uniforms.time = 0;
  }

  // rotate camera
  camera.position.x = 100 * Math.sin(count / 1000 * .5);
  camera.position.z = 100 * Math.cos(count / 1000 * .5);
  camera.position.y = 30 * Math.cos(count / 1000 * .5) + 50;
  camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));

  forwardRenderer.render(scene, camera);
}

requestAnimationFrame(loop);

function onWindowResize() {
  width = window.innerWidth || 2;
  height = window.innerHeight || 2;
  camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
  forwardRenderer.backRenderTarget.resize(width, height);
}

window.addEventListener('resize', onWindowResize, false);
```

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

### t3d.js Scene Setup and Environment Mapping

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_envmap.html

Initializes the t3d.js renderer, scene, and camera. It loads a cubemap for environment mapping, sets up a SkyBox, and applies the environment map to the scene. The example also includes a plane and a sphere with PBR materials, demonstrating how environment mapping affects reflections and lighting.

```javascript
import * as t3d from 't3d';
import { SkyBox } from 't3d/addons/objects/SkyBox.js';
import { ForwardRenderer } from 't3d/addons/render/ForwardRenderer.js';
import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';
import { TextureCubeLoader } from 't3d/addons/loaders/TextureCubeLoader.js';
import { GUI } from './libs/lil-gui.esm.min.js';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

const cubeTexturePath = './resources/skybox/Park2/';
const cubeTexture = new TextureCubeLoader().load([
    cubeTexturePath + 'posx.jpg',
    cubeTexturePath + 'negx.jpg',
    cubeTexturePath + 'posy.jpg',
    cubeTexturePath + 'negy.jpg',
    cubeTexturePath + 'posz.jpg',
    cubeTexturePath + 'negz.jpg'
]);
cubeTexture.encoding = t3d.TEXEL_ENCODING_TYPE.SRGB;

const skyBox = new SkyBox(cubeTexture);
skyBox.gamma = true;
scene.add(skyBox);
scene.environment = cubeTexture;

const plane_geometry = new t3d.PlaneGeometry(60, 60);
const sphere_geometry = new t3d.SphereGeometry(20, 20, 20);

const material = new t3d.PBRMaterial();
material.diffuse.setHex(0xffffff);
material.roughness = 0;
material.metalness = 1;
material.side = t3d.DRAW_SIDE.DOUBLE;

const plane = new t3d.Mesh(plane_geometry, material);
plane.position.set(30, 0, 0);
scene.add(plane);

const sphere = new t3d.Mesh(sphere_geometry, material);
sphere.position.set(-30, 0, 0);
scene.add(sphere);

const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(0, 50, 150);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 10000);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);

const gui = new GUI();
const envFolder = gui.addFolder('Environment');
envFolder.add(scene, 'envDiffuseIntensity', 0, 1, 0.01).name('Diffuse Intensity');
envFolder.add(scene, 'envSpecularIntensity', 0, 1, 0.01).name('Specular Intensity');

const materialFolder = gui.addFolder('Material');
materialFolder.add(material, 'roughness', 0, 1, 0.01);
materialFolder.add(material, 'metalness', 0, 1, 0.01);

function loop(count) {
    requestAnimationFrame(loop);
    controller.update();
    forwardRenderer.render(scene, camera);
}
requestAnimationFrame(loop);

function onWindowResize() {
    width = window.innerWidth || 2;
    height = window.innerHeight || 2;
    camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 10000);
    forwardRenderer.backRenderTarget.resize(width, height);
}
window.addEventListener('resize', onWindowResize, false);

```

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

### Scene Initialization and Setup in t3d.js

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/probes_reflection_planar.html

Initializes the t3d.js renderer, scene, camera, and controls. Sets up basic lighting and environment mapping for the scene. Handles window resizing for responsive rendering.

```javascript
let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
forwardizer.shadowAutoUpdate = false;

const scene = new t3d.Scene();

const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(0, 2, 5);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 0.1, 1000);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);
controller.target.set(0, 1, 0);

const leftLight = new t3d.DirectionalLight(0x00ff00);
leftLight.position.set(-10, 10, 10);
leftLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
leftLight.castShadow = true;
leftLight.shadow.mapSize.set(512, 512);
leftLight.shadow.windowSize = 5;
scene.add(leftLight);

const rightLight = new t3d.DirectionalLight(0xff00ff);
rightLight.position.set(10, 10, 10);
rightLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
rightLight.castShadow = true;
rightLight.shadow.mapSize.set(512, 512);
rightLight.shadow.windowSize = 5;
scene.add(rightLight);
```

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

### Setup Skeleton Helper and GUI Controls

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/geometry_loader_gltf_skinning.html

Configures the SkeletonHelper for visualizing the bone structure and integrates lil-gui for controlling animation playback, time scale, and skeleton visualization.

```javascript
const skeletonHelper = new SkeletonHelper(scene);
const gui = new GUI();

gui.add(params, 'clipName', animNames).onChange(value => {
    const lastActionIndex = actionIndex;
    actionIndex = actions.findIndex(function(action) {
        return action.clip.name === value;
    });
    if (lastActionIndex !== actionIndex) {
        actions[lastActionIndex].time = 0;
        actions[lastActionIndex].weight = 0;
        actions[actionIndex].time = 0;
        actions[actionIndex].weight = 1;
    }
});

gui.add(params, 'timeScale', -2, 2, 0.1);

const skeleton = gui.addFolder('Skeleton').close();
skeleton.add(params, 'skeleton').onChange(value => {
    if (value) {
        scene.add(skeletonHelper);
    } else {
        scene.remove(skeletonHelper);
    }
});
skeleton.addColor(skeletonHelper, 'colorMax');
skeleton.addColor(skeletonHelper, 'colorMin');
skeleton.add(skeletonHelper, 'midStep', 0, 1, 0.01);
skeleton.add(skeletonHelper, 'midWidthScale', 0, 1, 0.01);
skeleton.add(skeletonHelper, 'ballScale', 0, 1, 0.01);
```

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

### Setup and Initialization in t3d.js

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/webgl_multi_draw.html

Initializes the t3d.js renderer, scene, lighting, camera, and controls. It also includes a check for WEBGL_multi_draw support and handles window resizing.

```javascript
let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const forwardRenderer = new ForwardRenderer(canvas);
const capabilities = forwardRenderer.capabilities;
if ((!capabilities.getExtension('WEBGL_multi_draw'))) {
    document.getElementById('notSupported').style.display = '';
    console.error('Not supported WEBGL_multi_draw!');
}
const scene = new t3d.Scene();
const ambientLight = new t3d.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const directionalLight = new t3d.DirectionalLight(0xffffff, 1);
directionalLight.lookAt(new t3d.Vector3(0, -25, -25), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(50, 50, 100);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);
```

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

### t3d.js: Setup Camera and GUI for Interaction

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/lab_ground.html

Configures the perspective camera, setting its position, look-at target, and projection properties. It also initializes a GUI for interactive control over texture scaling.

```javascript
import { GUI } from './libs/lil-gui.esm.min.js';

const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.GAMMA;
camera.gammaFactor = 1.5;
camera.position.set(0, 25, 100);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

const params = { scaleX: 1, scaleY: 1 };
const gui = new GUI();
gui.add(params, 'scaleX', 0.1, 5.0, 0.01).onChange(() => {
  mat2.alphaMapTransform.setUvTransform(0, 0, params.scaleX, params.scaleY, 0, 0.5, 0.5);
});
gui.add(params, 'scaleY', 0.1, 5.0, 0.01).onChange(() => {
  mat2.alphaMapTransform.setUvTransform(0, 0, params.scaleX, params.scaleY, 0, 0.5, 0.5);
});
```

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

### Setup Lighting and Camera

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/stereo_webxr_vr_car.html

Adds an ambient light and a spot light to illuminate the scene. A StereoCamera is created and positioned for 3D viewing.

```javascript
const ambientLight = new t3d.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const spotLight = new t3d.SpotLight(0xffffff, 0.4, 30, Math.PI / 5, 0.3);
spotLight.position.set(0, 10, 0);
spotLight.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
spotLight.castShadow = true;
scene.add(spotLight);

const camera = new StereoCamera();
camera.position.set(3.0, 2.3, 1.0);
camera.near = 1;
camera.far = 1000;
scene.add(camera);
```

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

### Import t3d.js Modules and Setup Scene

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/text_sdf_dynamic.html

Imports necessary modules from t3d.js and its addons, then sets up the 3D scene, camera, and renderer. It configures the canvas, renderer, and camera properties for rendering.

```javascript
{ "imports": { "t3d": "../build/t3d.module.js", "t3d/addons/": "./jsm/" } } import * as t3d from 't3d'; import { OrbitControls } from 't3d/addons/controls/OrbitControls.js'; import { ForwardRenderer } from 't3d/addons/render/ForwardRenderer.js'; import { DistanceTransform } from 't3d/addons/math/DistanceTransform.js'; import { SDFTextShader } from 't3d/addons/shaders/SDFTextShader.js'; import { GUI } from './libs/lil-gui.esm.min.js'; import Stats from './libs/stats.module.js';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
forwardRenderer.backRenderTarget.setColorClearValue(0.9, 0.9, 0.9, 1);

const scene = new t3d.Scene();
const camera = new t3d.Camera();
camera.position.set(0, 0, 400);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective((45 / 180) * Math.PI, width / height, 10, 10000);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);
controller.maxDistance = 9000;
```

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

### t3d.js Scene Setup and Initialization

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/lab_histogram.html

Initializes the t3d.js renderer, scene, lighting, camera, and controls. Sets up a basic scene with a ground plane and environment lighting. Includes a window resize handler.

```javascript
let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const forwardRenderer = new ForwardRenderer(canvas);
forwardRenderer.backRenderTarget.setColorClearValue(0, 0, 0, 1);
const scene = new t3d.Scene();
scene.fog = new t3d.Fog(0x000000, 800, 2000);
const cubeTexturePath = './resources/skybox/Bridge2/';
const cubeTexture = new TextureCubeLoader().load([
    cubeTexturePath + 'posx.jpg',
    cubeTexturePath + 'negx.jpg',
    cubeTexturePath + 'posy.jpg',
    cubeTexturePath + 'negy.jpg',
    cubeTexturePath + 'posz.jpg',
    cubeTexturePath + 'negz.jpg'
]);
cubeTexture.encoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
scene.environment = cubeTexture;
const ambientLight = new t3d.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);
const directionalLight = new t3d.DirectionalLight(0xffffff, 1.5);
directionalLight.castShadow = true;
directionalLight.shadow.windowSize = 450;
directionalLight.shadow.mapSize.set(2048, 2048);
directionalLight.shadow.bias = -0.001;
directionalLight.shadow.normalBias = 0.2;
directionalLight.shadow.cameraNear = 10;
directionalLight.position.set(-130, 140, 150);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);
const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(260, 100, 260);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(30 / 180 * Math.PI, width / height, 1, 5000);
scene.add(camera);
const controller = new OrbitControls(camera, canvas);
const plane_geometry = new t3d.PlaneGeometry(3000, 3000);
const plane_material = new t3d.PBRMaterial();
plane_material.roughness = 0.7;
plane_material.diffuse.setHex(0x111111);
const plane = new t3d.Mesh(plane_geometry, plane_material);
plane.position.y = -1;
plane.receiveShadow = true;
scene.add(plane);

function onWindowResize() {
    width = window.innerWidth || 2;
    height = window.innerHeight || 2;
    camera.setPerspective(30 / 180 * Math.PI, width / height, 1, 5000);
    forwardRenderer.backRenderTarget.resize(width, height);
}
window.addEventListener('resize', onWindowResize, false);
```

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

### Load GLTF Model and Setup Controls

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_shader_shadow.html

Loads a GLTF model using GLTFLoader and sets up OrbitControls for interactive camera movement. Includes a Nanobar for loading progress indication.

```javascript
import * as t3d from 't3d';
import { GLTFLoader } from 't3d/addons/loaders/glTF/GLTFLoader.js';
import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';

// ... (renderer and scene setup)

const controller = new OrbitControls(camera, canvas);

const nanobar = new Nanobar();
nanobar.el.style.background = 'gray';

const loadingManager = new t3d.LoadingManager(function() {
    nanobar.go(100);
    nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
    if (itemsLoaded < itemsTotal) {
        nanobar.go(itemsLoaded / itemsTotal * 100);
    }
});

const loader = new GLTFLoader(loadingManager);
loader.load('resources/models/gltf/suzanne/suzanne.gltf').then(function(result) {
    const object = result.root.children[0];
    object.castShadow = true;
    scene.add(object);
    forwardRenderer.shadowNeedsUpdate = true;
});
```

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

### t3d.js Setup and glTF Model Loading

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/light_hemispherelight.html

Initializes the t3d.js environment, sets up the renderer, scene, and loads a glTF model with a progress bar. Includes handling of model loading completion and errors.

```javascript
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

const nanobar = new Nanobar();
nanobar.el.style.background = 'gray';

const loadingManager = new t3d.LoadingManager(function() {
  nanobar.go(100);
  nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
  if (itemsLoaded < itemsTotal) {
    nanobar.go(itemsLoaded / itemsTotal * 100);
  }
});

let model;
console.time('Load glTF');
const gltfUri = './resources/models/gltf/bust_of_woman/glTF-Binary/bust_of_woman.glb';
new GLTFLoader(loadingManager).load(gltfUri).then(function(result) {
  console.timeEnd('Load glTF');
  model = result.root;
  model.traverse(node => {
    if (node.isMesh) {
      node.castShadow = true;
      node.receiveShadow = true;
    }
  });
  scene.add(model);
}).catch(function(e) {
  console.error(e)
});
```

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

### t3d.js Initialization and Scene Setup

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/light_shadow.html

Sets up the rendering environment, including canvas, renderer, scene, fog, and loading manager. It configures the renderer for shadow rendering and initializes scene elements.

```javascript
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
forwardRenderer.shadowAutoUpdate = false;

const scene = new t3d.Scene();
scene.fog = new t3d.Fog(0x000000, 50, 1000);

const loadingManager = new t3d.LoadingManager(function() {
    nanobar.go(100);
    nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
    if (itemsLoaded < itemsTotal) {
        nanobar.go(itemsLoaded / itemsTotal * 100);
    }
});
```

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

### Setup Camera and Animation Loop

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_blending.html

Configures the camera's perspective and position, then starts the animation loop using requestAnimationFrame. The loop updates the background's UV transform for a scrolling effect and renders the scene.

```javascript
const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(0, 0, 600);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(70 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

function loop(count) {
    requestAnimationFrame(loop);
    const offset = count / 4000;
    bg_material.diffuseMapTransform.setUvTransform(-offset, -offset, 64, 64, 0, 0.5, 0.5);
    forwardRenderer.render(scene, camera);
}

requestAnimationFrame(loop);
```

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

### Set up Camera and Orbit Controls

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_clearcoat.html

Initializes a perspective camera for the scene and sets up OrbitControls to allow user interaction (panning, zooming, rotating) with the camera around the scene's origin.

```javascript
const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.setPerspective(30 / 180 * Math.PI, width / height, 1, 10000);
camera.position.set(0, 0, 500);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);
```

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

### Initialize T3D Scene, Load GLTF, and Render

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/geometry_loader_gltf_materials_clearcoat.html

Sets up the T3D rendering environment, loads a GLTF model with clearcoat materials, and initiates the rendering loop. It includes scene setup, lighting, camera configuration, and event handling for resizing.

```javascript
import * as t3d from 't3d';
import { GLTFLoader } from 't3d/addons/loaders/glTF/GLTFLoader.js';
import { TextureCubeLoader } from 't3d/addons/loaders/TextureCubeLoader.js';
import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';
import { SkyBox } from 't3d/addons/objects/SkyBox.js';
import { ForwardRenderer } from 't3d/addons/render/ForwardRenderer.js';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);

const cubeTexturePath = './resources/skybox/Bridge2/';
const cubeTexture = new TextureCubeLoader().load([
    cubeTexturePath + 'posx.jpg',
    cubeTexturePath + 'negx.jpg',
    cubeTexturePath + 'posy.jpg',
    cubeTexturePath + 'negy.jpg',
    cubeTexturePath + 'posz.jpg',
    cubeTexturePath + 'negz.jpg'
]);
cubeTexture.encoding = t3d.TEXEL_ENCODING_TYPE.SRGB;

const scene = new t3d.Scene();
scene.environment = cubeTexture;

const skyBox = new SkyBox(cubeTexture);
skyBox.level = 0;
skyBox.gamma = true;
scene.add(skyBox);

const nanobar = new Nanobar();
nanobar.el.style.background = 'gray';
const loadingManager = new t3d.LoadingManager(function() {
    nanobar.go(100);
    nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
    if (itemsLoaded < itemsTotal) {
        nanobar.go(itemsLoaded / itemsTotal * 100);
    }
});

const loader = new GLTFLoader(loadingManager);
loader.autoLogError = false;
console.time('GLTFLoader');
loader.load(
    './resources/models/gltf/ClearCoatTest.glb'
).then(function(result) {
    console.timeEnd('GLTFLoader');
    const object = result.root;
    scene.add(object);
}).catch(e => console.error(e));

const ambientLight = new t3d.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 10, 30);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
directionalLight.shadow.cameraNear = 1;
directionalLight.shadow.cameraFar = 100;
directionalLight.shadow.mapSize.set(1024, 1024);
directionalLight.shadow.windowSize = 50;
directionalLight.castShadow = true;
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.SRGB;
camera.position.set(2, -2, 18);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 8000);
scene.add(camera);

const controller = new OrbitControls(camera, canvas);
controller.enablePan = false;

function loop(count) {
    requestAnimationFrame(loop);
    controller.update();
    forwardRenderer.render(scene, camera);
}
requestAnimationFrame(loop);

function onWindowResize() {
    width = window.innerWidth || 2;
    height = window.innerHeight || 2;
    camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 8000);
    forwardRenderer.backRenderTarget.resize(width * window.devicePixelRatio, height * window.devicePixelRatio);
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
}
window.addEventListener('resize', onWindowResize, false);
```

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

### JavaScript: Setup and FlyControls Integration in t3d

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/controls_camera_fly.html

This snippet sets up a t3d.js scene, including a renderer, camera, lighting, and objects (sphere and plane). It then initializes FlyControls to manage camera movement based on user input and starts a rendering loop.

```javascript
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

// Sphere setup
const sphere_geometry = new t3d.SphereGeometry(10, 20, 20);
const phong = new t3d.PhongMaterial();
phong.diffuse.setHex(0xffffff);
const sphere = new t3d.Mesh(sphere_geometry, phong);
scene.add(sphere);

// Plane setup
const plane_geometry = new t3d.PlaneGeometry(100, 100);
const lambert = new t3d.LambertMaterial();
lambert.diffuse.setHex(0xf0f0f0);
const plane = new t3d.Mesh(plane_geometry, lambert);
plane.position.y = -10;
scene.add(plane);

// Lighting setup
const ambientLight = new t3d.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const directionalLight = new t3d.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(20, 30, 40);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

// Camera setup
const camera = new t3d.Camera();
camera.position.set(40, 80, 100);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

// FlyControls initialization
const controller = new FlyControls(camera, canvas);
const clock = new Clock();

// Rendering loop
function loop(count) {
  requestAnimationFrame(loop);
  controller.update(clock.getDelta());
  forwardRenderer.render(scene, camera);
}
requestAnimationFrame(loop);

// Window resize handler
function onWindowResize() {
  width = window.innerWidth || 2;
  height = window.innerHeight || 2;
  camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
  forwardRenderer.backRenderTarget.resize(width, height);
}
window.addEventListener('resize', onWindowResize, false);
```

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

### JavaScript: Setup t3d Rendering and Load Assets

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/material_lightmap.html

Initializes the t3d rendering environment, sets up the canvas, and loads necessary assets like models and lightmap textures using the GLTFLoader and Texture2DLoader. It also includes a progress bar for loading status.

```javascript
import * as t3d from 't3d';
import { ForwardRenderer } from 't3d/addons/render/ForwardRenderer.js';
import { Texture2DLoader } from 't3d/addons/loaders/Texture2DLoader.js';
import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';
import { GLTFLoader } from 't3d/addons/loaders/glTF/GLTFLoader.js';
import { GUI } from './libs/lil-gui.esm.min.js';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();

const nanobar = new Nanobar();
nanobar.el.style.background = 'gray';

const loadingManager = new t3d.LoadingManager(function() {
    nanobar.go(100);
    nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
    if (itemsLoaded < itemsTotal) {
        nanobar.go(itemsLoaded / itemsTotal * 100);
    }
});

const textureLoader = new Texture2DLoader(loadingManager);
const lightmapPromise = textureLoader.loadAsync('./resources/lightmap.png').then(texture => {
    texture.flipY = false;
    texture.minFilter = t3d.TEXTURE_FILTER.LINEAR;
    texture.generateMipmaps = false;
    return texture;
});

const loader = new GLTFLoader(loadingManager);
const modelPromise = loader.load('./resources/models/gltf/CornellBox.glb');

const materials = [];
Promise.all([lightmapPromise, modelPromise]).then(([lightmap, result]) => {
    result.root.traverse(node => {
        if (!node.isMesh) return;
        const material = node.material;
        // ... material setup ...
        materials.push(material);
    });
    scene.add(result.root);
});
```

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

### Initialize t3d Scene and Load GLTF Model

Source: https://github.com/uinosoft/t3d.js/blob/dev/examples/light_spotlight.html

Sets up the t3d rendering environment, including the canvas, renderer, scene, fog, and loading manager. It then loads a GLTF model asynchronously, applying shadow properties to its meshes.

```javascript
let width = window.innerWidth || 2;
let height = window.innerHeight || 2;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const forwardRenderer = new ForwardRenderer(canvas);
const scene = new t3d.Scene();
scene.fog = new t3d.Fog(0x000000, 10, 1000);
const nanobar = new Nanobar();
nanobar.el.style.background = 'gray';
const loadingManager = new t3d.LoadingManager(function() {
    nanobar.go(100);
    nanobar.el.style.background = 'transparent';
}, function(url, itemsLoaded, itemsTotal) {
    if (itemsLoaded < itemsTotal) {
        nanobar.go(itemsLoaded / itemsTotal * 100);
    }
});
let model;
console.time('Load glTF');
const gltfUri = './resources/models/gltf/bust_of_woman/glTF-Binary/bust_of_woman.glb';
new GLTFLoader(loadingManager).load(gltfUri).then(function(result) {
    console.timeEnd('Load glTF');
    model = result.root;
    model.traverse(node => {
        if (node.isMesh) {
            node.castShadow = true;
            node.receiveShadow = true;
            node.shadowType = t3d.SHADOW_TYPE.PCF5_SOFT;
        }
    });
    scene.add(model);
}).catch(function(e) {
    console.error(e)
});
```