How to use three - 10 common examples

const GIFEncoder = require('gifencoder');
const {createCanvas} = require('../lib');

const width = 512,
  height = 512;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const canvas = createCanvas(width, height);

const renderer = new THREE.WebGLRenderer({
  canvas,
});

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

const encoder = new GIFEncoder(width, height);
encoder.createReadStream().pipe(fs.createWriteStream('./snapshot/threejs-cube.gif'));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(16); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

let idx = 0;
function update() {
  cube.rotation.x += 0.01;

assignSkeleton(bone) {
    if (bone.name === 'root') {
      bone.originalUp = new THREE.Vector3(0, 1, 0);
    } else {
      // bone.posRef is the link between this bone and our BONES array
      const index = parseInt(bone.name.split('_')[1], 10);
      bone.posRef = index + 1;
      bone.originalUp = new THREE.Vector3(0, 1, 0).applyQuaternion(bone.quaternion).normalize();
      // save original length for retargeting
      bone.originalLength = bone.position.length();
    }
    // arrow helpers to assist with bone directions
    bone.originalForward = new THREE.Vector3(0, 0, 1).transformDirection(bone.matrixWorld);
    bone.arrowHelper = new THREE.ArrowHelper(bone.originalForward,
      bone.getWorldPosition(new THREE.Vector3()), 0.08, 0xff0000);
    bone.arrowHelper.visible = false;
    this.scene.add(bone.arrowHelper);
    bone.upArrowHelper = new THREE.ArrowHelper(
      new THREE.Vector3(0, 1, 0).transformDirection(bone.matrixWorld),
      bone.getWorldPosition(new THREE.Vector3()), 0.08, 0x0000ff,
    );
    bone.upArrowHelper.visible = false;
    this.scene.add(bone.upArrowHelper);

    // repeat down the heirarchy
    bone.children.forEach((child) => {
      this.assignSkeleton(child);
    });
  }

// this.renderer.render(current.scene, this.cameraForRenderTargets);
        // } else {
        if (!current.skip) {
          this.renderer.setClearColor(new Color(0x000000), 0.0);
          this.renderer.setRenderTarget(current.target);
          this.renderer.render(current.scene, this.cameraForRenderTargets);
        }
        // } else {
        // console.log(current.target.texture.uuid);
        // }
        // }
      }
    }
    this.renderer.setRenderTarget(null);

    this.renderer.setClearColor(new Color(0x000000), 0.0);
    this.renderer.render(this.scene, this.camera);

    if (config.renderView.postProcessing && this.effectComposer && window.d3) {
      this.effectComposer.render(this.elapse);
    }

    if (window.port && window.port.onRender) {
      window.port.onRender.forEach(o => {
        o(this.renderer, this.scene);
      });
    }
  }

