w-threejs-vue 1.0.0

package/src/AppCmSetCameraViewAngle.vue

@@ -0,0 +1,105 @@
+<template>
+    <div>
+
+        <div style="padding:20px;">
+            <div style="font-size:1.5rem;">setCameraViewAngle</div>
+            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppCmSetCameraViewAngle.html" target="_blank" class="item-link">example</a>
+            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppCmSetCameraViewAngle.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="setCameraViewAngle(0,0)">set (0,0) for x-y plane</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setCameraViewAngle(0,90)">set (0,90) for x-z plane</button>
+                        <button style="margin:0px 3px 3px 0px;" @click="setCameraViewAngle(90,90)">set (90,90) for y-z plane</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 })
+        },
+        setCameraViewAngle: function(az, polar) {
+            let vo = this
+            try {
+                vo.$refs.thr.getInst().setCameraViewAngle(az, polar)
+            }
+            catch (err) {}
+        },
+    },
+}
+</script>
+
+<style>
+</style>

package/src/AppHpHelperAxesLengthRatio.vue

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

package/src/AppHpHelperGridDensity.vue

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

package/src/AppHpHelperGridLengthRatio.vue

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

package/src/AppHpHelperGridPositionRatioZ.vue

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

package/src/AppHpUseHelperAxes.vue

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