How to use babylonjs-gltf2interface - 10 common examples

if (animationType === Animation.ANIMATIONTYPE_FLOAT) { // handles single component x, y, z or w component animation by using a base property and animating over a component.
            property = animation.targetProperty.split('.');
            componentName = property ? property[1] : ''; // x, y, or z component
            value = useQuaternion ? Quaternion.FromArray(basePositionRotationOrScale).normalize() : Vector3.FromArray(basePositionRotationOrScale);

            switch (componentName) {
                case 'x': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'y': {
                    value[componentName] = (convertToRightHandedSystem && useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'z': {
                    value[componentName] = (convertToRightHandedSystem && !useQuaternion && (animationChannelTargetPath !== AnimationChannelTargetPath.SCALE)) ? -factor : factor;
                    break;
                }
                case 'w': {
                    (value as Quaternion).w = factor;
                    break;
                }
                default: {
                    Tools.Error(`glTFAnimation: Unsupported component type "${componentName}" for scale animation!`);
                }
            }
        }

        return value;
    }

animation.getKeys().forEach(function(keyFrame) {
            inputs.push(keyFrame.frame / animation.framePerSecond); // keyframes in seconds.
            _GLTFAnimation.AddSplineTangent(
                babylonTransformNode,
                _TangentType.INTANGENT,
                outputs,
                animationChannelTargetPath,
                AnimationSamplerInterpolation.CUBICSPLINE,
                keyFrame,
                frameDelta,
                useQuaternion,
                convertToRightHandedSystem
            );
            _GLTFAnimation._AddKeyframeValue(keyFrame, animation, outputs, animationChannelTargetPath, babylonTransformNode, convertToRightHandedSystem, useQuaternion);

            _GLTFAnimation.AddSplineTangent(
                babylonTransformNode,
                _TangentType.OUTTANGENT,
                outputs,
                animationChannelTargetPath,
                AnimationSamplerInterpolation.CUBICSPLINE,
                keyFrame,
                frameDelta,
                useQuaternion,

let outputLength: number;
        let animationSampler: IAnimationSampler;
        let animationChannel: IAnimationChannel;

        if (animationData) {
            let nodeIndex = nodeMap[babylonTransformNode.uniqueId];

            // Creates buffer view and accessor for key frames.
            let byteLength = animationData.inputs.length * 4;
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  keyframe data view`);
            bufferViews.push(bufferView);
            animationData.inputs.forEach(function(input) {
                binaryWriter.setFloat32(input);
            });

            accessor = _GLTFUtilities._CreateAccessor(bufferViews.length - 1, `${name}  keyframes`, AccessorType.SCALAR, AccessorComponentType.FLOAT, animationData.inputs.length, null, [animationData.inputsMin], [animationData.inputsMax]);
            accessors.push(accessor);
            keyframeAccessorIndex = accessors.length - 1;

            // create bufferview and accessor for keyed values.
            outputLength = animationData.outputs.length;
            byteLength = dataAccessorType === AccessorType.VEC3 ? animationData.outputs.length * 12 : animationData.outputs.length * 16;

            // check for in and out tangents
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  data view`);
            bufferViews.push(bufferView);

            animationData.outputs.forEach(function(output) {
                output.forEach(function(entry) {
                    binaryWriter.setFloat32(entry);
                });
            });

private _loadFloatAccessorAsync(context: string, accessor: IAccessor): Promise {
        // TODO: support normalized and stride

        if (accessor.componentType !== AccessorComponentType.FLOAT) {
            throw new Error(`Invalid component type ${accessor.componentType}`);
        }

        if (accessor._data) {
            return accessor._data as Promise;
        }

        const numComponents = GLTFLoader._GetNumComponents(context, accessor.type);
        const length = numComponents * accessor.count;

        if (accessor.bufferView == undefined) {
            accessor._data = Promise.resolve(new Float32Array(length));
        }
        else {
            const bufferView = ArrayItem.Get(`${context}/bufferView`, this._gltf.bufferViews, accessor.bufferView);
            accessor._data = this.loadBufferViewAsync(`/bufferViews/${bufferView.index}`, bufferView).then((data) => {

if (glTFMaterial && !this._glTFMaterialExporter._hasTexturesPresent(glTFMaterial)) {
                                continue;
                            }
                        }
                        let vertexData = bufferMesh.getVerticesData(attributeKind);
                        if (vertexData) {
                            const vertexBuffer = this.getVertexBufferFromMesh(attributeKind, bufferMesh);
                            if (vertexBuffer) {
                                const stride = vertexBuffer.getSize();
                                const bufferViewIndex = attribute.bufferViewIndex;
                                if (bufferViewIndex != undefined) { // check to see if bufferviewindex has a numeric value assigned.
                                    minMax = { min: null, max: null };
                                    if (attributeKind == VertexBuffer.PositionKind) {
                                        minMax = _GLTFUtilities._CalculateMinMaxPositions(vertexData, 0, vertexData.length / stride, this._convertToRightHandedSystem);
                                    }
                                    const accessor = _GLTFUtilities._CreateAccessor(bufferViewIndex, attributeKind + " - " + babylonTransformNode.name, attribute.accessorType, AccessorComponentType.FLOAT, vertexData.length / stride, 0, minMax.min, minMax.max);
                                    this._accessors.push(accessor);
                                    this.setAttributeKind(meshPrimitive, attributeKind);
                                }
                            }
                        }
                    }
                    if (indexBufferViewIndex) {
                        // Create accessor
                        const accessor = _GLTFUtilities._CreateAccessor(indexBufferViewIndex, "indices - " + babylonTransformNode.name, AccessorType.SCALAR, AccessorComponentType.UNSIGNED_INT, submesh.indexCount, submesh.indexStart * 4, null, null);
                        this._accessors.push(accessor);
                        meshPrimitive.indices = this._accessors.length - 1;
                    }
                    if (materialIndex != null && Object.keys(meshPrimitive.attributes).length > 0) {
                        let sideOrientation = bufferMesh.overrideMaterialSideOrientation !== null ? bufferMesh.overrideMaterialSideOrientation : babylonMaterial.sideOrientation;

                        // Only reverse the winding if we have a clockwise winding

// create bufferview and accessor for keyed values.
            outputLength = animationData.outputs.length;
            byteLength = dataAccessorType === AccessorType.VEC3 ? animationData.outputs.length * 12 : animationData.outputs.length * 16;

            // check for in and out tangents
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  data view`);
            bufferViews.push(bufferView);

            animationData.outputs.forEach(function(output) {
                output.forEach(function(entry) {
                    binaryWriter.setFloat32(entry);
                });
            });

            accessor = _GLTFUtilities._CreateAccessor(bufferViews.length - 1, `${name}  data`, dataAccessorType, AccessorComponentType.FLOAT, outputLength, null, null, null);
            accessors.push(accessor);
            dataAccessorIndex = accessors.length - 1;

            // create sampler
            animationSampler = {
                interpolation: animationData.samplerInterpolation,
                input: keyframeAccessorIndex,
                output: dataAccessorIndex
            };
            glTFAnimation.samplers.push(animationSampler);

            // create channel
            animationChannel = {
                sampler: glTFAnimation.samplers.length - 1,
                target: {
                    node: nodeIndex,

let outputLength: number;
        let animationSampler: IAnimationSampler;
        let animationChannel: IAnimationChannel;

        if (animationData) {
            let nodeIndex = nodeMap[babylonTransformNode.uniqueId];

            // Creates buffer view and accessor for key frames.
            let byteLength = animationData.inputs.length * 4;
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  keyframe data view`);
            bufferViews.push(bufferView);
            animationData.inputs.forEach(function(input) {
                binaryWriter.setFloat32(input);
            });

            accessor = _GLTFUtilities._CreateAccessor(bufferViews.length - 1, `${name}  keyframes`, AccessorType.SCALAR, AccessorComponentType.FLOAT, animationData.inputs.length, null, [animationData.inputsMin], [animationData.inputsMax]);
            accessors.push(accessor);
            keyframeAccessorIndex = accessors.length - 1;

            // create bufferview and accessor for keyed values.
            outputLength = animationData.outputs.length;
            byteLength = dataAccessorType === AccessorType.VEC3 ? animationData.outputs.length * 12 : animationData.outputs.length * 16;

            // check for in and out tangents
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  data view`);
            bufferViews.push(bufferView);

            animationData.outputs.forEach(function(output) {
                output.forEach(function(entry) {
                    binaryWriter.setFloat32(entry);
                });
            });

// create bufferview and accessor for keyed values.
            outputLength = animationData.outputs.length;
            byteLength = dataAccessorType === AccessorType.VEC3 ? animationData.outputs.length * 12 : animationData.outputs.length * 16;

            // check for in and out tangents
            bufferView = _GLTFUtilities._CreateBufferView(0, binaryWriter.getByteOffset(), byteLength, undefined, `${name}  data view`);
            bufferViews.push(bufferView);

            animationData.outputs.forEach(function(output) {
                output.forEach(function(entry) {
                    binaryWriter.setFloat32(entry);
                });
            });

            accessor = _GLTFUtilities._CreateAccessor(bufferViews.length - 1, `${name}  data`, dataAccessorType, AccessorComponentType.FLOAT, outputLength, null, null, null);
            accessors.push(accessor);
            dataAccessorIndex = accessors.length - 1;

            // create sampler
            animationSampler = {
                interpolation: animationData.samplerInterpolation,
                input: keyframeAccessorIndex,
                output: dataAccessorIndex
            };
            glTFAnimation.samplers.push(animationSampler);

            // create channel
            animationChannel = {
                sampler: glTFAnimation.samplers.length - 1,
                target: {
                    node: nodeIndex,

private static _GetTextureWrapMode(context: string, mode: TextureWrapMode | undefined): number {
        // Set defaults if undefined
        mode = mode == undefined ? TextureWrapMode.REPEAT : mode;

        switch (mode) {
            case TextureWrapMode.CLAMP_TO_EDGE: return Texture.CLAMP_ADDRESSMODE;
            case TextureWrapMode.MIRRORED_REPEAT: return Texture.MIRROR_ADDRESSMODE;
            case TextureWrapMode.REPEAT: return Texture.WRAP_ADDRESSMODE;
            default:
                Tools.Warn(`${context}: Invalid value (${mode})`);
                return Texture.WRAP_ADDRESSMODE;
        }
    }

private _getGLTFTextureWrapModesSampler(texture: BaseTexture): ISampler {
        let wrapS = this._getGLTFTextureWrapMode(texture instanceof Texture ? texture.wrapU : Texture.WRAP_ADDRESSMODE);
        let wrapT = this._getGLTFTextureWrapMode(texture instanceof Texture ? texture.wrapV : Texture.WRAP_ADDRESSMODE);

        if (wrapS === TextureWrapMode.REPEAT && wrapT === TextureWrapMode.REPEAT) { // default wrapping mode in glTF, so omitting
            return {};
        }

        return { wrapS: wrapS, wrapT: wrapT };
    }