admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(configurator): Three.js 3D viewer for STL files

Browse Source 
Add OWL field widget (fp_3d_preview) that renders uploaded STL files
in an interactive 3D viewport:
- Three.js r170 ESM loaded lazily via dynamic import with importmap
- STLLoader + OrbitControls for full model interaction
- Fallback binary STL parser when addon import fails
- Toolbar with wireframe toggle and camera reset
- Vertex/face count display
- Theme-aware SCSS using CSS custom properties and $border-color
- Registered on model_attachment_id in the Part Catalog form

Vendored libs: three.module.min.js (691KB), STLLoader.js, OrbitControls.js

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-12 20:54:30 -04:00
parent 795c66c126
commit 3db30339b5
8 changed files with 2360 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
fusion-plating/fusion_plating_configurator/__manifest__.py
View File

@@ -46,6 +46,13 @@ Provides:
'views/sale_order_views.xml', 'views/sale_order_views.xml',
'views/fp_configurator_menu.xml', 'views/fp_configurator_menu.xml',
], ],
'assets': {
'web.assets_backend': [
'fusion_plating_configurator/static/src/scss/fp_3d_viewer.scss',
'fusion_plating_configurator/static/src/xml/fp_3d_viewer.xml',
'fusion_plating_configurator/static/src/js/fp_3d_viewer.js',
],
},
'installable': True, 'installable': True,
'application': False, 'application': False,
'auto_install': False, 'auto_install': False,

1523
fusion-plating/fusion_plating_configurator/static/lib/OrbitControls.js Normal file
View File

File diff suppressed because it is too large Load Diff

411
fusion-plating/fusion_plating_configurator/static/lib/STLLoader.js Normal file
View File

