Three.jsがVue.jsでレンダリングされていません

私はvue init webpack my-projectをやって始めました。私が関心を持つ3つのファイルmain.js、AudioPlayer.vue、App.vueがあります。 three.jsコードがApp.vueファイルでレンダリングされない理由はわかりません。私はエラーがないので、AudioPlayer.vueに問題があると思っています。これはready: function()でthreejsを使用する正しい方法ですか？Three.jsがVue.jsでレンダリングされていません

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>

出典

2016-12-20 oxxi

何かエラーが発生しましたか？index.htmlを追加できますか？ – Saurabh

私はindex.html – oxxi

を追加しました。 'ready'はvue 1.xでのみ動作し、2.xでは' created'を使用します。domに触れている場合は 'mounted'を使用します。 –

あなたの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 
})

あなたは私のサンプルレポhereを見ることができます。

出典

2016-12-20 05:55:42 Saurabh

これは機能しませんでした。 – oxxi

Vue 2のように準備完了または作成は、メソッドオブジェクトの外になければなりません。 this.myFunctionを介してメソッドオブジェクト内の他の関数を使用できる関数のキーです。そして、あなたはグローバルオブジェクトがVUE 2.xのためVUE 1.xのためのwindow.myObjectOrVariable

出典

2017-01-17 05:57:40

readyまたはmounted/created経由でそれらを参照したい場合の方法ではないことを覚えておいてください。彼らはあなたのコードは（VUE 1.xでは）以下のように修正する必要があるInstance Lifecycle Hooks

、次のとおりです。ここで

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

あなたのコード（VUE 2.xのを）見ることができます：あなたはhttps://codepen.io/anon/pen/vmVBde

出典

2017-05-18 14:29:34

3JSのlibをインポートすることはありません

出典

2017-11-26 20:13:52

Three.jsがVue.jsでレンダリングされていません

答えて

関連する問題