yadavaa81855
/
vue_pwa
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

added Earth with satellites

master
dspwithaheart 4 years ago
parent
3f95ca04f4
commit
a79f453051
15 changed files with 629 additions and 304 deletions
Unified View Show Diff Stats
  1. 15
    0
      package-lock.json
  2. 7
    1
      package.json
  3. BIN
      public/img/map/bump.jpg
  4. BIN
      public/img/map/map.jpg
  5. BIN
      public/img/map/night.jpg
  6. BIN
      public/img/map/spekular.jpg
  7. 2
    0
      public/index.html
  8. 189
    46
      src/App.vue
  9. 141
    239
      src/components/HelloWorld.vue
  10. 217
    0
      src/components/ThreeAnime.vue
  11. 2
    2
      src/main.js
  12. 0
    16
      src/plugins/vuetify.js
  13. 34
    0
      src/router/index.js
  14. 5
    0
      src/views/About.vue
  15. 17
    0
      src/views/Home.vue

+ 15
- 0
package-lock.json View File

"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"motion-sensors-polyfill": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/motion-sensors-polyfill/-/motion-sensors-polyfill-0.3.1.tgz",
"integrity": "sha1-+N/hhhS3GcddjEZpFKOTG/yMjR8="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
"neo-async": "^2.6.0" "neo-async": "^2.6.0"
} }
}, },
"three": {
"version": "0.116.1",
"resolved": "https://registry.npmjs.org/three/-/three-0.116.1.tgz",
"integrity": "sha512-l2JCMiA/lVZAuSrLWRYMalvpR+0j8hbIhCpfs4V6JFnw2+JQEQJ5HltNpfFr+9TDpQts1BhtcISehWf/xBGPvQ=="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz", "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
} }
} }
}, },
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588663962110&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
"integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k="
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",

+ 7
- 1
package.json View File

"dependencies": { "dependencies": {
"@mdi/font": "^3.6.95", "@mdi/font": "^3.6.95",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"motion-sensors-polyfill": "^0.3.1",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"roboto-fontface": "*", "roboto-fontface": "*",
"three": "^0.116.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuetify": "^2.2.11", "vuetify": "^2.2.11",
"vuex": "^3.1.3" "vuex": "^3.1.3"
}, },
"@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0", "@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-pwa": "~4.3.0", "@vue/cli-plugin-pwa": "~4.3.0",
"@vue/cli-plugin-router": "~4.3.0",
"@vue/cli-plugin-vuex": "~4.3.0", "@vue/cli-plugin-vuex": "~4.3.0",
"@vue/cli-service": "~4.3.0", "@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"vue-cli-plugin-vuetify": "~2.0.5", "vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0" "vuetify-loader": "^1.3.0"
}
},
"_id": "vue_pwa@0.1.0",
"readme": "ERROR: No README data found!"
} }

BIN
public/img/map/bump.jpg View File


BIN
public/img/map/map.jpg View File


BIN
public/img/map/night.jpg View File


BIN
public/img/map/spekular.jpg View File


+ 2
- 0
public/index.html View File

<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head> </head>
<body> <body>
<noscript> <noscript>

+ 189
- 46
src/App.vue View File