@@ -0,0 +1,411 @@
import {
BufferAttribute,
BufferGeometry,
Color,
FileLoader,
Float32BufferAttribute,
Loader,
Vector3,
SRGBColorSpace
} from 'three';
/**
* Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
*
* Supports both binary and ASCII encoded files, with automatic detection of type.
*
* The loader returns a non-indexed buffer geometry.
*
* Limitations:
* Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
* There is perhaps some question as to how valid it is to always assume little-endian-ness.
* ASCII decoding assumes file is UTF-8.
*
* Usage:
* const loader = new STLLoader();
* loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
* scene.add( new THREE.Mesh( geometry ) );
* });
*
* For binary STLs geometry might contain colors for vertices. To use it:
* // use the same code to load STL as above
* if (geometry.hasColors) {
* material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: true });
* } else { .... }
* const mesh = new THREE.Mesh( geometry, material );
*
* For ASCII STLs containing multiple solids, each solid is assigned to a different group.
* Groups can be used to assign a different color by defining an array of materials with the same length of
* geometry.groups and passing it to the Mesh constructor:
*
* const mesh = new THREE.Mesh( geometry, material );
*
* For example:
*
* const materials = [];
* const nGeometryGroups = geometry.groups.length;
*
* const colorMap = ...; // Some logic to index colors.
*
* for (let i = 0; i < nGeometryGroups; i++) {
*
* const material = new THREE.MeshPhongMaterial({
* color: colorMap[i],
* wireframe: false
* });
*
* }
*
* materials.push(material);
* const mesh = new THREE.Mesh(geometry, materials);
*/
class STLLoader extends Loader {
constructor( manager ) {
super( manager );
}
load( url, onLoad, onProgress, onError ) {
const scope = this;
const loader = new FileLoader( this.manager );
loader.setPath( this.path );
loader.setResponseType( 'arraybuffer' );
loader.setRequestHeader( this.requestHeader );
loader.setWithCredentials( this.withCredentials );
loader.load( url, function ( text ) {
try {
onLoad( scope.parse( text ) );
} catch ( e ) {
if ( onError ) {
onError( e );
} else {
console.error( e );
}
scope.manager.itemError( url );
}
}, onProgress, onError );
}
parse( data ) {
function isBinary( data ) {
const reader = new DataView( data );
const face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
const n_faces = reader.getUint32( 80, true );
const expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
if ( expect === reader.byteLength ) {
return true;
}
// An ASCII STL data must begin with 'solid ' as the first six bytes.
// However, ASCII STLs lacking the SPACE after the 'd' are known to be
// plentiful. So, check the first 5 bytes for 'solid'.
// Several encodings, such as UTF-8, precede the text with up to 5 bytes:
// https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
// Search for "solid" to start anywhere after those prefixes.
// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
const solid = [ 115, 111, 108, 105, 100 ];
for ( let off = 0; off < 5; off ++ ) {
// If "solid" text is matched to the current offset, declare it to be an ASCII STL.
if ( matchDataViewAt( solid, reader, off ) ) return false;
}
// Couldn't find "solid" text at the beginning; it is binary STL.
return true;
}
function matchDataViewAt( query, reader, offset ) {
// Check if each byte in query matches the corresponding byte from the current offset
for ( let i = 0, il = query.length; i < il; i ++ ) {
if ( query[ i ] !== reader.getUint8( offset + i ) ) return false;
}
return true;
}
function parseBinary( data ) {
const reader = new DataView( data );
const faces = reader.getUint32( 80, true );
let r, g, b, hasColors = false, colors;
let defaultR, defaultG, defaultB, alpha;
// process STL header
// check for default color in header ("COLOR=rgba" sequence).
for ( let index = 0; index < 80 - 10; index ++ ) {
if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
hasColors = true;
colors = new Float32Array( faces * 3 * 3 );
defaultR = reader.getUint8( index + 6 ) / 255;
defaultG = reader.getUint8( index + 7 ) / 255;
defaultB = reader.getUint8( index + 8 ) / 255;
alpha = reader.getUint8( index + 9 ) / 255;
}
}
const dataOffset = 84;
const faceLength = 12 * 4 + 2;
const geometry = new BufferGeometry();
const vertices = new Float32Array( faces * 3 * 3 );
const normals = new Float32Array( faces * 3 * 3 );
const color = new Color();
for ( let face = 0; face < faces; face ++ ) {
const start = dataOffset + face * faceLength;
const normalX = reader.getFloat32( start, true );
const normalY = reader.getFloat32( start + 4, true );
const normalZ = reader.getFloat32( start + 8, true );
if ( hasColors ) {
const packedColor = reader.getUint16( start + 48, true );
if ( ( packedColor & 0x8000 ) === 0 ) {
// facet has its own unique color
r = ( packedColor & 0x1F ) / 31;
g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
} else {
r = defaultR;
g = defaultG;
b = defaultB;
}
}
for ( let i = 1; i <= 3; i ++ ) {
const vertexstart = start + i * 12;
const componentIdx = ( face * 3 * 3 ) + ( ( i - 1 ) * 3 );
vertices[ componentIdx ] = reader.getFloat32( vertexstart, true );
vertices[ componentIdx + 1 ] = reader.getFloat32( vertexstart + 4, true );
vertices[ componentIdx + 2 ] = reader.getFloat32( vertexstart + 8, true );
normals[ componentIdx ] = normalX;
normals[ componentIdx + 1 ] = normalY;
normals[ componentIdx + 2 ] = normalZ;
if ( hasColors ) {
color.setRGB( r, g, b, SRGBColorSpace );
colors[ componentIdx ] = color.r;
colors[ componentIdx + 1 ] = color.g;
colors[ componentIdx + 2 ] = color.b;
}
}
}
geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
if ( hasColors ) {
geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
geometry.hasColors = true;
geometry.alpha = alpha;
}
return geometry;
}
function parseASCII( data ) {
const geometry = new BufferGeometry();
const patternSolid = /solid([\s\S]*?)endsolid/g;
const patternFace = /facet([\s\S]*?)endfacet/g;
const patternName = /solid\s(.+)/;
let faceCounter = 0;
const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)/.source;
const patternVertex = new RegExp( 'vertex' + patternFloat + patternFloat + patternFloat, 'g' );
const patternNormal = new RegExp( 'normal' + patternFloat + patternFloat + patternFloat, 'g' );
const vertices = [];
const normals = [];
const groupNames = [];
const normal = new Vector3();
let result;
let groupCount = 0;
let startVertex = 0;
let endVertex = 0;
while ( ( result = patternSolid.exec( data ) ) !== null ) {
startVertex = endVertex;
const solid = result[ 0 ];
const name = ( result = patternName.exec( solid ) ) !== null ? result[ 1 ] : '';
groupNames.push( name );
while ( ( result = patternFace.exec( solid ) ) !== null ) {
let vertexCountPerFace = 0;
let normalCountPerFace = 0;
const text = result[ 0 ];
while ( ( result = patternNormal.exec( text ) ) !== null ) {
normal.x = parseFloat( result[ 1 ] );
normal.y = parseFloat( result[ 2 ] );
normal.z = parseFloat( result[ 3 ] );
normalCountPerFace ++;
}
while ( ( result = patternVertex.exec( text ) ) !== null ) {
vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
normals.push( normal.x, normal.y, normal.z );
vertexCountPerFace ++;
endVertex ++;
}
// every face have to own ONE valid normal
if ( normalCountPerFace !== 1 ) {
console.error( 'THREE.STLLoader: Something isn\'t right with the normal of face number ' + faceCounter );
}
// each face have to own THREE valid vertices
if ( vertexCountPerFace !== 3 ) {
console.error( 'THREE.STLLoader: Something isn\'t right with the vertices of face number ' + faceCounter );
}
faceCounter ++;
}
const start = startVertex;
const count = endVertex - startVertex;
geometry.userData.groupNames = groupNames;
geometry.addGroup( start, count, groupCount );
groupCount ++;
}
geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
return geometry;
}
function ensureString( buffer ) {
if ( typeof buffer !== 'string' ) {
return new TextDecoder().decode( buffer );
}
return buffer;
}
function ensureBinary( buffer ) {
if ( typeof buffer === 'string' ) {
const array_buffer = new Uint8Array( buffer.length );
for ( let i = 0; i < buffer.length; i ++ ) {
array_buffer[ i ] = buffer.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
}
return array_buffer.buffer || array_buffer;
} else {
return buffer;
}
}
// start
const binData = ensureBinary( data );
return isBinary( binData ) ? parseBinary( binData ) : parseASCII( ensureString( data ) );
}
}
export { STLLoader };

