Skip to content

Commit ea3cd5d

Browse files
fritxfritx
committed
feat: add vue-threejs demo of orbit-controls & movement-system
1 parent fbe0ceb commit ea3cd5d

File tree

5 files changed

+147
-0
lines changed

5 files changed

+147
-0
lines changed

‎public/code/index.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
- vue-threejs-movement.js
2+
- vue-threejs-orbit-controls.js
13
- vue-at-gh119.js
24
- vue-at-element-2.x-input.js
35
- vue-at-element-1.x-input.js

‎public/code/vue-threejs-movement.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
await loadJs([
2+
'https://unpkg.com/[email protected]/dist/vue.min.js',
3+
// 'https://unpkg.com/[email protected]/build/three.min.js',
4+
'https://unpkg.com/[email protected]/build/three.min.js',
5+
])
6+
7+
// await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.min.js')
8+
await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.js')
9+
10+
appendCss(`
11+
#mountNode { overflow:hidden; background-color:black }
12+
`)
13+
14+
Vue.use(VueThreejs)
15+
16+
let Cube = Vue.extend({
17+
props: { size: Number, texture: String },
18+
template: `
19+
<mesh name="Cube" v-bind="$attrs">
20+
<geometry type="Box" :args="[size, size, size]"></geometry>
21+
<material type="MeshBasic">
22+
<texture :url="\`https://fritx.github.io/vue-threejs/static/textures/\${texture}.png\`"></texture>
23+
</material>
24+
</mesh>
25+
`,
26+
})
27+
28+
let App = {
29+
components: { Cube },
30+
template: `
31+
<div class="container">
32+
<renderer :size="bg.size">
33+
<scene>
34+
<orbit-controls :position="{ x: 9, y: 21, z: 20 }" :rotation="{ x: 2, y: 0, z: 3 }">
35+
<camera></camera>
36+
</orbit-controls>
37+
<light :hex="0xefefff" :intensity="2" :position="{ x: 50, y: 50, z: 50 }"></light>
38+
<light :hex="0xefefff" :intensity="2" :position="{ x: -50, y: -50, z: -50 }"></light>
39+
<div :key="ui.sysKey">
40+
<movement-system>
41+
<mass-object :rv0="{ x: 2, y: 2 }" :v0="{ x: 10 }"
42+
:f="{ x: -3, y: -2 }" :m="1">
43+
<cube texture="cobblestone" :size="1"></cube>
44+
</mass-object>
45+
<mass-object :rv0="{ x: 2, z: 2 }" :v0="{ z: 20 }"
46+
:f="{ y: -1, z: -8 }" :m="1.2">
47+
<cube texture="diamond" :size="1.2"></cube>
48+
</mass-object>
49+
<movement-object :rv0="{ x: 2, z: 2 }" :v0="{ x: 15, z: -20 }"
50+
:a="{ x: -6, y: .5, z: 6 }">
51+
<cube texture="redwool" :size="1.1"></cube>
52+
</movement-object>
53+
</movement-system>
54+
</div>
55+
</scene>
56+
</renderer>
57+
</div>
58+
`,
59+
data() {
60+
return {
61+
bg: {
62+
sysKey: 0,
63+
// size: { w: window.innerWidth, h: window.innerHeight },
64+
size: { w: mountNode.clientWidth, h: mountNode.clientHeight },
65+
},
66+
ui: { sysKey: 0 }
67+
}
68+
},
69+
mounted() {
70+
mountNode.addEventListener('resize', this.handleResize)
71+
this.timerId = setInterval(() => {
72+
this.ui.sysKey++
73+
}, 9000)
74+
},
75+
beforeDestroy() {
76+
if (this.timerId) clearInterval(this.timerId)
77+
mountNode.removeEventListener('resize', this.handleResize)
78+
},
79+
methods: {
80+
handleResize: _.debounce(triggerPreview, 2000)
81+
}
82+
}

‎public/code/vue-threejs-movement.js.png‎

14 KB
Loading

‎public/code/vue-threejs-orbit-controls.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
await loadJs([
2+
'https://unpkg.com/[email protected]/dist/vue.min.js',
3+
// 'https://unpkg.com/[email protected]/build/three.min.js',
4+
'https://unpkg.com/[email protected]/build/three.min.js',
5+
])
6+
7+
// await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.min.js')
8+
await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.js')
9+
10+
appendCss(`
11+
#mountNode { overflow:hidden; background-color:black }
12+
`)
13+
14+
Vue.use(VueThreejs)
15+
16+
// Creating a scene - Three.js Documentation
17+
// https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
18+
let App = {
19+
template: `
20+
<div class="container">
21+
<renderer :size="bg.size">
22+
<scene>
23+
<orbit-controls :position="{ x: 1.5, y: 3.5, z: 3 }"
24+
:rotation="{ x: 2, y: 0, z: 3 }">
25+
<camera></camera>
26+
</orbit-controls>
27+
<mesh name="Cube" :rotation="ui.rotation">
28+
<geometry type="Box" :args="[1, 1, 1]"></geometry>
29+
<material type="MeshBasic">
30+
<texture :url="\`https://fritx.github.io/vue-threejs/static/textures/diamond.png\`"></texture>
31+
</material>
32+
</mesh>
33+
<animation :fn="animate"></animation>
34+
</scene>
35+
</renderer>
36+
</div>
37+
`,
38+
data() {
39+
return {
40+
bg: {
41+
sysKey: 0,
42+
// size: { w: window.innerWidth, h: window.innerHeight },
43+
size: { w: mountNode.clientWidth, h: mountNode.clientHeight },
44+
},
45+
ui: {
46+
rotation: { x: 0, y: 0, z: 0 },
47+
}
48+
}
49+
},
50+
mounted() {
51+
mountNode.addEventListener('resize', this.handleResize)
52+
},
53+
beforeDestroy() {
54+
mountNode.removeEventListener('resize', this.handleResize)
55+
},
56+
methods: {
57+
animate() {
58+
this.ui.rotation.x += 0.01
59+
this.ui.rotation.y += 0.01
60+
},
61+
handleResize: _.debounce(triggerPreview, 2000)
62+
}
63+
}

‎public/code/vue-threejs-orbit-controls.js.png‎

36.8 KB
Loading

0 commit comments

Comments
 (0)