w-threejs-vue 1.0.0

package/src/AppBasicBackgroundColor.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">backgroundColor</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppBasicBackgroundColor.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppBasicBackgroundColor.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="setBackgroundColor('#222')">set to #222</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setBackgroundColor('#263238')">set to #263238</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)',
+                    },
+                ],
+                backgroundColor: '#263238',
+            },
+            '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 })
+        },
+        setBackgroundColor: function(c) {
+            let vo = this
+            vo.opt.backgroundColor = c
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppBasicSize.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">size</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppBasicSize.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppBasicSize.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;">
+                    <WThreejsVue
+                        :opt="opt"
+                    ></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 {
+            '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 })
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppBasicUploadStl.vue

@@ -0,0 +1,159 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">uploadStl</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppBasicBackgroundColor.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppBasicBackgroundColor.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="cleanAll">clean all</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="upload">upload stl</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 domShowInputAndGetFiles from 'wsemi/src/domShowInputAndGetFiles.mjs'
+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)',
+                    },
+                    // {
+                    //     url: 'https://cdn.jsdelivr.net/npm/w-demores@1.0.25/res/model/stl/3d_bowl-short.stl',
+                    //     name: 'Bowl Short',
+                    //     color: 'rgba(92, 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 })
+        },
+        cleanAll: function() {
+            let vo = this
+            try {
+                vo.$refs.thr.getInst().cleanMeshs()
+            }
+            catch (err) {}
+        },
+        upload: function() {
+            let vo = this
+
+            async function core() {
+
+                let res = await domShowInputAndGetFiles('*', { multiple: true })
+                // console.log('res', res)
+
+                let ms = []
+                for (let i = 0; i < res.files.length; i++) {
+
+                    let file = res.files[i]
+                    console.log('file', file)
+
+                    let url = window.URL.createObjectURL(file)
+                    // console.log('url', url)
+
+                    let m = {
+                        type: 'stl',
+                        url,
+                        name: file.name,
+                        color: 'rgba(92, 214, 92, 0.9)',
+                    }
+                    console.log('stl mesh', m)
+
+                    ms.push(m)
+
+                    // try {
+                    //     vo.$refs.thr.getInst().addMesh(m)
+                    // }
+                    // catch (err) {}
+
+                }
+                // console.log('ms', ms)
+
+                try {
+                    vo.$refs.thr.getInst().addMeshs(ms)
+                }
+                catch (err) {}
+
+            }
+
+            //core
+            core()
+                .catch((err) => {
+                    console.log(err)
+                })
+
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppBasicUseAutoRotate.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">useAutoRotate</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppBasicUseAutoRotate.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppBasicUseAutoRotate.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="setUseAutoRotate(true)">set to true</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setUseAutoRotate(false)">set to false</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)',
+                    },
+                ],
+                useAutoRotate: 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 })
+        },
+        setUseAutoRotate: function(b) {
+            let vo = this
+            vo.opt.useAutoRotate = b
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppCmCameraFar.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">cameraFar</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppCmCameraFar.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppCmCameraFar.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="setCameraFar(1000)">set to 1000</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setCameraFar(3)">set to 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)',
+                    },
+                ],
+                // useAutoRotate: true,
+                // cameraType: 'orthographic',
+                cameraFar: 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 })
+        },
+        setCameraFar: function(r) {
+            let vo = this
+            vo.opt.cameraFar = r
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppCmCameraFov.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">cameraFov</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppCmCameraFov.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppCmCameraFov.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="setCameraFov(35)">set to 35</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setCameraFov(50)">set to 50</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)',
+                    },
+                ],
+                // useAutoRotate: true,
+                // cameraType: 'orthographic', //注意orthographic無fov可設定
+                cameraFov: 50,
+            },
+            '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 })
+        },
+        setCameraFov: function(r) {
+            let vo = this
+            vo.opt.cameraFov = r
+        },
+    },
+}
+</script>
+
+<style>
+</style>