Three.js not rendering in Vue.js

Question

I started off by doing vue init webpack my-project and I have three files that I'm concerned with: main.js, AudioPlayer.vue, and App.vue. I don't know why the three.js code is not rendering in the App.vue file. I'm not getting any errors so I'm thinking there is a problem with AudioPlayer.vue. Is this the correct way to use threejs in a ready: function() ?

App.vue:

<template>
<AudioPlayer></AudioPlayer>
</template>

<script>
import AudioPlayer from './components/AudioPlayer.vue'


export default {
  methods:{
    ready: function(){

    var scene, camera, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

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

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

      }
    }
  },
  components: {
    AudioPlayer
  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

AudioPlayer.vue:

<template>
  <div class='audioWrapper'>
  </div>
</template>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.audioWrapper{
  border:1px solid blue;
  width:100%;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

main.js:

<template>
  <div class='audioWrapper'>
  </div>
</template>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.audioWrapper{
  border:1px solid blue;
  width:100%;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>pr0g2</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

ready only works for vue 1.x, for 2.x, use created instead or mounted if you're touching the dom. — JJPandari
– JJPandari, Commented Dec 20, 2016 at 8:13
I tried created and mounted and the three.js code still does not show. I don't get any errors either. — oxxi
– oxxi, Commented Dec 20, 2016 at 16:48

tony19 · Accepted Answer · 2022-07-16 01:21:25Z

1

ready for vue 1.x or mounted/created for vue 2.x is not a methods. They are Instance Lifecycle Hooks

Your code needs to be corrected as follows (vue 1.x):

...
export default {
  ready: function(){    
      var scene, camera, renderer;
      var geometry, material, mesh;
...

Here you can see your code (vue 2.x): https://codepen.io/anon/pen/vmVBde

edited Jul 16, 2022 at 1:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2017 at 14:29

Pavel B

1541 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh · Accepted Answer · 2016-12-20 05:55:42Z

0

You should have following in your main.js:

require('es6-promise').polyfill()
import Vue from 'vue'
import App from './App'
const app = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App } // Object spread copying everything from App.vue
})

You can see my sample repo here.

answered Dec 20, 2016 at 5:55

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Comments

Dobromir Hristov · Accepted Answer · 2017-01-17 05:57:40Z

0

Ready or Created as in Vue 2 has to be outside of the methods object. Its a key to a function that could use other functions inside the methods object via this.myFunction. Then remember that if you want global objects refer to them via window.myObjectOrVariable

answered Jan 17, 2017 at 5:57

Dobromir Hristov

1,22910 silver badges16 bronze badges

Comments

Paul Melero · Accepted Answer · 2017-11-26 20:13:52Z

0

you are never importing threejs lib

answered Nov 26, 2017 at 20:13

Paul Melero

1,40517 silver badges16 bronze badges

Collectives™ on Stack Overflow

Three.js not rendering in Vue.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related