<template> <template>
<v-app>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
:color="color"
:expand-on-hover="expandOnHover"
:mini-variant="miniVariant"
:right="right"
:permanent="permanent"
:src="bg"
:absolute="absolute"
dark
app
>
<v-list dense>
<template v-for="item in items">
<v-row
v-if="item.heading"
:key="item.heading"
align="center"
>
<v-col cols="6">
<v-subheader v-if="item.heading">
{{ item.heading }}
</v-subheader>
</v-col>
<v-col
cols="6"
class="text-center"
>
<a
href="#!"
class="body-2 black--text"
>EDIT</a>
</v-col>
</v-row>
<v-list-group
v-else-if="item.children"
:key="item.text"
v-model="item.model"
:prepend-icon="item.model ? item.icon : item['icon-alt']"
append-icon=""
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(child, i) in item.children"
:key="i"
link
>
<v-list-item-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ child.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<!-- This in Case Items have no Children -->
<v-list-item
v-else
:key="item.text"
link
:to="item.href"
>
<v-list-item-action>
<v-icon @click.stop="fuckOff">{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-navigation-drawer>

<v-app-bar <v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app app
color="primary"
color="blue darken-3"
dark dark
> >
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>

<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>

<v-spacer></v-spacer>

<v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<!-- <v-toolbar-title
style="width: 300px"
class="ml-0 pl-4"
> >
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
<span class="hidden-sm-and-down">Google Contacts</span>
</v-toolbar-title> -->
<!-- <v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-apps</v-icon>
</v-btn> </v-btn>
<v-btn icon>
<v-icon>mdi-bell</v-icon>
</v-btn>
<v-btn
icon
large
>
<v-avatar
size="32px"
item
>
<v-img
src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
alt="Vuetify"
></v-img></v-avatar>
</v-btn> -->
</v-app-bar> </v-app-bar>

<v-content> <v-content>
<HelloWorld/>
<v-container class="px-4 py-0 fill-height" fluid>
<v-row class="fill-height">
<v-col>
<transition name="fade">
<router-view></router-view>
</transition>
</v-col>
</v-row>
</v-container>
</v-content> </v-content>
</v-app> </v-app>
</template> </template>


<script> <script>
import HelloWorld from './components/HelloWorld';

export default {
name: 'App',

components: {
HelloWorld,
},

data: () => ({
//
}),
};
</script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
// HelloWorld
},
props: {
source: String,
},
data: () => ({
// App Drawer properties
dialog: false,
drawer: null,
right: false,
permanent: false,
miniVariant: false,
expandOnHover: false,
background: true,
absolute: false,
// Items in the App Drawer
items: [
{ icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
{ icon: 'mdi-history', text: 'Frequently contacted' },
{ icon: 'mdi-content-copy', text: 'Duplicates' },
{
icon: 'mdi-chevron-up',
'icon-alt': 'mdi-chevron-down',
text: 'Labels',
model: true,
children: [
{ icon: 'mdi-plus', text: 'Create label' },
],
},
{
icon: 'mdi-chevron-up',
'icon-alt': 'mdi-chevron-down',
text: 'More',
model: false,
children: [
{ text: 'Import' },
{ text: 'Export' },
{ text: 'Print' },
{ text: 'Undo changes' },
{ text: 'Other contacts' },
],
},
{ icon: 'mdi-settings', text: 'Settings' },
{ icon: 'mdi-message', text: 'Send feedback' },
{ icon: 'mdi-help-circle', text: 'Help' },
{ icon: 'mdi-cellphone-link', text: 'App downloads' },
{ icon: 'mdi-keyboard', text: 'Go to the old version' },
],
}),
computed: {
bg () {
return this.background ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg' : undefined
},
},
methods: {
fuckOff() {
alert('fuckOff')
},
toggleTheme() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
},
}
}
</script>

+ 141
- 239
src/components/HelloWorld.vue View File

<template> <template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
app
>
<v-list dense>
<template v-for="item in items">
<v-row v-if="item.heading" :key="item.heading" align="center">
<v-col cols="6">
<v-subheader v-if="item.heading">
{{ item.heading }}
</v-subheader>
</v-col>
<v-col cols="6" class="text-center">
<a href="#!" class="body-2 black--text">EDIT</a>
</v-col>
</v-row>
<v-list-group
v-else-if="item.children"
:key="item.text"
v-model="item.model"
:prepend-icon="item.model ? item.icon : item['icon-alt']"
append-icon=""
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
/>
</v-col>

<v-col class="mb-4">
<h1 class="display-2 font-weight-bold mb-3">
Welcome to Vuetify
</h1>

<p class="subheading font-weight-regular">
For help and collaboration with other Vuetify developers,
<br>please join our online
<a
href="https://community.vuetifyjs.com"
target="_blank"
>Discord Community</a>
</p>
</v-col>

<v-col
class="mb-5"
cols="12"
>
<h2 class="headline font-weight-bold mb-3">
What's next?
</h2>

<v-row justify="center">
<a
v-for="(next, i) in whatsNext"
:key="i"
:href="next.href"
class="subheading mx-3"
target="_blank"
> >
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item v-for="(child, i) in item.children" :key="i" link>
<v-list-item-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ child.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-item v-else :key="item.text" link>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-navigation-drawer>
{{ next.text }}
</a>
</v-row>
</v-col>


