<template>
    <div class="c-shader" ref="container">
        <div class="camra-data">
            camera.position<br />
            x:{{ camera ? camera.position.x : "" }} <br />
            y:{{ camera ? camera.position.y : "" }} <br />
            z:{{ camera ? camera.position.z : "" }} <br />
        </div>
    </div>
</template>

<script>
import gsap from "gsap";
import * as THREE from "three";
import * as Stats from "stats.js";

import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
import { ARButton } from "three/examples//jsm/webxr/ARButton.js";

export default {
    name: "color",
    props: {
        msg: String,
    },
    data() {
        return {
            remaining: 50,
            container: null,
            camera: null,
            scene: null,
            renderer: null,
            mouse: new THREE.Vector2(),
            raycaster: new THREE.Raycaster(),
            cursor: new THREE.Vector3(),
        };
    },
    created() {},
    mounted() {
        this.initStage();
        // 循环动画
        this.animate();
        // this.addAnimation();
    },
    methods: {
        initStage() {
            //基础参数
            this.container = this.$refs.container;
            this.camera = new THREE.PerspectiveCamera(
                70,
                window.innerWidth / window.innerHeight,
                0.01,
                20
            );
            this.scene = new THREE.Scene();

            // 定义 webglrender
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
            });
            this.renderer.setPixelRatio(window.devicePixelRatio);
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.renderer.xr.enabled = true;
            if (!document.getElementById("webgl")) {
                this.renderer.domElement.id = "webgl";
                this.container.appendChild(this.renderer.domElement);
            }
            document.body.appendChild(
                ARButton.createButton(this.renderer, {
                    requiredFeatures: ["hit-test"],
                })
            );

            // 定义操控

            // 添加全局环境光
            const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
            light.position.set(0, 1, 0);
            this.scene.add(light);

            // this.painter = new TubePainter();
            // this.painter.setSize(0.4);
            // this.painter.mesh.material = new THREE.MeshLambertMaterial({
            // color: 0x0189cbe,
            // });
            // this.painter.mesh.material.side = THREE.DoubleSide;
            // this.scene.add(this.painter.mesh);

            function onSelectEnd() {
                this.userData.isSelecting = false;
            }
            function onSelectStart() {
                this.userData.isSelecting = true;
                this.userData.skipFrames = 2;
            }

            let that = this;
            function onSelect() {
                that.addACyli();
            }

            // that.addACyli();

            this.controller = this.renderer.xr.getController(0);
            this.controller.addEventListener("select", onSelect);
            // this.controller.addEventListener("selectstart", onSelectStart);
            // this.controller.addEventListener("selectend", onSelectEnd);
            this.controller.userData.skipFrames = 0;
            this.scene.add(this.controller);

            // 自动缩放
            window.addEventListener("resize", this.onWindowResize);
            // this.onWindowResize();
        },
        addACyli() {
            const material = new THREE.MeshPhongMaterial({
                color: 0xffffff * Math.random(),
            });
            const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
            const mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(0, 0, -10);
            this.scene.add(mesh);
        },
        addCubes(controller) {
            this.group = new THREE.Group();
            // this.group.position.set(0, 0.1, 0);
            for (let i = 0; i < 10; i++) {
                const material = new THREE.MeshPhongMaterial({
                    color: 0x2399d3,
                });
                const geometry = new THREE.CylinderGeometry(
                    0.1,
                    0.1,
                    0.2,
                    32
                ).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
                const cube = new THREE.Mesh(geometry, material);
                cube.position.x = Math.random() * 4 - 2;
                cube.position.y = Math.random() * 4 - 2;
                cube.position.z = Math.random() * 4 - 2;
                cube.scale.set(0.5, 0.5, 0.5);
                // if (this.cursor)
                //     cube.position.setFromMatrixPosition(this.cursor.matrix);

                // cube.applyMatrix4(this.controller.matrixWorld);

                this.scene.add(cube);
            }
            // this.group.applyMatrix4(controller.matrixWorld);
            // this.scene.add(this.group);

            // setInterval(() => {
            //     console.log(this.camera.position);
            //     console.log(this.painter.mesh.position, 123);
            // }, 5000);
        },
        handleController(controller) {
            const userData = controller.userData;

            this.cursor
                .set(0, 0, -0.2)
                .applyMatrix4(this.controller.matrixWorld);

            // if (!this.group) {
            //     this.addCubes(controller);
            // }

            // this.group.position
            //     .set(
            //         this.camera.position.x,
            //         this.camera.position.y,
            //         this.camera.position.z
            //     )
            //     .applyMatrix4(controller.matrixWorld);

            // console.log(this.cursor);

            if (userData.isSelecting === true) {
                if (userData.skipFrames >= 0) {
                    // TODO(mrdoob) Revisit this

                    userData.skipFrames--;

                    this.painter.moveTo(this.cursor);
                } else {
                    this.painter.lineTo(this.cursor);
                    this.painter.update();
                }
            }
        },
        onWindowResize(event) {
            const width = window.innerWidth;
            const height = window.innerHeight;

            this.camera.aspect = width / height;
            this.camera.updateProjectionMatrix();

            this.renderer.setSize(width, height);
        },
        animate() {
            this.renderer.setAnimationLoop(this.render);
            // requestAnimationFrame(this.animate);
            // this.render();
        },
        render() {
            // this.handleController(this.controller);

            this.renderer.render(this.scene, this.camera);
        },
        addAnimation() {
            // 自旋转
            gsap.to(this.group.rotation, {
                y: -Math.PI * 2,
                x: 0.1,
                duration: 5,
                // yoyo: true,
                // repeat: -1,
                onUpdate: () => {
                    // this.renderer.toneMappingExposure = Math.pow(
                    //     this.params.exposure,
                    //     4.0
                    // );
                    // this.render();
                    // console.log(this.params.scene);
                },
            });
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.c-shader {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 0;
    .camra-data {
        .paLayout(0,0,150px,80px,10);
        background: rgba(255, 255, 255, 0.75);
        border-radius: 0 0 10px 0;
        color: #333;
        text-align: center;
        line-height: 20px;
    }
    .select-btn {
        // background-color: #fff;
        .paCenterBottom(2%,50%,auto,10);
    }
}
</style>
