<template>
    <div class="container">
        <div id="bg_three"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                camera: null,
                scene: null,
                renderer: null,
                mesh: null,
                stats: null,
                size: 10,
                res: 40,
                sizeres: this.size * this.res,
                halfsizeres: this.sizeres /2,
                buffer1:[],
                buffer2:[],
                temp:null,
                grid:[],
                plane:null,
                light:null,
                geometry:null,
                material:null,
                mouse:null,
                projector:null,
                ray:null,
                intersects:[],
            }
        },
        mounted() {
            this.init();
            // this.animate()
        },
        methods: {
            createDate() {
                let randomData = [];
                let x, y, z;
                for (var i = 0; i < 50; i++) {
                    for (var j = 0; j < 30; j++) {
                        x = j;
                        y = i;
                        z = Math.random() * 100;
                        randomData.push([x, y, z])
                    }

                }
                return randomData
            },
            init: function () {
                let container = document.getElementById('bg_three');
                this.stats = new Stats();
                this.stats.domElement.style.position = 'absolute';
                this.stats.domElement.style.top = '0px';
                for (var i = 0, l = res * res; i < l; i++) {
                    this.buffer1[i] = 0;
                    this.buffer2[i] = 0;
                }





                // this.camera = new Three.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.01, 10)
                // this.camera.position.z = 0.6
                // this.scene = new Three.Scene()
                // let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
                // let material = new Three.MeshNormalMaterial()
                // this.mesh = new Three.Mesh(geometry, material)
                // this.scene.add(this.mesh)
                //
                // this.renderer = new Three.WebGLRenderer({antialias: true})
                // this.renderer.setSize(container.clientWidth, container.clientHeight)
                // container.appendChild(this.renderer.domElement)
            },
            animate: function () {
                requestAnimationFrame(this.animate)
                this.mesh.rotation.x += 0.01
                this.mesh.rotation.y += 0.02
                this.renderer.render(this.scene, this.camera)
            }
        },
    }
</script>

<style scoped>

    #bg_three {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 840px;
    }
</style>