<v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="red" dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-btn to="/about" text color="blue">
<span class="mr-2">Panda</span>
<!-- <v-icon>mdi-open-in-new</v-icon> -->
</v-btn>
<v-btn to="/home" text color="blue">
<span class="mr-2">Home</span>
<!-- <v-icon>mdi-open-in-new</v-icon> -->
</v-btn>
<v-btn to="/HelloWorld" text color="blue">
<span class="mr-2">HelloWorld</span>
<!-- <v-icon>mdi-open-in-new</v-icon> -->
</v-btn>
<v-btn to="/apply" text color="blue">
<span class="mr-2">Apply</span>
<!-- <v-icon>mdi-open-in-new</v-icon> -->
</v-btn>
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
<span class="hidden-sm-and-down">Google Contacts</span>
</v-toolbar-title>
<v-text-field
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="Search"
class="hidden-sm-and-down"
/>
<v-spacer />
<v-btn icon>
<v-icon>mdi-apps</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-bell</v-icon>
</v-btn>
<v-btn icon large>
<v-avatar size="32px" item>
<v-img
src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
alt="Vuetify"
/></v-avatar>
</v-btn>
</v-app-bar>
<v-content>
<!-- <About /> -->
</v-content>
<!-- <v-content>
<v-container
class="fill-height"
fluid
<v-col
class="mb-5"
cols="12"
> >
<v-row
align="center"
justify="center"
>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn
icon
large
href="https://codepen.io/johnjleider/pen/MNYLdL"
target="_blank"
v-on="on"
>
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
<h2 class="headline font-weight-bold mb-3">
Important Links
</h2>

<v-row justify="center">
<a
v-for="(link, i) in importantLinks"
:key="i"
:href="link.href"
class="subheading mx-3"
target="_blank"
>
{{ link.text }}
</a>
</v-row> </v-row>
</v-container>
</v-content> -->
<v-btn bottom color="pink" dark fab fixed right @click="dialog = !dialog">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-col>

<v-col
class="mb-5"
cols="12"
>
<h2 class="headline font-weight-bold mb-3">
Ecosystem
</h2>


<!-- // --------------------------------------------------------------------------------------- // -->
<v-dialog v-model="dialog" width="800px">
<v-card>
<v-card-title class="grey darken-2">
Create contact
</v-card-title>
<v-container>
<v-row class="mx-2">
<v-col class="align-center justify-space-between" cols="12">
<v-row align="center" class="mr-0">
<v-avatar size="40px" class="mx-3">
<img
src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
alt=""
/>
</v-avatar>
<v-text-field placeholder="Name" />
</v-row>
</v-col>
<v-col cols="6">
<v-text-field
prepend-icon="mdi-account-card-details-outline"
placeholder="Company"
/>
</v-col>
<v-col cols="6">
<v-text-field placeholder="Job title" />
</v-col>
<v-col cols="12">
<v-text-field prepend-icon="mdi-mail" placeholder="Email" />
</v-col>
<v-col cols="12">
<v-text-field
type="tel"
prepend-icon="mdi-phone"
placeholder="(000) 000 - 0000"
/>
</v-col>
<v-col cols="12">
<v-text-field prepend-icon="mdi-text" placeholder="Notes" />
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-btn text color="primary">More</v-btn>
<v-spacer />
<v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
<v-btn text @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
<v-row justify="center">
<a
v-for="(eco, i) in ecosystem"
:key="i"
:href="eco.href"
class="subheading mx-3"
target="_blank"
>
{{ eco.text }}
</a>
</v-row>
</v-col>
</v-row>
</v-container>
</template> </template>