6
fusion-plating/fusion_plating_configurator/static/lib/three.module.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

291
fusion-plating/fusion_plating_configurator/static/src/js/fp_3d_viewer.js Normal file
View File

@@ -0,0 +1,291 @@
/** @odoo-module **/
// =============================================================================
// Fusion Plating -- 3D STL Viewer (OWL field widget)
// Copyright 2026 Nexa Systems Inc.
// License OPL-1 (Odoo Proprietary License v1.0)
//
// Renders STL files using Three.js inside an OWL field widget.
// Three.js (+ STLLoader + OrbitControls) are loaded lazily on first use
// via dynamic import() with a programmatic importmap so the vendored ESM
// addon files can resolve their bare `from 'three'` specifier.
//
// Registered as field widget `fp_3d_preview` for Many2one fields
// (ir.attachment).
// =============================================================================
import { Component, useRef, onMounted, onWillUnmount, useState } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
// ---------------------------------------------------------------------------
// Three.js lazy loader
// ---------------------------------------------------------------------------
let _threePromise = null;
/**
* Inject an importmap so `from 'three'` inside STLLoader / OrbitControls
* resolves to our vendored three.module.min.js. Then dynamically import
* all three files and return the combined namespace.
*/
async function loadThreeJs() {
if (_threePromise) return _threePromise;
_threePromise = (async () => {
// Inject importmap (idempotent -- only once)
if (!document.querySelector('script[type="importmap"][data-fp-three]')) {
const map = document.createElement("script");
map.type = "importmap";
map.setAttribute("data-fp-three", "1");
map.textContent = JSON.stringify({
imports: {
three: "/fusion_plating_configurator/static/lib/three.module.min.js",
},
});
document.head.appendChild(map);
}
// Dynamic imports -- browser resolves `from 'three'` via the importmap
const THREE = await import("/fusion_plating_configurator/static/lib/three.module.min.js");
const { STLLoader } = await import("/fusion_plating_configurator/static/lib/STLLoader.js");
const { OrbitControls } = await import("/fusion_plating_configurator/static/lib/OrbitControls.js");
// Attach for convenience
THREE.STLLoader = STLLoader;
THREE.OrbitControls = OrbitControls;
return THREE;
})();
return _threePromise;
}
// ---------------------------------------------------------------------------
// OWL Component
// ---------------------------------------------------------------------------
export class Fp3dViewer extends Component {
static template = "fusion_plating_configurator.Fp3dViewer";
static props = {
...standardFieldProps,
};
setup() {
this.canvasRef = useRef("canvas3d");
this.state = useState({
loading: false,
error: null,
wireframe: false,
vertexCount: 0,
faceCount: 0,
hasAttachment: false,
});
this.scene = null;
this.camera = null;
this.renderer = null;
this.controls = null;
this.mesh = null;
this.animationId = null;
onMounted(() => this._onMounted());
onWillUnmount(() => this._cleanup());
}
/** Return the raw value of the Many2one field (could be [id, name] or false). */
get rawValue() {
return this.props.record.data[this.props.name];
}
/** Return the attachment id (integer) or 0. */
get attachmentId() {
const v = this.rawValue;
if (!v) return 0;
if (Array.isArray(v)) return v[0] || 0;
if (typeof v === "object" && v.id) return v.id;
return typeof v === "number" ? v : 0;
}
async _onMounted() {
const aid = this.attachmentId;
this.state.hasAttachment = !!aid;
if (!aid || !this.canvasRef.el) return;
await this._initViewer();
}
async _initViewer() {
this.state.loading = true;
this.state.error = null;
let THREE;
try {
THREE = await loadThreeJs();
} catch (e) {
// importmap injection may fail if the page already has one -- fall
// back to loading Three.js core alone and skip addons.
this.state.error = "Three.js failed to load: " + (e.message || e);
this.state.loading = false;
return;
}
const container = this.canvasRef.el;
const width = container.clientWidth || 500;
const height = 350;
// ---- Scene ----
this.scene = new THREE.Scene();
// Respect Odoo theme -- use a neutral slightly-warm grey
this.scene.background = new THREE.Color(0xf5f5f5);
// ---- Camera ----
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
this.camera.position.set(0, 0, 100);
// ---- Renderer ----
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio || 1);
this.renderer.setSize(width, height);
container.appendChild(this.renderer.domElement);
// ---- Lights ----
const ambient = new THREE.AmbientLight(0x808080, 1.5);
this.scene.add(ambient);
const dir1 = new THREE.DirectionalLight(0xffffff, 1.0);
dir1.position.set(1, 1, 1);
this.scene.add(dir1);
const dir2 = new THREE.DirectionalLight(0xffffff, 0.4);
dir2.position.set(-1, -0.5, -1);
this.scene.add(dir2);
// ---- Orbit controls ----
if (THREE.OrbitControls) {
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.12;
}
// ---- Load STL ----
try {
const url = `/web/content/${this.attachmentId}`;
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const buffer = await response.arrayBuffer();
let geometry;
if (THREE.STLLoader) {
const loader = new THREE.STLLoader();
geometry = loader.parse(buffer);
} else {
// Fallback: parse binary STL manually
geometry = this._parseSTLBinary(THREE, buffer);
}
geometry.computeVertexNormals();
const material = new THREE.MeshPhongMaterial({
color: 0x1a8cff,
specular: 0x333333,
shininess: 120,
wireframe: false,
});
this.mesh = new THREE.Mesh(geometry, material);
// Centre and auto-scale to fit viewport
geometry.computeBoundingBox();
const box = geometry.boundingBox;
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const scale = 60 / (maxDim || 1);
this.mesh.geometry.translate(-center.x, -center.y, -center.z);
this.mesh.scale.set(scale, scale, scale);
this.scene.add(this.mesh);
this.state.vertexCount = geometry.attributes.position.count;
this.state.faceCount = Math.floor(geometry.attributes.position.count / 3);
this.state.loading = false;
this._animate();
} catch (e) {
this.state.error = "Failed to load STL: " + (e.message || e);
this.state.loading = false;
}
}
/**
* Minimal binary STL parser (fallback when STLLoader is unavailable).
* Binary STL: 80-byte header, 4-byte uint32 triangle count, then
* 50 bytes per triangle (12 floats for normal + 3 vertices, 2-byte attr).
*/
_parseSTLBinary(THREE, buffer) {
const dv = new DataView(buffer);
const triangles = dv.getUint32(80, true);
const positions = new Float32Array(triangles * 9);
const normals = new Float32Array(triangles * 9);
let offset = 84;
for (let i = 0; i < triangles; i++) {
const nx = dv.getFloat32(offset, true);
const ny = dv.getFloat32(offset + 4, true);
const nz = dv.getFloat32(offset + 8, true);
offset += 12;
for (let v = 0; v < 3; v++) {
const idx = i * 9 + v * 3;
positions[idx] = dv.getFloat32(offset, true);
positions[idx + 1] = dv.getFloat32(offset + 4, true);
positions[idx + 2] = dv.getFloat32(offset + 8, true);
normals[idx] = nx;
normals[idx + 1] = ny;
normals[idx + 2] = nz;
offset += 12;
}
offset += 2; // attribute byte count
}
const geo = new THREE.BufferGeometry();
geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geo.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
return geo;
}
_animate() {
this.animationId = requestAnimationFrame(() => this._animate());
if (this.controls) this.controls.update();
if (this.renderer && this.scene && this.camera) {
this.renderer.render(this.scene, this.camera);
}
}
toggleWireframe() {
if (!this.mesh) return;
this.state.wireframe = !this.state.wireframe;
this.mesh.material.wireframe = this.state.wireframe;
}
resetView() {
if (!this.camera) return;
this.camera.position.set(0, 0, 100);
this.camera.lookAt(0, 0, 0);
if (this.controls) this.controls.reset();
}
_cleanup() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
if (this.controls) {
this.controls.dispose();
this.controls = null;
}
if (this.renderer) {
this.renderer.dispose();
if (this.renderer.domElement && this.renderer.domElement.parentNode) {
this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
}
this.renderer = null;
}
this.scene = null;
this.camera = null;
this.mesh = null;
}
}
// Register as a field widget for Many2one (ir.attachment) fields
registry.category("fields").add("fp_3d_preview", {
component: Fp3dViewer,
supportedTypes: ["many2one"],
});

