Hey, I am a programmer but I have taken on the roll of using vue to generate planets for our game. So far everything is fine I make the planet in unity, bake the textures to polly, then I try and export it. I have to export it as a 3d max file then convert it to fbx. When I get it in 3d max it has no textures attached… Can you explain how I can keep the textures?!~! Or give me advice on what or how to do it. thank you
Game unity integration in vue js cli doesn’t work:
games.vue
<template>
<unity src="static/Build/lavory unity.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ref="myInstance"></unity>
</template>
<script>
import unity from 'vue-unity-webgl'
export default {
components: {
unity
},
data() {
return {
}
},
methods: {
getPiattaforma(value) {
},
getGameType(value) {
}
}
}
</script>
<style lang="scss">
</style>
`
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import jQuery from 'jquery';
import {fb} from './firebase'
import unity from './Unity.vue'
window.$ = window.jQuery = jQuery;
import 'popper.js';
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
import 'bootstrap';
import './assets/app.scss';
import VueSimpleAlert from "vue-simple-alert";
//import 'materialize-css'
//import 'materialize-css/dist/css/materialize.min.css'
Vue.component('Navbar', require('./components/Navbar.vue').default);
Vue.use(VueSimpleAlert);
Vue.use(BootstrapVue)
Vue.config.productionTip = false;
const install = Vue => {
Vue.component('unity', unity)
}
unity.install = install
// export const Unity = unity
export default unity
let app = '';
fb.auth().onAuthStateChanged(function(user) {
if(!app){
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});
unity.vue
<template>
<div class="webgl-content">
<div id="unity-container" v-bind:style="{ width: width + 'px', height: height + 'px' }"></div>
<div v-if="loaded == false">
<div class="unity-loader">
<div class="bar">
<div class="fill" v-bind:style="{ width: progress * 100 + '%'}"></div>
</div>
</div>
</div>
<div class="footer" v-if="hideFooter !== true">
<a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
props: ['src', 'module', 'width', 'height', 'externalProgress', 'unityLoader', 'hideFooter'],
name: 'UnityWebGL',
data () {
return {
gameInstance: null,
loaded: false,
progress: 0,
error: null
}
},
methods: {
fullscreen () {
this.gameInstance.SetFullscreen(1)
},
message(gameObject, method, param) {
if (param === null) {
param = ''
}
if (this.gameInstance !== null){
this.gameInstance.SendMessage(gameObject, method, param)
} else {
console.warn('vue-unity-webgl: you\'ve sent a message to the Unity content, but it wasn instantiated yet.')
}
}
},
beforeMount() {
if (!this.eventBus) {
this.eventBus = new Vue({
data: {
ready: false,
load: false
}
})
}
if (typeof UnityLoader === 'undefined' && this.unityLoader && !this.eventBus.load) {
const script = document.createElement('SCRIPT')
script.setAttribute('src', this.unityLoader)
script.setAttribute('async', '')
script.setAttribute('defer', '')
document.body.appendChild(script)
this.eventBus.load = true
script.onload = () => {
this.eventBus.ready = true
this.eventBus.$emit('onload')
}
} else {
this.eventBus.ready = true
this.eventBus.load = true
}
},
mounted () {
const instantiate = () => {
if (typeof UnityLoader === 'undefined') {
let error = 'The UnityLoader was not defined, please add the script tag ' +
'to the base html and embed the UnityLoader.js file Unity exported or use "unityLoader" attribute for path to UnityLoader.js.'
console.error(error)
this.error = error
return
}
if (this.src === null) {
let error = 'Please provice a path to a valid JSON in the "src" attribute.'
console.error(error)
this.error = error
return
}
let params = {}
if (this.externalProgress) {
params.onProgress = UnityProgress
} else {
params.onProgress = ((gameInstance, progress) => {
this.loaded = (progress === 1)
this.progress = progress
})
}
if (this.module) {
params.Module = this.module
}
this.gameInstance = UnityLoader.instantiate('unity-container', this.src, params)
}
if (this.eventBus.ready) {
instantiate()
} else {
this.eventBus.$on('onload', () => {
instantiate()
})
}
}
}
</script>
It signals the following error:
SCRIPT1002: SCRIPT1002: Syntax error
UnityLoader.js (1,1)
The UnityLoader was not defined, please add the script tag to the base html and embed the UnityLoader.js file Unity exported or use “unityLoader” attribute for path to UnityLoader.js.
the versions of the packages are as follows:
{
"name": "vue-shop",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.13.0",
"core-js": "^3.6.4",
"firebase": "^7.14.2",
"jquery": "^3.4.1",
"materialize-css": "^1.0.0-rc.2",
"node-ipc": "^9.1.1",
"popper.js": "^1.16.1",
"run": "^1.4.0",
"serve": "^11.3.0",
"vue": "^2.6.11",
"vue-fire": "^0.1.0",
"vue-router": "^3.1.6",
"vue-simple-alert": "^1.1.1",
"vue-unity-webgl": "^1.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-router": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
I tried in different ways but it doesn’t work, I only see the word “full screen” in the center of the page.
Do you have a solution?
Thank you in advance