Vue.jsでthree.jsする - monman53のぶろぐ

Vue.jsとthree.jsを一緒にやりたいときの雛形．
<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
       <title>My first three.js app on Vue.js</title>
       <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
        var app = new Vue({
            el: "#app",
            data: {
                uniforms: {
                    f: {type: "f", value: 50},
                },
                scene:      undefined,
                camera:     undefined,
                renderer:   undefined,
                cube:       undefined,
            },
            mounted: function() {

                this.scene = new THREE.Scene();
                this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
                this.renderer = new THREE.WebGLRenderer();

                document.body.appendChild(this.renderer.domElement);

                var geometry = new THREE.BoxGeometry(1, 1, 1);
                var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

                this.cube = new THREE.Mesh(geometry, material);
                this.scene.add(this.cube);

                this.camera.position.z = 5;

                this.animate();
            },
            methods: {
                animate: function() {
                    requestAnimationFrame(this.animate);
                    this.cube.rotation.x += 0.01;
                    this.cube.rotation.y += 0.01;
                    this.renderer.render(this.scene, this.camera);
                }
            },
        });
        </script>
    </body>
</html>