Three.js 不在 Vue.js 中呈现

Question

我从vue init webpack my-project开始，我关心三个文件：main.js、AudioPlayer.vue 和 App.vue。 不知道为什么app.vue文件中没有渲染three.js代码。 我没有收到任何错误，所以我认为 AudioPlayer.vue 有问题。 这是在ready: function()中使用threejs的正确方法吗？

应用程序.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>

音频播放器.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>

主.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>

索引.html：

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

Answer 1

为 vue 1.x ready或为 vue 2.x mounted / created不是一种方法。 它们是实例生命周期钩子

您的代码需要更正如下（vue 1.x）：

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

在这里你可以看到你的代码（vue 2.x）： https ://codepen.io/anon/pen/vmVBde

Answer 2

您的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
})

您可以在此处查看我的示例存储库。

Answer 3

Vue 2 中的 Ready 或 Created 必须在方法对象之外。 它是一个函数的关键，它可以通过this.myFunction在方法对象中使用其他函数。 然后记住，如果你想要全局对象通过window.myObjectOrVariable引用它们

Answer 4

你永远不会导入threejs lib

Three.js 不在 Vue.js 中呈现

问题描述

4 个解决方案

解决方案1
1 2017-05-18 14:29:34

解决方案2
0 2016-12-20 05:55:42

解决方案3
0 2017-01-17 05:57:40

解决方案4
0 2017-11-26 20:13:52

Three.js 不在 Vue.js 中呈现

问题描述

4 个解决方案

解决方案1 1 2017-05-18 14:29:34

解决方案2 0 2016-12-20 05:55:42

解决方案3 0 2017-01-17 05:57:40

解决方案4 0 2017-11-26 20:13:52

解决方案1
1 2017-05-18 14:29:34

解决方案2
0 2016-12-20 05:55:42

解决方案3
0 2017-01-17 05:57:40

解决方案4
0 2017-11-26 20:13:52