double-sided CAD models

This commit is contained in:
Yeicor
2024-02-25 11:23:11 +01:00
parent dfff9720dc
commit f22e19fb3d
4 changed files with 15 additions and 9 deletions

View File

@@ -15,6 +15,7 @@ import {watch} from "vue";
import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
import {mdiCircleOpacity, mdiDelete, mdiRectangle, mdiRectangleOutline, mdiVectorRectangle} from '@mdi/js'
import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue';
import type {WebGLProgramParametersWithUniforms, WebGLRenderer} from "three";
const props = defineProps<{ mesh: Mesh, viewer: InstanceType<typeof ModelViewerWrapper> | null, document: Document }>();
const emit = defineEmits<{ remove: [] }>()
@@ -85,9 +86,13 @@ function onModelLoad() {
// of not actually removing the primitives from the scene graph
sceneModel.traverse((child) => {
if (child.userData[extrasNameKey] === modelName) {
// if (child.type == 'Line') child.material.linewidth = 2; // Not supported in WebGL2
// if (child.type == 'Line') {
// child.material.linewidth = 3; // Not supported in WebGL2
// If wide lines are really needed, we need https://threejs.org/examples/?q=line#webgl_lines_fat
// }
if (child.type == 'Points') {
child.material.size = 5;
child.material.needsUpdate = true;
}
}
});

View File

@@ -10,7 +10,6 @@ import {
VToolbarTitle,
VTooltip,
} from "vuetify/lib/components";
import {defineAsyncComponent, ref, Ref} from "vue";
import OrientationGizmo from "./OrientationGizmo.vue";
import type {PerspectiveCamera} from "three/src/cameras/PerspectiveCamera";
import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
@@ -21,6 +20,7 @@ import type {Intersection} from "three";
import type {MObject3D} from "./Selection.vue";
import Loading from "../misc/Loading.vue";
import type ModelViewerWrapper from "./viewer/ModelViewerWrapper.vue";
import {defineAsyncComponent, Ref, ref} from "vue";
const SelectionComponent = defineAsyncComponent({
loader: () => import("./Selection.vue"),
@@ -150,6 +150,7 @@ async function openGithub() {
<v-tooltip activator="parent">Open GitHub</v-tooltip>
<svg-icon type="mdi" :path="mdiGithub"/>
</v-btn>
<div ref="statsHolder"></div>
</template>
<!--suppress CssUnusedSymbol -->

View File

@@ -4,18 +4,16 @@
<script setup lang="ts">
import {settings} from "../misc/settings";
import {onMounted} from "vue";
import {$scene} from "@google/model-viewer/lib/model-viewer-base";
import {$scene, $renderer} from "@google/model-viewer/lib/model-viewer-base";
import Loading from "../misc/Loading.vue";
import {ref} from "vue";
import {ModelViewerElement} from '@google/model-viewer';
import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
import type {Renderer} from "@google/model-viewer/lib/three-components/Renderer";
ModelViewerElement.modelCacheSize = 0; // Also needed to avoid tree shaking
const emit = defineEmits<{
// noinspection ThisExpressionReferencesGlobalObjectJS
load: []
}>()
const emit = defineEmits<{ load: [] }>()
const props = defineProps({
src: String
@@ -23,7 +21,8 @@ const props = defineProps({
const elem = ref<ModelViewerElement | null>(null);
const scene = ref<ModelScene | null>(null);
defineExpose({elem, scene});
const renderer = ref<Renderer | null>(null);
defineExpose({elem, scene, renderer});
onMounted(() => {
elem.value.addEventListener('load', () => {
@@ -34,6 +33,7 @@ onMounted(() => {
if (banner) banner.remove();
// Set the scene
scene.value = elem.value[$scene] as ModelScene;
renderer.value = elem.value[$renderer] as Renderer;
// Emit the load event
emit('load')
}

View File

@@ -55,7 +55,7 @@ class GLTFMgr:
new_material: Material
if kind == "face":
new_material = Material(name="face", alphaCutoff=None, pbrMetallicRoughness=PbrMetallicRoughness(
baseColorTexture=TextureInfo(index=0), baseColorFactor=[1, 1, 0.5, 1]))
baseColorTexture=TextureInfo(index=0), baseColorFactor=[1, 1, 0.5, 1]), doubleSided=True)
elif kind == "edge":
new_material = Material(name="edge", alphaCutoff=None, pbrMetallicRoughness=PbrMetallicRoughness(
baseColorFactor=[0, 0, 0.5, 1]))