@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.general.home'))

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2><a href="{{url('/project')}}" style="text-decoration: none;">Projects</a> :: <a href="{{url('/project/' . $project->name . '/box')}}" style="text-decoration: none;">{{$project->label}}</a> :: {{$box->label}}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="loading" style="position: fixed;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;"><img src="{{ URL::asset('img/loading.svg') }}" alt="загрузка" title="загрузка"></div>
                <canvas id="viewport" style="width: 100%; height: 100%"></canvas>
            </div>
        </div>
    </div>
@endsection

@section('page-style-files')
    <script>
        if (/Edge/.test(navigator.userAgent)) {
            var script = document.createElement('script');
            script.src = '{{ URL::asset('js/encoding.js') }}';
            document.head.appendChild(script);
        }
    </script>
@stop

@section('page-js-files')
    <script src="{{ URL::asset('js/claygl.min.js') }}"></script>
@stop

@section('page-js-script')
    <script>
        var scale = 10;
        var distance = 0.75;
        var tonemapping = false;
        var app = clay.application.create('#viewport', {
            graphic: {
                shadow: true,
                linear: true,
                tonemapping: tonemapping
            },
            init: function (app) {
                // Create camera
                this._camera = app.createCamera([distance * scale, distance * scale, distance * scale], [0, 0, 0]);

                // Create light
                //app.createDirectionalLight([-3, -3, -3], '#fff', 2);
                app.createPointLight([-3 * scale, -3 * scale, -3 * scale], 100, '#fff', 0.25 * scale / 2);
                app.createPointLight([3 * scale, 3 * scale, 3 * scale], 100, '#fff', 0.5 * scale / 2);
                //app.createAmbientLight('#fff', 0.3);
                /*app.createSpotLight([-5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 20 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 100 * scale / 2, '#fff');*/
                /*app.createSpotLight([5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, 5 * scale, -5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, -5 * scale, 5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, 5 * scale, -5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, -5 * scale, 5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');*/

                this._orbitControl = new clay.plugin.OrbitControl({
                    target: this._camera,
                    domElement: app.container,
                    //autoRotate: true
                });

                // Load model. return a load promise to make sure the look will be start after model loaded.
                return app.loadModel('{{ (isset($_REQUEST['file']) ? URL::asset($_REQUEST['file']) : URL::asset('img/mock.glb')) }}').then((function (result) {
                    this.object = result.rootNode;
                    result.rootNode.scale.set(1 * scale, 1 * scale, 1 * scale);
                    result.materials.forEach(function (material) {
                        material.set('roughness', 0.9);
                    });
                    document.getElementById('loading').style.display = "none";
                }).bind(this));
            },

            loop: function (app) {
                this._orbitControl.update(app.frameTime);
            }
        });
    </script>
@stop