function init(nodeCollection) {
    disconnectOldNodes();

    total = nodeCollection.length;
    nodes = nodeCollection;
    // if we can ruse old arrays - do it! No need to stress the GC
    var pointsInitialized = points !== undefined && points.length === total * 3;
    if (!pointsInitialized) points = new Float32Array(total * 3);
    var colorsInitialized = colors !== undefined && colors.length === total * 3;
    if (!colorsInitialized) colors = new Float32Array(total * 3);
    var sizesInitialized = sizes !== undefined && sizes.length === total;
    if (!sizesInitialized) sizes = new Float32Array(total);

    geometry = new THREE.BufferGeometry();

    geometry.addAttribute('position', new THREE.BufferAttribute(points, 3));
    geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
    geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));

    if (particleSystem) {
      scene.remove(particleSystem);
    }

    particleSystem = new THREE.Points(geometry, particleMaterial);
    particleSystem.name = 'nodes';
    particleSystem.frustumCulled = false;

    scene.add(particleSystem);

    for (var i = 0; i < total; ++i) {
      var node = nodes[i];
      // first make sure any update to underlying node properties result in

};

            // Allocate max size object
            let pArray = new Float32Array(pSize * 3);
            let iArray = new Uint32Array(iSize);

            for(let i = 0; i < pSize; i++) {
                pArray[i] = Math.random();
            }
            for(let i = 0; i < iSize; i++) {
                iArray[i] = i % pSize;
            }

            geom.addAttribute( 'position', new THREE.BufferAttribute( pArray, 3 ) );
            geom.setIndex( new THREE.BufferAttribute(  iArray, 1 ) );
            geom.addAttribute( 'color', new THREE.BufferAttribute( colorBuf, 3 ) );

            geom.computeFaceNormals();
            //geom.computeVertexNormals();

            this.renderer.render(this.scene, this.camera);
        } else {
            var renderInfo = this.meshMap[geo.name],
                geometry = renderInfo.mesh.geometry,
                colors = renderInfo.colorBuffer;

            if (geometry.vertices && geo.points.length !== geometry.vertices.length) {
                console.log("********  We may have a problem here, new point count = " + geo.points.length + ", old point count = " + geometry.vertices.length);
                // FIXME: Allocate new color buffer here
            }

            // geometry.setIndex( new THREE.BufferAttribute( geo.index, 1 ) );

public _initArtoolkit(onCompleted: () => any) {
        // set this._artoolkitProjectionAxisTransformMatrix to change artoolkit
        // projection matrix axis to match usual` webgl one
        this._artoolkitProjectionAxisTransformMatrix = new THREE.Matrix4();
        this._artoolkitProjectionAxisTransformMatrix.multiply(
            new THREE.Matrix4().makeRotationY(Math.PI)
        );
        this._artoolkitProjectionAxisTransformMatrix.multiply(
            new THREE.Matrix4().makeRotationZ(Math.PI)
        );
        // get cameraParameters
        const cameraParameters = new ARToolKitCameraParam(
            this.parameters.cameraParametersUrl,
            () => {
                // init controller
                const arController = new ARToolKitController(
                    this.parameters.canvasWidth,
                    this.parameters.canvasHeight,
                    cameraParameters
                );

init()
	{
		var scope = this;
		ImageUtils.crossOrigin = '';

		var orthoScale = 100;
		var orthoWidth = window.innerWidth;
		var orthoHeight = window.innerHeight;

		scope.domElement = scope.element.get(0);

		scope.fpscamera = new PerspectiveCamera(60, 1, 1, 10000 );
		scope.perspectivecamera = new PerspectiveCamera(45, 10, scope.cameraNear, scope.cameraFar);
		scope.orthocamera = new OrthographicCamera(orthoWidth / -orthoScale, orthoWidth /orthoScale, orthoHeight /orthoScale, orthoHeight / -orthoScale, scope.cameraNear, scope.cameraFar);

		scope.camera = scope.perspectivecamera;
// scope.camera = scope.orthocamera;

		scope.renderer = scope.getARenderer();
		scope.domElement.appendChild(scope.renderer.domElement);

		scope.skybox = new Skybox(scope.scene, scope.renderer);

		scope.controls = new OrbitControls(scope.camera, scope.domElement);
		scope.controls.autoRotate = this.options['spin'];
		scope.controls.enableDamping = true;
		scope.controls.dampingFactor = 0.5;
		scope.controls.maxPolarAngle = Math.PI * 0.5;
		scope.controls.maxDistance = 3000;

init() {
    const containerWidth = this._context.container.width;
    const containerHeight = this._context.container.height;

    this._camera = new THREE.PerspectiveCamera(
      50,
      containerWidth / containerHeight,
      rescaleNumber(0.00001),
      rescaleNumber(2000),
    );

    // Controls
    // TODO(ian): Set maxDistance to prevent camera farplane cutoff.
    // See https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/6
    const controls = new OrbitControls(this._camera, this._simulationElt);
    controls.enableDamping = true;
    controls.enablePan = true;
    controls.zoomSpeed = 1.5;
    controls.userPanSpeed = 20;
    controls.rotateSpeed = 2;
    controls.touches = {

this.resolution = window.devicePixelRatio;
    this.animationToken = 0;

    // and the targets
    this.rTarget1 = RenderTarget.clone();
    this.rTarget1.texture.name = 'RT1';
    this.rTarget2 = RenderTarget.clone();
    this.rTarget2.texture.name = 'RT2';
    this.writeBuffer = this.rTarget1;
    this.readBuffer = this.rTarget2;

    // Add a render pass
    this.passes = [];

    // now add a renderer, camera and plane to render the textures to
    this.renderer = new WebGLRenderer(options);
    // console.log('EffectRenderer make renderer', this.renderer.id = 'id-internal-renderer');
    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    this.quad = new Mesh(new PlaneGeometry(2,2), null);
    this.scene = new Scene();
    this.scene.add(this.quad);

    // events
    window.addEventListener('resize', this.resizeHandler.bind(this));

    // set up renderer
    this.renderer.setPixelRatio(this.resolution);
    this.renderer.setSize(width / this.resolution, height / this.resolution);

    // populate the store
    this.setStore();

veuler: null,
        pos: null
    };
    let canFall = false;

    const x = data.getInt16(offset + 2, true);
    const y = data.getInt16(offset + 4, true);
    const z = data.getInt16(offset + 6, true);

    // assigned based on type of bone animation (rotation or translation)
    if (boneframe.type === 0) { // rotation
        boneframe.pos = new THREE.Vector3(0, 0, 0);
        boneframe.veuler = new THREE.Vector3(x, y, z);
    } else { // translation
        boneframe.veuler = new THREE.Vector3(0, 0, 0);
        boneframe.pos = new THREE.Vector3(
            x * WORLD_SCALE,
            y * WORLD_SCALE,
            z * WORLD_SCALE
        );
        canFall = true;
    }
    return { boneframe, canFall };
}