w-threejs-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/.editorconfig +9 -0
  2. package/.eslintignore +3 -0
  3. package/.eslintrc.js +55 -0
  4. package/.jsdoc +25 -0
  5. package/LICENSE +21 -0
  6. package/README.md +39 -0
  7. package/SECURITY.md +5 -0
  8. package/babel.config.js +15 -0
  9. package/dist/w-threejs-vue.umd.js +26 -0
  10. package/dist/w-threejs-vue.umd.js.map +1 -0
  11. package/docs/examples/app.html +66 -0
  12. package/docs/examples/app.umd.js +31 -0
  13. package/docs/examples/app.umd.js.map +1 -0
  14. package/docs/examples/ex-AppBasicAutoRotateDeg.html +190 -0
  15. package/docs/examples/ex-AppBasicBackgroundColor.html +189 -0
  16. package/docs/examples/ex-AppBasicSize.html +170 -0
  17. package/docs/examples/ex-AppBasicUploadStl.html +237 -0
  18. package/docs/examples/ex-AppBasicUseAutoRotate.html +189 -0
  19. package/docs/examples/ex-AppCmCameraFar.html +191 -0
  20. package/docs/examples/ex-AppCmCameraFov.html +191 -0
  21. package/docs/examples/ex-AppCmCameraNear.html +191 -0
  22. package/docs/examples/ex-AppCmCameraOrthographicRatio.html +191 -0
  23. package/docs/examples/ex-AppCmCameraType.html +190 -0
  24. package/docs/examples/ex-AppCmGetCameraViewAngle.html +218 -0
  25. package/docs/examples/ex-AppCmSetCameraAzimuthAngle.html +190 -0
  26. package/docs/examples/ex-AppCmSetCameraPolarAngle.html +190 -0
  27. package/docs/examples/ex-AppCmSetCameraViewAngle.html +194 -0
  28. package/docs/examples/ex-AppHpHelperAxesLengthRatio.html +189 -0
  29. package/docs/examples/ex-AppHpHelperGridDensity.html +189 -0
  30. package/docs/examples/ex-AppHpHelperGridLengthRatio.html +189 -0
  31. package/docs/examples/ex-AppHpHelperGridPositionRatioZ.html +189 -0
  32. package/docs/examples/ex-AppHpUseHelperAxes.html +189 -0
  33. package/docs/examples/ex-AppHpUseHelperGrid.html +189 -0
  34. package/docs/examples/ex-AppLgLegnedBackgroundColor.html +189 -0
  35. package/docs/examples/ex-AppLgLegnedHeight.html +189 -0
  36. package/docs/examples/ex-AppLgLegnedHeightMax.html +189 -0
  37. package/docs/examples/ex-AppLtLightAmbientColor.html +189 -0
  38. package/docs/examples/ex-AppLtLightDirectionColor.html +191 -0
  39. package/docs/examples/ex-AppLtLightDirectionIntensity.html +191 -0
  40. package/docs/examples/ex-AppLtLightDirectionPos.html +191 -0
  41. package/docs/examples/ex-AppLtLightPointColor.html +192 -0
  42. package/docs/examples/ex-AppLtLightPointDecay.html +192 -0
  43. package/docs/examples/ex-AppLtLightPointDistance.html +192 -0
  44. package/docs/examples/ex-AppLtLightPointIntensity.html +192 -0
  45. package/docs/examples/ex-AppLtLightPointPoss.html +192 -0
  46. package/docs/examples/ex-AppLtUseLightAmbient.html +191 -0
  47. package/docs/examples/ex-AppLtUseLightDirection.html +191 -0
  48. package/docs/examples/ex-AppLtUseLightPoint.html +191 -0
  49. package/docs/examples/ex-AppMhGetMeshsInfor.html +198 -0
  50. package/docs/examples/ex-AppMhSetMeshColor.html +190 -0
  51. package/docs/examples/ex-AppMhSetMeshLabelText.html +190 -0
  52. package/docs/examples/ex-AppMhSetMeshLabelTextColor.html +190 -0
  53. package/docs/examples/ex-AppMhSetMeshLabelTextFontFamily.html +190 -0
  54. package/docs/examples/ex-AppMhSetMeshLabelTextFontSize.html +190 -0
  55. package/docs/examples/ex-AppMhSetMeshLabelVisible.html +198 -0
  56. package/docs/examples/ex-AppMhSetMeshVisible.html +198 -0
  57. package/docs/examples/ex-AppMuMenuIcons.html +217 -0
  58. package/docs/examples/ex-AppMuMenuTooltips.html +218 -0
  59. package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
  60. package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
  61. package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
  62. package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
  63. package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
  64. package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  65. package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
  66. package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
  67. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
  68. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
  69. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
  70. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
  71. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
  72. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
  73. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
  74. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
  75. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
  76. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
  77. package/docs/index.html +84 -0
  78. package/docs/module-WThreejsVue.html +216 -0
  79. package/docs/scripts/collapse.js +39 -0
  80. package/docs/scripts/commonNav.js +28 -0
  81. package/docs/scripts/linenumber.js +25 -0
  82. package/docs/scripts/nav.js +12 -0
  83. package/docs/scripts/polyfill.js +4 -0
  84. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  85. package/docs/scripts/prettify/lang-css.js +2 -0
  86. package/docs/scripts/prettify/prettify.js +28 -0
  87. package/docs/scripts/search.js +99 -0
  88. package/docs/styles/jsdoc.css +776 -0
  89. package/docs/styles/prettify.css +80 -0
  90. package/package.json +74 -0
  91. package/public/index.html +42 -0
  92. package/src/App.vue +574 -0
  93. package/src/AppBasicAutoRotateDeg.vue +102 -0
  94. package/src/AppBasicBackgroundColor.vue +101 -0
  95. package/src/AppBasicSize.vue +90 -0
  96. package/src/AppBasicUploadStl.vue +159 -0
  97. package/src/AppBasicUseAutoRotate.vue +101 -0
  98. package/src/AppCmCameraFar.vue +103 -0
  99. package/src/AppCmCameraFov.vue +103 -0
  100. package/src/AppCmCameraNear.vue +103 -0
  101. package/src/AppCmCameraOrthographicRatio.vue +103 -0
  102. package/src/AppCmCameraType.vue +102 -0
  103. package/src/AppCmGetCameraViewAngle.vue +135 -0
  104. package/src/AppCmSetCameraAzimuthAngle.vue +104 -0
  105. package/src/AppCmSetCameraPolarAngle.vue +104 -0
  106. package/src/AppCmSetCameraViewAngle.vue +105 -0
  107. package/src/AppHpHelperAxesLengthRatio.vue +101 -0
  108. package/src/AppHpHelperGridDensity.vue +101 -0
  109. package/src/AppHpHelperGridLengthRatio.vue +101 -0
  110. package/src/AppHpHelperGridPositionRatioZ.vue +101 -0
  111. package/src/AppHpUseHelperAxes.vue +101 -0
  112. package/src/AppHpUseHelperGrid.vue +101 -0
  113. package/src/AppLgLegnedBackgroundColor.vue +101 -0
  114. package/src/AppLgLegnedHeight.vue +101 -0
  115. package/src/AppLgLegnedHeightMax.vue +101 -0
  116. package/src/AppLtLightAmbientColor.vue +101 -0
  117. package/src/AppLtLightDirectionColor.vue +103 -0
  118. package/src/AppLtLightDirectionIntensity.vue +103 -0
  119. package/src/AppLtLightDirectionPos.vue +103 -0
  120. package/src/AppLtLightPointColor.vue +104 -0
  121. package/src/AppLtLightPointDecay.vue +104 -0
  122. package/src/AppLtLightPointDistance.vue +104 -0
  123. package/src/AppLtLightPointIntensity.vue +104 -0
  124. package/src/AppLtLightPointPoss.vue +104 -0
  125. package/src/AppLtUseLightAmbient.vue +103 -0
  126. package/src/AppLtUseLightDirection.vue +103 -0
  127. package/src/AppLtUseLightPoint.vue +103 -0
  128. package/src/AppMhGetMeshsInfor.vue +112 -0
  129. package/src/AppMhSetMeshColor.vue +104 -0
  130. package/src/AppMhSetMeshLabelText.vue +104 -0
  131. package/src/AppMhSetMeshLabelTextColor.vue +104 -0
  132. package/src/AppMhSetMeshLabelTextFontFamily.vue +104 -0
  133. package/src/AppMhSetMeshLabelTextFontSize.vue +104 -0
  134. package/src/AppMhSetMeshLabelVisible.vue +106 -0
  135. package/src/AppMhSetMeshVisible.vue +106 -0
  136. package/src/AppMuMenuIcons.vue +130 -0
  137. package/src/AppMuMenuTooltips.vue +131 -0
  138. package/src/components/WThreejsVue.vue +955 -0
  139. package/src/js/addStl.mjs +83 -0
  140. package/src/js/getCsrdFromMeshs.mjs +85 -0
  141. package/src/js/plot3d.mjs +1407 -0
  142. package/src/main.js +8 -0
  143. package/test/all.test.mjs +10 -0
  144. package/toolg/addVersion.mjs +4 -0
  145. package/toolg/cleanFolder.mjs +4 -0
  146. package/toolg/gDistApp.mjs +38 -0
  147. package/toolg/gDistRollupComps.mjs +22 -0
  148. package/toolg/gDocExams.mjs +47 -0
  149. package/toolg/gExtractHtml.mjs +159 -0
  150. package/toolg/modifyReadme.mjs +4 -0
  151. package/vue.config.js +21 -0