<script> <script>
import About from "@/views/About";
export default {
name: "Apply",
components: {
About
},
props: {
source: String
},
data: () => ({
dialog: false,
drawer: null,
items: [
{ icon: "mdi-contacts", text: "Contacts" },
{ icon: "mdi-history", text: "Frequently contacted" },
{ icon: "mdi-content-copy", text: "Duplicates" },
{
icon: "mdi-chevron-up",
"icon-alt": "mdi-chevron-down",
text: "Labels",
model: true,
children: [{ icon: "mdi-plus", text: "Create label" }]
},
{
icon: "mdi-chevron-up",
"icon-alt": "mdi-chevron-down",
text: "More",
model: false,
children: [
{ text: "Import" },
{ text: "Export" },
{ text: "Print" },
{ text: "Undo changes" },
{ text: "Other contacts" }
]
},
{ icon: "mdi-settings", text: "Settings" },
{ icon: "mdi-message", text: "Send feedback" },
{ icon: "mdi-help-circle", text: "Help" },
{ icon: "mdi-cellphone-link", text: "App downloads" },
{ icon: "mdi-keyboard", text: "Go to the old version" }
]
})
};
export default {
name: 'HelloWorld',

data: () => ({
ecosystem: [
{
text: 'vuetify-loader',
href: 'https://github.com/vuetifyjs/vuetify-loader',
},
{
text: 'github',
href: 'https://github.com/vuetifyjs/vuetify',
},
{
text: 'awesome-vuetify',
href: 'https://github.com/vuetifyjs/awesome-vuetify',
},
],
importantLinks: [
{
text: 'Documentation',
href: 'https://vuetifyjs.com',
},
{
text: 'Chat',
href: 'https://community.vuetifyjs.com',
},
{
text: 'Made with Vuetify',
href: 'https://madewithvuejs.com/vuetify',
},
{
text: 'Twitter',
href: 'https://twitter.com/vuetifyjs',
},
{
text: 'Articles',
href: 'https://medium.com/vuetify',
},
],
whatsNext: [
{
text: 'Explore components',
href: 'https://vuetifyjs.com/components/api-explorer',
},
{
text: 'Select a layout',
href: 'https://vuetifyjs.com/layout/pre-defined',
},
{
text: 'Frequently Asked Questions',
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
},
],
}),
}
</script> </script>

+ 217
- 0
src/components/ThreeAnime.vue View File

<template>
<div>
<div id="console"></div>
<div id="container"></div>
</div>

</template>

<script>
import {
AbsoluteOrientationSensor
// RelativeOrientationSensor
} from 'motion-sensors-polyfill'
import * as THREE from 'three'
// import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
// import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const params = new URLSearchParams(new URL(window.location.href).search.slice(1))
// const relative = !!Number(params.get("relative"));
const coordinateSystem = params.get('coord')

