产品新增3d模型展示

web_widget_model_viewer/static/src/js/3d_viewer.js

@@ -0,0 +1,62 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { useInputField } from "@web/views/fields/input_field_hook";
+import { FileUploader } from "@web/views/fields/file_handler";
+import { session } from "@web/session";
+import { useService } from "@web/core/utils/hooks";
+import { isBinarySize } from "@web/core/utils/binary";
+import { download } from "@web/core/network/download";
+import utils from 'web.utils';
+
+import core from 'web.core';
+import rpc from 'web.rpc';
+
+var QWeb = core.qweb;
+
+import { Component, onWillUpdateProps, useState, useRef, useEffect } from "@odoo/owl";
+
+export class StepViewer extends Component {
+   setup() {
+        this.props.url = this.formatUrl();
+    }
+
+    formatUrl(){
+        var url = '';
+        if (this.props.value) {
+            if (utils.is_bin_size(this.props.value)) {
+                var url_props = {
+                    base_url: session['web.base.url'],
+                    model: this.props.record.resModel,
+                    id: JSON.stringify(this.props.record.data['id']),
+                    field: this.props.name}
+                url = url_props['base_url']+'/web/content/'+url_props['model']+'/'+url_props['id']+'/'+url_props['field']+'?download=true'
+
+            } else {
+                url = "data:model/gltf-binary;base64," + this.props.value;
+            }
+        }
+        return url
+    }
+
+}
+
+StepViewer.template = "web_widget_model_viewer.BinaryField3d";
+
+StepViewer.displayName = _lt("3D File");
+StepViewer.supportedTypes = ["binary"];
+
+StepViewer.props = {
+    ...standardFieldProps,
+    url: { type: String, optional: true },
+};
+
+StepViewer.extractProps = ({ attrs }) => {
+    return {
+        url: attrs.options.url,
+    };
+};
+
+registry.category("fields").add("Viewer3D", StepViewer);

web_widget_model_viewer/static/src/js/3d_viewer.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    
+    <t t-name="web_widget_model_viewer.BinaryField3d" owl="1">
+     
+        <model-viewer
+		        t-att-src='props.url'
+		        name="3D model"
+		        alt="3D model"
+		        auto-rotate="1"
+		        camera-controls="1"
+                style ="background-color: #0D1D54;"
+        >
+<!--                <div class="text-center mt-4 mb-4 mr-4">-->
+<!--                    <span-->
+<!--		                    id="model-viewer-fullscreen"-->
+<!--		                    title="View fullscreen"-->
+<!--		                    role="img"-->
+<!--		                    aria-label="Fullscreen"-->
+<!--                    >-->
+<!--                        <i class="fa fa-arrows-alt fa-2x"/>-->
+<!--                    </span>-->
+<!--                </div>-->
+        </model-viewer>
+	
+<!--	    <model-viewer-->
+<!--			    src='/jikimo_model_viewer/static/src/js/3d_viewer/test.glb'-->
+<!--			    name="Test 3D model"-->
+<!--			    alt="Test 3D model"-->
+<!--			    auto-rotate="1"-->
+<!--			    camera-controls="1"-->
+<!--	    />-->
+	    
+        <script type="module"
+		        src="/web_widget_model_viewer/static/src/lib/model-viewer.min.js">
+        </script>
+
+    </t>
+
+
+</templates>