package/docs/examples/ex-AppLtLightPointColor.html ADDED
@@ -0,0 +1,192 @@
1
+ <!doctype html>
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
8
+ />
9
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10
+ <title>example for AppLtLightPointColor</title>
11
+
12
+ <!-- @babel/polyfill -->
13
+ <script
14
+ nomodule
15
+ src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
16
+ ></script>
17
+
18
+ <!-- vue -->
19
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
20
+
21
+ <!-- extractHtml已自動添加@babel/polyfill與vue -->
22
+
23
+ <!-- fontawesome -->
24
+ <link
25
+ href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
30
+ <link
31
+ href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
32
+ rel="stylesheet"
33
+ />
34
+
35
+ <!-- google, 各組件使用mdi/js故不需引用 -->
36
+ <link
37
+ _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
38
+ rel="stylesheet"
39
+ />
40
+ <link
41
+ _href="https://fonts.googleapis.com/css?family=Material+Icons"
42
+ rel="stylesheet"
43
+ />
44
+
45
+ <!-- w-threejs-vue -->
46
+ <script src="https://cdn.jsdelivr.net/npm/w-threejs-vue@1.0.0/dist/w-threejs-vue.umd.js"></script>
47
+
48
+ <!-- lodash -->
49
+ <script src="https://cdn.jsdelivr.net/npm/lodash@latest/lodash.min.js"></script>
50
+
51
+ <!-- wsemi -->
52
+ <script
53
+ src="https://cdn.jsdelivr.net/npm/wsemi@latest/dist/wsemi.umd.min.js"
54
+ ></script>
55
+
56
+ <!-- data -->
57
+ <script
58
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
59
+ ></script>
60
+ <script
61
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
62
+ ></script>
63
+
64
+ <!-- w-jsonview-tree -->
65
+ <script
66
+ src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
67
+ ></script>
68
+ <script>
69
+ let jv = window["w-jsonview-tree"];
70
+ </script>
71
+
72
+ <style>
73
+ .option-label {
74
+ position: absolute;
75
+ left: 10px;
76
+ top: -33px;
77
+ padding: 4px 20px 7px 20px;
78
+ border-left: 1px solid #ddd;
79
+ border-top: 1px solid #ddd;
80
+ border-right: 1px solid #ddd;
81
+ border-bottom: 1px solid #f6f6f6;
82
+ border-top-left-radius: 15px;
83
+ border-top-right-radius: 15px;
84
+ background: #f6f6f6;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body
89
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
90
+ >
91
+ <div id="app" style="padding:0px 30px;">
92
+ <div style="padding:20px;">
93
+ <div style="font-size:1.5rem;">lightPointColor</div>
94
+ <a
95
+ href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtLightPointColor.html"
96
+ target="_blank"
97
+ class="item-link"
98
+ >example</a>
99
+ <a
100
+ href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtLightPointColor.html"
101
+ target="_blank"
102
+ class="item-link"
103
+ >code</a>
104
+ </div>
105
+
106
+ <div style="padding:0px 20px;">
107
+ <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
108
+ <div style="position:relative;">
109
+ <div
110
+ style="position:absolute; right:2px; top:1px; z-index:1;"
111
+ v-if="!loading"
112
+ >
113
+ <button
114
+ style="margin:0px 3px 3px 0px;"
115
+ @click="setLightPointColor('#fcc')"
116
+ >set to #fcc</button>
117
+ <button
118
+ style="margin:0px 3px 3px 0px;"
119
+ @click="setLightPointColor('#fff')"
120
+ >set to #fff</button>
121
+ </div>
122
+ <w-threejs-vue :opt="opt" @init="loading=false"></w-threejs-vue>
123
+ </div>
124
+
125
+ <div style="padding-left:20px;">
126
+ <div
127
+ :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`"
128
+ >
129
+ <div style="padding-left:5px;">
130
+ <div id="optjson" style="font-size:10pt;"></div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <script>
139
+ //install
140
+ Vue.component("w-threejs-vue", window["w-threejs-vue"]);
141
+
142
+ //initialize
143
+ new Vue({
144
+ el: "#app",
145
+
146
+ data: function() {
147
+ return {
148
+ loading: true,
149
+ opt: {
150
+ width: 800,
151
+ height: 600,
152
+ items: [
153
+ {
154
+ url:
155
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl",
156
+ name: "Wheel Hub",
157
+ color: "rgba(214, 92, 92, 0.9)"
158
+ },
159
+ {
160
+ url:
161
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl",
162
+ name: "Ushape Connector",
163
+ color: "rgba(214, 214, 92, 0.9)"
164
+ }
165
+ ],
166
+ useLightDirection: false, //預設為true, 得關閉才能顯示效果
167
+ useLightAmbient: false, //預設為true, 得關閉才能顯示效果
168
+ useLightPoint: true, //預設為false
169
+ lightPointColor: "#fcc"
170
+ },
171
+ action: []
172
+ };
173
+ },
174
+ mounted: function() {
175
+ let vo = this;
176
+ vo.showOptJson();
177
+ },
178
+ computed: {},
179
+ methods: {
180
+ showOptJson: function() {
181
+ let vo = this;
182
+ jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
183
+ },
184
+ setLightPointColor: function(c) {
185
+ let vo = this;
186
+ vo.opt.lightPointColor = c;
187
+ }
188
+ }
189
+ });
190
+ </script>
191
+ </body>
192
+ </html>
package/docs/examples/ex-AppLtLightPointDecay.html ADDED
@@ -0,0 +1,192 @@
1
+ <!doctype html>
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
8
+ />
9
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10
+ <title>example for AppLtLightPointDecay</title>
11
+
12
+ <!-- @babel/polyfill -->
13
+ <script
14
+ nomodule
15
+ src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
16
+ ></script>
17
+
18
+ <!-- vue -->
19
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
20
+
21
+ <!-- extractHtml已自動添加@babel/polyfill與vue -->
22
+
23
+ <!-- fontawesome -->
24
+ <link
25
+ href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
30
+ <link
31
+ href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
32
+ rel="stylesheet"
33
+ />
34
+
35
+ <!-- google, 各組件使用mdi/js故不需引用 -->
36
+ <link
37
+ _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
38
+ rel="stylesheet"
39
+ />
40
+ <link
41
+ _href="https://fonts.googleapis.com/css?family=Material+Icons"
42
+ rel="stylesheet"
43
+ />
44
+
45
+ <!-- w-threejs-vue -->
46
+ <script src="https://cdn.jsdelivr.net/npm/w-threejs-vue@1.0.0/dist/w-threejs-vue.umd.js"></script>
47
+
48
+ <!-- lodash -->
49
+ <script src="https://cdn.jsdelivr.net/npm/lodash@latest/lodash.min.js"></script>
50
+
51
+ <!-- wsemi -->
52
+ <script
53
+ src="https://cdn.jsdelivr.net/npm/wsemi@latest/dist/wsemi.umd.min.js"
54
+ ></script>
55
+
56
+ <!-- data -->
57
+ <script
58
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
59
+ ></script>
60
+ <script
61
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
62
+ ></script>
63
+
64
+ <!-- w-jsonview-tree -->
65
+ <script
66
+ src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
67
+ ></script>
68
+ <script>
69
+ let jv = window["w-jsonview-tree"];
70
+ </script>
71
+
72
+ <style>
73
+ .option-label {
74
+ position: absolute;
75
+ left: 10px;
76
+ top: -33px;
77
+ padding: 4px 20px 7px 20px;
78
+ border-left: 1px solid #ddd;
79
+ border-top: 1px solid #ddd;
80
+ border-right: 1px solid #ddd;
81
+ border-bottom: 1px solid #f6f6f6;
82
+ border-top-left-radius: 15px;
83
+ border-top-right-radius: 15px;
84
+ background: #f6f6f6;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body
89
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
90
+ >
91
+ <div id="app" style="padding:0px 30px;">
92
+ <div style="padding:20px;">
93
+ <div style="font-size:1.5rem;">lightPointDecay</div>
94
+ <a
95
+ href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtLightPointDecay.html"
96
+ target="_blank"
97
+ class="item-link"
98
+ >example</a>
99
+ <a
100
+ href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtLightPointDecay.html"
101
+ target="_blank"
102
+ class="item-link"
103
+ >code</a>
104
+ </div>
105
+
106
+ <div style="padding:0px 20px;">
107
+ <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
108
+ <div style="position:relative;">
109
+ <div
110
+ style="position:absolute; right:2px; top:1px; z-index:1;"
111
+ v-if="!loading"
112
+ >
113
+ <button
114
+ style="margin:0px 3px 3px 0px;"
115
+ @click="setLightPointDecay(2)"
116
+ >set to 2</button>
117
+ <button
118
+ style="margin:0px 3px 3px 0px;"
119
+ @click="setLightPointDecay(1.7)"
120
+ >set to 1.7</button>
121
+ </div>
122
+ <w-threejs-vue :opt="opt" @init="loading=false"></w-threejs-vue>
123
+ </div>
124
+
125
+ <div style="padding-left:20px;">
126
+ <div
127
+ :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`"
128
+ >
129
+ <div style="padding-left:5px;">
130
+ <div id="optjson" style="font-size:10pt;"></div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <script>
139
+ //install
140
+ Vue.component("w-threejs-vue", window["w-threejs-vue"]);
141
+
142
+ //initialize
143
+ new Vue({
144
+ el: "#app",
145
+
146
+ data: function() {
147
+ return {
148
+ loading: true,
149
+ opt: {
150
+ width: 800,
151
+ height: 600,
152
+ items: [
153
+ {
154
+ url:
155
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl",
156
+ name: "Wheel Hub",
157
+ color: "rgba(214, 92, 92, 0.9)"
158
+ },
159
+ {
160
+ url:
161
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl",
162
+ name: "Ushape Connector",
163
+ color: "rgba(214, 214, 92, 0.9)"
164
+ }
165
+ ],
166
+ useLightDirection: false, //預設為true, 得關閉才能顯示效果
167
+ useLightAmbient: false, //預設為true, 得關閉才能顯示效果
168
+ useLightPoint: true, //預設為false
169
+ lightPointDecay: 1.7
170
+ },
171
+ action: []
172
+ };
173
+ },
174
+ mounted: function() {
175
+ let vo = this;
176
+ vo.showOptJson();
177
+ },
178
+ computed: {},
179
+ methods: {
180
+ showOptJson: function() {
181
+ let vo = this;
182
+ jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
183
+ },
184
+ setLightPointDecay: function(r) {
185
+ let vo = this;
186
+ vo.opt.lightPointDecay = r;
187
+ }
188
+ }
189
+ });
190
+ </script>
191
+ </body>
192
+ </html>
package/docs/examples/ex-AppLtLightPointDistance.html ADDED
@@ -0,0 +1,192 @@
1
+ <!doctype html>
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
8
+ />
9
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10
+ <title>example for AppLtLightPointDistance</title>
11
+
12
+ <!-- @babel/polyfill -->
13
+ <script
14
+ nomodule
15
+ src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
16
+ ></script>
17
+
18
+ <!-- vue -->
19
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
20
+
21
+ <!-- extractHtml已自動添加@babel/polyfill與vue -->
22
+
23
+ <!-- fontawesome -->
24
+ <link
25
+ href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
30
+ <link
31
+ href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
32
+ rel="stylesheet"
33
+ />
34
+
35
+ <!-- google, 各組件使用mdi/js故不需引用 -->
36
+ <link
37
+ _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
38
+ rel="stylesheet"
39
+ />
40
+ <link
41
+ _href="https://fonts.googleapis.com/css?family=Material+Icons"
42
+ rel="stylesheet"
43
+ />
44
+
45
+ <!-- w-threejs-vue -->
46
+ <script src="https://cdn.jsdelivr.net/npm/w-threejs-vue@1.0.0/dist/w-threejs-vue.umd.js"></script>
47
+
48
+ <!-- lodash -->
49
+ <script src="https://cdn.jsdelivr.net/npm/lodash@latest/lodash.min.js"></script>
50
+
51
+ <!-- wsemi -->
52
+ <script
53
+ src="https://cdn.jsdelivr.net/npm/wsemi@latest/dist/wsemi.umd.min.js"
54
+ ></script>
55
+
56
+ <!-- data -->
57
+ <script
58
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
59
+ ></script>
60
+ <script
61
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
62
+ ></script>
63
+
64
+ <!-- w-jsonview-tree -->
65
+ <script
66
+ src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
67
+ ></script>
68
+ <script>
69
+ let jv = window["w-jsonview-tree"];
70
+ </script>
71
+
72
+ <style>
73
+ .option-label {
74
+ position: absolute;
75
+ left: 10px;
76
+ top: -33px;
77
+ padding: 4px 20px 7px 20px;
78
+ border-left: 1px solid #ddd;
79
+ border-top: 1px solid #ddd;
80
+ border-right: 1px solid #ddd;
81
+ border-bottom: 1px solid #f6f6f6;
82
+ border-top-left-radius: 15px;
83
+ border-top-right-radius: 15px;
84
+ background: #f6f6f6;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body
89
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
90
+ >
91
+ <div id="app" style="padding:0px 30px;">
92
+ <div style="padding:20px;">
93
+ <div style="font-size:1.5rem;">lightPointDistance</div>
94
+ <a
95
+ href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtLightPointDistance.html"
96
+ target="_blank"
97
+ class="item-link"
98
+ >example</a>
99
+ <a
100
+ href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtLightPointDistance.html"
101
+ target="_blank"
102
+ class="item-link"
103
+ >code</a>
104
+ </div>
105
+
106
+ <div style="padding:0px 20px;">
107
+ <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
108
+ <div style="position:relative;">
109
+ <div
110
+ style="position:absolute; right:2px; top:1px; z-index:1;"
111
+ v-if="!loading"
112
+ >
113
+ <button
114
+ style="margin:0px 3px 3px 0px;"
115
+ @click="setLightPointDistance(0)"
116
+ >set to 0(no limit)</button>
117
+ <button
118
+ style="margin:0px 3px 3px 0px;"
119
+ @click="setLightPointDistance(12)"
120
+ >set to 12</button>
121
+ </div>
122
+ <w-threejs-vue :opt="opt" @init="loading=false"></w-threejs-vue>
123
+ </div>
124
+
125
+ <div style="padding-left:20px;">
126
+ <div
127
+ :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`"
128
+ >
129
+ <div style="padding-left:5px;">
130
+ <div id="optjson" style="font-size:10pt;"></div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <script>
139
+ //install
140
+ Vue.component("w-threejs-vue", window["w-threejs-vue"]);
141
+
142
+ //initialize
143
+ new Vue({
144
+ el: "#app",
145
+
146
+ data: function() {
147
+ return {
148
+ loading: true,
149
+ opt: {
150
+ width: 800,
151
+ height: 600,
152
+ items: [
153
+ {
154
+ url:
155
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl",
156
+ name: "Wheel Hub",
157
+ color: "rgba(214, 92, 92, 0.9)"
158
+ },
159
+ {
160
+ url:
161
+ "https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl",
162
+ name: "Ushape Connector",
163
+ color: "rgba(214, 214, 92, 0.9)"
164
+ }
165
+ ],
166
+ useLightDirection: false, //預設為true, 得關閉才能顯示效果
167
+ useLightAmbient: false, //預設為true, 得關閉才能顯示效果
168
+ useLightPoint: true, //預設為false
169
+ lightPointDistance: 12
170
+ },
171
+ action: []
172
+ };
173
+ },
174
+ mounted: function() {
175
+ let vo = this;
176
+ vo.showOptJson();
177
+ },
178
+ computed: {},
179
+ methods: {
180
+ showOptJson: function() {
181
+ let vo = this;
182
+ jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
183
+ },
184
+ setLightPointDistance: function(r) {
185
+ let vo = this;
186
+ vo.opt.lightPointDistance = r;
187
+ }
188
+ }
189
+ });
190
+ </script>
191
+ </body>
192
+ </html>