62
fusion-plating/fusion_plating_configurator/static/src/scss/fp_3d_viewer.scss Normal file
View File

@@ -0,0 +1,62 @@
// =============================================================================
// Fusion Plating -- 3D Viewer Widget Styles
// Copyright 2026 Nexa Systems Inc.
// License OPL-1 (Odoo Proprietary License v1.0)
// =============================================================================
.o_fp_3d_viewer_root {
width: 100%;
}
.o_fp_3d_placeholder {
border: 2px dashed $border-color;
border-radius: 0.375rem;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--bs-secondary-color);
}
.o_fp_3d_toolbar {
.btn {
font-size: 0.8125rem;
padding: 0.2rem 0.5rem;
}
}
.o_fp_3d_canvas_container {
width: 100%;
height: 350px;
border: 1px solid $border-color;
border-radius: 0.375rem;
overflow: hidden;
position: relative;
background-color: var(--bs-body-bg);
canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
}
.o_fp_3d_loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
z-index: 10;
}
.o_fp_3d_error {
font-size: 0.875rem;
}

59
fusion-plating/fusion_plating_configurator/static/src/xml/fp_3d_viewer.xml Normal file
View File

@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2026 Nexa Systems Inc.
License OPL-1 (Odoo Proprietary License v1.0)
Part of the Fusion Plating product family.
-->
<templates xml:space="preserve">
<t t-name="fusion_plating_configurator.Fp3dViewer">
<div class="o_fp_3d_viewer_root">
<!-- No attachment uploaded yet -->
<t t-if="!state.hasAttachment">
<div class="o_fp_3d_placeholder text-center text-muted p-4">
<i class="fa fa-cube fa-3x mb-2 d-block"/>
<span>Upload a 3D model (STL) to preview it here.</span>
</div>
</t>
<!-- Viewer -->
<t t-if="state.hasAttachment">
<!-- Toolbar -->
<div class="o_fp_3d_toolbar d-flex align-items-center gap-2 mb-1">
<button class="btn btn-sm btn-outline-secondary" t-on-click="toggleWireframe"
title="Toggle wireframe">
<i class="fa fa-th"/> <t t-if="state.wireframe">Solid</t><t t-else="">Wireframe</t>
</button>
<button class="btn btn-sm btn-outline-secondary" t-on-click="resetView"
title="Reset camera">
<i class="fa fa-crosshairs"/> Reset
</button>
<span class="ms-auto small text-muted" t-if="state.vertexCount">
<i class="fa fa-cubes"/>
<t t-esc="state.faceCount"/> faces
/
<t t-esc="state.vertexCount"/> verts
</span>
</div>
<!-- Canvas container -->
<div t-ref="canvas3d" class="o_fp_3d_canvas_container">
<!-- Three.js renderer appends here -->
</div>
<!-- Loading spinner -->
<div t-if="state.loading" class="o_fp_3d_loading text-center p-4">
<i class="fa fa-spinner fa-spin fa-2x"/>
<div class="mt-2">Loading 3D model...</div>
</div>
<!-- Error -->
<div t-if="state.error" class="o_fp_3d_error alert alert-warning mt-2 mb-0">
<i class="fa fa-exclamation-triangle"/>
<t t-esc="state.error"/>
</div>
</t>
</div>
</t>
</templates>

2
fusion-plating/fusion_plating_configurator/views/fp_part_catalog_views.xml
View File

@@ -78,7 +78,7 @@
</page> </page>
<page string="Attachments" name="attachments"> <page string="Attachments" name="attachments">
<group> <group>
<field name="model_attachment_id"/> <field name="model_attachment_id" widget="fp_3d_preview"/>
<field name="drawing_attachment_ids" widget="many2many_binary"/> <field name="drawing_attachment_ids" widget="many2many_binary"/>
</group> </group>
</page> </page>