Three.js 不在 Vue.js 中呈现答案

【问题标题】：Three.js not rendering in Vue.jsThree.js 不在 Vue.js 中呈现
【发布时间】：2017-05-05 05:30:55
【问题描述】：

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

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>

【问题讨论】：

您是否遇到任何错误，您可以添加您的 index.html 吗？
我添加了 index.html
ready 仅适用于 vue 1.x，对于 2.x，请改用 created 或 mounted 如果您正在接触 dom。
我尝试了created 和mounted 并且three.js 代码仍然没有显示。我也没有收到任何错误。

标签： javascript node.js three.js webpack vue.js

【解决方案1】：

ready 用于 vue 1.x 或 mounted/created 用于 vue 2.x 不是方法。他们是Instance Lifecycle Hooks

你的代码需要修正如下（vue 1.x）：

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

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

【讨论】：

【解决方案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
})

您可以查看我的示例 repo here。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你永远不会导入threejs lib

【讨论】：