From 0c0b0ac1aec13018ca2063e565341f3340462052 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Tue, 5 Mar 2019 22:49:36 +0900 Subject: [PATCH 01/12] install threejs --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 36a3526..f4e5141 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10467,6 +10467,11 @@ "neo-async": "^2.6.0" } }, + "three": { + "version": "0.102.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.102.1.tgz", + "integrity": "sha512-btHBdww/Es4vdBkB2GjTE9mpj0vy8tgtxkX7ne7uxySXV8zoGxWJv1N88BydxnCqvAfmD4ZUTqPeESO7oDgeOQ==" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index ce43fb7..1a9b045 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "axios": "^0.18.0", + "three": "^0.102.1", "vue": "^2.6.6", "vue-router": "^3.0.1", "vuex": "^3.0.1" From ddb3dd393a299d758794a39ef08b73fef7f0eaca Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Tue, 5 Mar 2019 23:09:35 +0900 Subject: [PATCH 02/12] install tween.js --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index f4e5141..24dd60b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -928,6 +928,11 @@ } } }, + "@tweenjs/tween.js": { + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-17.3.0.tgz", + "integrity": "sha512-SPkhNj9/wGfbdX2C3B3KhttLQ4iesd+Ny8Dv1RnqF1MFUIqsZz/OJVLzJEHSEl7zheNx70dvqrwfbCFDQ0sWBw==" + }, "@types/q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz", diff --git a/package.json b/package.json index 1a9b045..3559635 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "@tweenjs/tween.js": "^17.3.0", "axios": "^0.18.0", "three": "^0.102.1", "vue": "^2.6.6", From d423f2bc158f9a2df1ada35ca8d9cb0e9d2072fc Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 04:15:39 +0900 Subject: [PATCH 03/12] install orbitcontrols --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 24dd60b..324e970 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10477,6 +10477,11 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.102.1.tgz", "integrity": "sha512-btHBdww/Es4vdBkB2GjTE9mpj0vy8tgtxkX7ne7uxySXV8zoGxWJv1N88BydxnCqvAfmD4ZUTqPeESO7oDgeOQ==" }, + "three-orbitcontrols": { + "version": "2.102.1", + "resolved": "https://registry.npmjs.org/three-orbitcontrols/-/three-orbitcontrols-2.102.1.tgz", + "integrity": "sha512-mp5qc5mooCtjgSloMFzIEI2VQVkvBDWDMYtbxY3TFB/BCCYpR6NV7/dD5+EUyzR90/a9H356s9QR+2PhH48f6w==" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index 3559635..394fa0c 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@tweenjs/tween.js": "^17.3.0", "axios": "^0.18.0", "three": "^0.102.1", + "three-orbitcontrols": "^2.102.1", "vue": "^2.6.6", "vue-router": "^3.0.1", "vuex": "^3.0.1" From cd61e8d6d2ce26bee99c6a3ae4cca243f4e27efe Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 04:16:22 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88?= =?UTF-8?q?=E3=81=9A=E7=AB=8B=E6=96=B9=E4=BD=93=E3=81=8C=E5=87=BA=E3=82=8B?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 70 +++++++++++++++++++++++++++++++++++ src/views/Home.vue | 15 ++++++-- 2 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 src/components/Background.vue diff --git a/src/components/Background.vue b/src/components/Background.vue new file mode 100644 index 0000000..8beb9d3 --- /dev/null +++ b/src/components/Background.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue index 7d4b5e2..9186611 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,18 +1,25 @@ From a6c9776a71bab1c2c2b3b07be5e167c0c0124745 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 05:18:47 +0900 Subject: [PATCH 05/12] =?UTF-8?q?=E3=81=84=E3=81=84=E6=84=9F=E3=81=98?= =?UTF-8?q?=E3=81=AB=E5=9B=9E=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 11 ++++++++--- src/views/Home.vue | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Background.vue b/src/components/Background.vue index 8beb9d3..b0e98fe 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -6,7 +6,7 @@ import * as THREE from 'three'; import OrbitControls from 'three-orbitcontrols'; -import * as TWEEN from '@tweenjs/tween.js'; +// import * as TWEEN from '@tweenjs/tween.js'; export default { props: ['isActive'], @@ -37,12 +37,17 @@ export default { this.tree = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), - new THREE.MeshPhongMaterial({color: 0x66B6FF,specular: 0xffffff}) + new THREE.MeshBasicMaterial({ color: 0x66B6FF, specular: 0xffffff }), ); this.tree.position.set(0, 0, 0); this.scene.add(this.tree); this.control = new OrbitControls(this.camera); + this.control.autoRotate = true; + this.control.autoRotateSpeed = 3; + this.control.enableKeys = false; + this.control.enablePan = false; + this.control.enableZoom = false; this.animate(); }, @@ -51,7 +56,7 @@ export default { requestAnimationFrame(this.animate); this.control.update(); this.renderer.render(this.scene, this.camera); - } + }, }, }; diff --git a/src/views/Home.vue b/src/views/Home.vue index 9186611..5108283 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -18,7 +18,7 @@ export default { return { // もっといい名前ありそう showedContributionTree: false, - } + }; }, }; From 5091f52d1d7c3bc3df243b35bd43ea69cbfa6ac5 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 06:28:57 +0900 Subject: [PATCH 06/12] =?UTF-8?q?=E7=AB=B9=E3=81=AE=E8=89=B2=E3=81=AF?= =?UTF-8?q?=E7=B7=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Background.vue b/src/components/Background.vue index b0e98fe..03ac6ca 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -37,7 +37,7 @@ export default { this.tree = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), - new THREE.MeshBasicMaterial({ color: 0x66B6FF, specular: 0xffffff }), + new THREE.MeshBasicMaterial({ color: 'green' }), ); this.tree.position.set(0, 0, 0); this.scene.add(this.tree); From a1021284bf48163c28457c0d624ce13bce0df123 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 06:30:01 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=E7=B8=A6=E6=96=B9=E5=90=91=E3=81=AE?= =?UTF-8?q?=E5=9B=9E=E8=BB=A2=E3=81=AB=E5=88=B6=E9=99=90=E3=82=92=E3=81=A4?= =?UTF-8?q?=E3=81=91=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Background.vue b/src/components/Background.vue index 03ac6ca..511c84f 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -48,6 +48,8 @@ export default { this.control.enableKeys = false; this.control.enablePan = false; this.control.enableZoom = false; + this.control.minPolarAngle = Math.PI / 3; + this.control.maxPolarAngle = Math.PI / 3 * 2; this.animate(); }, From b62ff8856fd55709dc42ea9e21b1571ed7002e92 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 06:30:39 +0900 Subject: [PATCH 08/12] =?UTF-8?q?=E3=82=A2=E3=82=AF=E3=83=86=E3=82=A3?= =?UTF-8?q?=E3=83=96=E3=81=A7=E3=81=AA=E3=81=84=E3=81=A8=E3=81=8D=E3=83=9E?= =?UTF-8?q?=E3=82=A6=E3=82=B9=E3=81=AE=E5=8B=95=E3=81=8D=E3=82=92=E7=84=A1?= =?UTF-8?q?=E8=A6=96=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Background.vue b/src/components/Background.vue index 511c84f..2e191b3 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -48,6 +48,7 @@ export default { this.control.enableKeys = false; this.control.enablePan = false; this.control.enableZoom = false; + this.control.enabled = this.isActive; this.control.minPolarAngle = Math.PI / 3; this.control.maxPolarAngle = Math.PI / 3 * 2; @@ -60,6 +61,11 @@ export default { this.renderer.render(this.scene, this.camera); }, }, + watch: { + isActive(val) { + this.control.enabled = val; + }, + }, }; From 83c11242ac9ec75b555fd685052f9e4bb4e0ce7d Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 06:33:18 +0900 Subject: [PATCH 09/12] =?UTF-8?q?=E6=8F=8F=E7=94=BB=E9=96=A2=E6=95=B0?= =?UTF-8?q?=E3=81=AE=E5=90=8D=E5=89=8D=E3=82=92update=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Background.vue b/src/components/Background.vue index 2e191b3..41d9b86 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -52,11 +52,11 @@ export default { this.control.minPolarAngle = Math.PI / 3; this.control.maxPolarAngle = Math.PI / 3 * 2; - this.animate(); + this.update(); }, methods: { - animate() { - requestAnimationFrame(this.animate); + update() { + requestAnimationFrame(this.update); this.control.update(); this.renderer.render(this.scene, this.camera); }, From 521b118e8d1ce277099ef17e4ee6f00c508c2ff7 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 19:46:15 +0900 Subject: [PATCH 10/12] =?UTF-8?q?!=E3=81=AE=E3=81=82=E3=81=A8=E3=81=AB?= =?UTF-8?q?=E3=82=B9=E3=83=9A=E3=83=BC=E3=82=B9=E3=81=8C=E3=81=82=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E4=B8=8D=E8=87=AA=E7=84=B6=E3=81=A0=E3=81=A3=E3=81=9F?= =?UTF-8?q?=E3=81=AE=E3=81=A7=E6=B6=88=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 5108283..12a1ead 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,6 +1,6 @@ From f8605fd5a20de7632b439c2eee02d71122869c4e Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 19:51:41 +0900 Subject: [PATCH 11/12] =?UTF-8?q?=E7=AB=B9=E3=82=92=E5=86=86=E6=9F=B1?= =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/Background.vue b/src/components/Background.vue index 41d9b86..1cb3906 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -11,13 +11,22 @@ import OrbitControls from 'three-orbitcontrols'; export default { props: ['isActive'], data() { + const scene = new THREE.Scene(); + scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0)); + + const tree = new THREE.Mesh( + new THREE.CylinderGeometry(2, 2, 100), + new THREE.MeshBasicMaterial({ color: 'green' }), + ); + tree.position.set(0, -50, 0); + scene.add(tree); + return { camera: null, - renderer: null, - scene: null, - tree: null, - light: null, control: null, + renderer: null, + scene, + tree, }; }, mounted() { @@ -26,22 +35,10 @@ export default { this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); this.renderer.setSize(width, height); - this.scene = new THREE.Scene(); - - this.light = new THREE.AmbientLight(0xFFFFFF, 1.0); - this.scene.add(this.light); - this.camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000); this.camera.position.set(0, 0, 100); this.scene.add(this.camera); - this.tree = new THREE.Mesh( - new THREE.BoxGeometry(50, 50, 50), - new THREE.MeshBasicMaterial({ color: 'green' }), - ); - this.tree.position.set(0, 0, 0); - this.scene.add(this.tree); - this.control = new OrbitControls(this.camera); this.control.autoRotate = true; this.control.autoRotateSpeed = 3; From 8889423bce4233f2c6590df6b648a4ab90a45252 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Thu, 7 Mar 2019 19:52:16 +0900 Subject: [PATCH 12/12] =?UTF-8?q?helper=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Background.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Background.vue b/src/components/Background.vue index 1cb3906..2f9951c 100644 --- a/src/components/Background.vue +++ b/src/components/Background.vue @@ -20,6 +20,7 @@ export default { ); tree.position.set(0, -50, 0); scene.add(tree); + if (process.env.NODE_ENV === 'development') scene.add(new THREE.AxisHelper(1000)); return { camera: null,