// let container, camera, scene, renderer, model;
let container, camera, scene, renderer, cube, sensor
export default {
name: 'HelloWorld',
props: {
msg: String
},
data: function () {
return {
}
},
mounted: function () {
this.initScene()
if (navigator.permissions) {
// https://w3c.github.io/orientation-sensor/#model
Promise.all([navigator.permissions.query({ name: 'accelerometer' }),
navigator.permissions.query({ name: 'magnetometer' }),
navigator.permissions.query({ name: 'gyroscope' })])
.then(results => {
if (results.every(result => result.state === 'granted')) {
this.initSensor()
} else {
console.log('Permission to use sensor was denied.')
}
}).catch(err => {
console.log('Integration with Permissions API is not enabled, still try to start app.' + err)
this.initSensor()
})
} else {
console.log('No Permissions API, still try to start app.')
this.initSensor()
}

// this.renderScene();
this.animate()
const log = console.log
console.log = (message, ...rest) => {
const div = document.querySelector('#console')
div.innerText = message
log.call(console, message, ...rest)
}
console.log('mounted')
},
methods: {
calcPosFromLatLonRad(lat,lon,radius){
var phi = (90-lat)*(Math.PI/180);
var theta = (lon+180)*(Math.PI/180);
var x, y,z
x = -((radius) * Math.sin(phi)*Math.cos(theta));
z = ((radius) * Math.sin(phi)*Math.sin(theta));
y = ((radius) * Math.cos(phi));
console.log([x,y,z]);
return [x,y,z];
},
createRandomPoints() {
var meshes=[];
for(var i = 0 ; i < 10 ; i++){
var geometry = new THREE.SphereGeometry(0.025, 20, 20)
var material = new THREE.MeshBasicMaterial({
color: new THREE.Color('white')
})
var mesh = new THREE.Mesh(geometry, material)
meshes.push(mesh);
}
return meshes
},
initScene () {
container = document.getElementById('container')
// document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100)
camera.position.z = 10

scene = new THREE.Scene()
scene.background = new THREE.Color(0x00f0ff)

// var ambientLight = new THREE.AmbientLight(0x404040, 10);
// scene.add(ambientLight);
// camera.position.set( 0, 250, 1000 );
scene.add(camera)

scene.add(new THREE.AmbientLight(0xf0f0f0))
var light = new THREE.SpotLight(0xffffff, 1.5)
light.position.set(0, 10, 0)
light.angle = Math.PI * 0.2
light.castShadow = true
light.shadow.camera.near = 20
light.shadow.camera.far = 50
light.shadow.bias = -0.222
light.shadow.mapSize.width = 10
light.shadow.mapSize.height = 10
scene.add(light)

var helper = new THREE.GridHelper(2000, 1000)
helper.position.y = -20
helper.material.opacity = 0.7
helper.material.transparent = false
// helper.material.color = 0x0f00f0
scene.add(helper)

helper = new THREE.GridHelper(2000, 500)
helper.position.y = 20
helper.material.opacity = 1
helper.material.transparent = true
scene.add(helper)

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8)
renderer.shadowMap.enabled = true

var controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(0, 0, 0)
controls.update()
container.appendChild(renderer.domElement)
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshPhongMaterial({
map : THREE.ImageUtils.loadTexture('./img/map/night.jpg'),
bumpMap: new THREE.ImageUtils.loadTexture('./img/map/bump.jpg' ),
specularMap: new THREE.ImageUtils.loadTexture( './img/map/spekular.jpg' ),
})
var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

var latlons = [[40.7142700,-74.0059700], [52.5243700,13.4105300]];
var meshes= this.createRandomPoints()
for(var i = 0; i< meshes.length; i++ ){
scene.add(meshes[i])
var latlon=latlons[Math.floor(Math.random()*latlons.length)];

var latlonpoint = this.calcPosFromLatLonRad(latlon[0],latlon[1], 0.5);
meshes[i].position.set(latlonpoint[0],latlonpoint[1],latlonpoint[2]);
}

},
initSensor () {
const options = { frequency: 60, coordinateSystem }
console.log(JSON.stringify(options))
sensor = new AbsoluteOrientationSensor(options)
sensor.onreading = () => cube.quaternion.fromArray(sensor.quaternion).inverse()
sensor.onerror = (event) => {
if (event.error.name === 'NotReadableError') {
console.log('Sensor is not available.')
}
}
sensor.start()
console.log(sensor)
},
// renderScene() {
// requestAnimationFrame(this.renderScene);
// camera.lookAt(scene.position);
// renderer.render(scene, camera);
// }
animate () {
requestAnimationFrame(this.animate)

// Rotate cube (Change values to change speed)
// cube.rotation.x += 0.01
// cube.position.z -= 0.001

renderer.render(scene, camera)
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
/* .garden {
position: relative;
width : 200px;
height: 200px;
border: 5px solid #CCC;
border-radius: 10px;
}

.ball {
position: absolute;
top : 90px;
left : 90px;
width : 20px;
height: 20px;
background: green;
border-radius: 100%;
} */

</style>

+ 2
- 2
src/main.js View File

import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import './registerServiceWorker' import './registerServiceWorker'
import router from './router'
import store from './store' import store from './store'
import vuetify from './plugins/vuetify'; import vuetify from './plugins/vuetify';
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@mdi/font/css/materialdesignicons.css'


Vue.config.productionTip = false Vue.config.productionTip = false


new Vue({ new Vue({
router,
store, store,
vuetify, vuetify,
render: h => h(App) render: h => h(App)

+ 0
- 16
src/plugins/vuetify.js View File

Vue.use(Vuetify); Vue.use(Vuetify);


export default new Vuetify({ export default new Vuetify({
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: '#ee44aa',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
},
},
},
}); });

+ 34
- 0
src/router/index.js View File

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/three',
name: 'ThreeAnime',
component: () => import(/* webpackChunkName: "about" */ '../components/ThreeAnime.vue')
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

export default router

+ 5
- 0
src/views/About.vue View File

<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

+ 17
- 0
src/views/Home.vue View File

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
name: 'Home',
components: {
// HelloWorld
}
}
</script>

Write Preview
Loading…
Cancel
Save