w-threejs-vue 1.0.0

package/src/AppLtLightPointPoss.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">lightPointPoss</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtLightPointPoss.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtLightPointPoss.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <button style="margin:0px 3px 3px 0px;" @click="setLightPointPoss([[5,5,5],[-5,5,5],[5,-5,5]])">set to [[5,5,5],[-5,5,5],[5,-5,5]]</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setLightPointPoss([[3,3,3]])">set to [[3,3,3]]</button>
+                    </div>
+                    <WThreejsVue
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+                useLightDirection: false, //預設為true, 得關閉才能顯示效果
+                useLightAmbient: false, //預設為true, 得關閉才能顯示效果
+                useLightPoint: true, //預設為false
+                lightPointPoss: [[3, 3, 3]],
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        setLightPointPoss: function(poss) {
+            let vo = this
+            vo.opt.lightPointPoss = poss
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppLtUseLightAmbient.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">useLightAmbient</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtUseLightAmbient.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtUseLightAmbient.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightAmbient(true)">show</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightAmbient(false)">hide</button>
+                    </div>
+                    <WThreejsVue
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+                useLightPoint: false, //預設為false
+                useLightDirection: false, //預設為true, 得關閉才能顯示效果
+                useLightAmbient: true,
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        setUseLightAmbient: function(b) {
+            let vo = this
+            vo.opt.useLightAmbient = b
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppLtUseLightDirection.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">useLightDirection</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtUseLightDirection.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtUseLightDirection.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightDirection(true)">show</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightDirection(false)">hide</button>
+                    </div>
+                    <WThreejsVue
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+                useLightAmbient: false, //預設為true, 得關閉才能顯示效果
+                useLightPoint: false, //預設為false
+                useLightDirection: true,
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        setUseLightDirection: function(b) {
+            let vo = this
+            vo.opt.useLightDirection = b
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppLtUseLightPoint.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">useLightPoint</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppLtUseLightPoint.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppLtUseLightPoint.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightPoint(true)">show</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseLightPoint(false)">hide</button>
+                    </div>
+                    <WThreejsVue
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+                useLightDirection: false, //預設為true, 得關閉才能顯示效果
+                useLightAmbient: false, //預設為true, 得關閉才能顯示效果
+                useLightPoint: true, //預設為false
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        setUseLightPoint: function(b) {
+            let vo = this
+            vo.opt.useLightPoint = b
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppMhGetMeshsInfor.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">getMeshsInfor</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppMhGetMeshsInfor.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppMhGetMeshsInfor.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <div style="text-align:right;">
+                            <button style="margin:0px 3px 3px 0px;" @click="getMeshsInfor()">getMeshsInfor</button>
+                        </div>
+                        <div style="margin:0px 0px 0px 1px; padding:5px; font-size:0.75rem; color:#000; background:#eee;" v-if="c">
+                            <pre style="padding:0px; margin:0px;">{{c}}</pre>
+                        </div>
+                    </div>
+                    <WThreejsVue
+                        ref="thr"
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'c': '',
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        getMeshsInfor: function() {
+            let vo = this
+            try {
+                let r = vo.$refs.thr.getInst().getMeshsInfor()
+                let c = JSON.stringify(r, null, 2)
+                console.log('getMeshsInfor', r, c)
+                vo.c = c
+            }
+            catch (err) {}
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppMhSetMeshColor.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">setMeshColor</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppMhSetMeshColor.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppMhSetMeshColor.html" target="_blank" class="item-link">code</a>
+        </div>
+
+        <div style="padding:0px 20px;">
+
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+
+                <div style="position:relative;">
+                    <div style="position:absolute; right:2px; top:1px; z-index:1;" v-if="!loading">
+                        <button style="margin:0px 3px 3px 0px;" @click="setMeshColor(0,'#f26')">set mesh[0] color to '#f26'</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setMeshColor(0,'#62f')">set mesh[0] color to '#62f'</button>
+                    </div>
+                    <WThreejsVue
+                        ref="thr"
+                        :opt="opt"
+                        @init="loading=false"
+                    ></WThreejsVue>
+                </div>
+
+                <div style="padding-left:20px;">
+
+                    <div :style="`border:1px solid #ddd; width:600px; min-width:600px; height:${opt.height}px; overflow-y:auto;`">
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WThreejsVue from './components/WThreejsVue.vue'
+import jv from 'w-jsonview-tree'
+
+export default {
+    components: {
+        WThreejsVue,
+    },
+    data: function() {
+        return {
+            'loading': true,
+            'opt': {
+                width: 800,
+                height: 600,
+                items: [
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_wheel-hub.stl',
+                        name: 'Wheel Hub',
+                        color: 'rgba(214, 92, 92, 0.9)',
+                    },
+                    {
+                        url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_ushape-connector.stl',
+                        name: 'Ushape Connector',
+                        color: 'rgba(214, 214, 92, 0.9)',
+                    },
+                ],
+            },
+            'action': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        vo.showOptJson()
+    },
+    watch: {
+        opt: {
+            handler: function() {
+                let vo = this
+                vo.showOptJson()
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        showOptJson: function() {
+            let vo = this
+            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
+        },
+        setMeshColor: function(ind, c) {
+            let vo = this
+            try {
+                vo.$refs.thr.getInst().setMeshColor(ind, c)
+            }
+            catch (err) {}
+        },
+    },
+}
+</script>
+
+<style>
+</style>