How to save decal position with Three.js?

Questions
,
1

I’m looking for a way to store and reload the decals that produced in Here
or Here
(source code), so when a user “paints” a new splatter - he could save it and later on - reloads it. I’ve tried many ways but unfortunately none of them seems to work.
My approach was to save the position, rotation and scale and then build them like this :

function loadLeePerrySmith(callback) {

    var loader = new THREE.JSONLoader();

    loader.load('assets/LeePerrySmith.js', function (geometry) {

        geometry.verticesNeedUpdate = true;
        geometry.elementsNeedUpdate = true;
        geometry.morphTargetsNeedUpdate = true;
        geometry.uvsNeedUpdate = true;
        geometry.normalsNeedUpdate = true;
        geometry.colorsNeedUpdate = true;
        geometry.tangentsNeedUpdate = true;

        var material = new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('assets/Map-COL.jpg'),
            specularMap: THREE.ImageUtils.loadTexture('assets/Map-SPEC.jpg'),
            normalMap: THREE.ImageUtils.loadTexture('assets/Map-NOR.jpg'),
            shininess: 10
        });

        mesh = new THREE.Mesh(geometry, material);

        // ALL FOLLOWING VECTORS SHOULD COME FROM D.B
        var pos = new THREE.Vector3(0.18564199509178245, 23.11243036463454, 21.79273328636014);
        var rot = new THREE.Vector3(-0.24357513937426453, -0.07708039421506024, 4.358263365975027);

        var some = new THREE.Vector3(20.694949486021706, 20.694949486021706, 20.694949486021706);
        var check = new THREE.Vector3(1, 1, 1);
        var m = new THREE.Mesh(new THREE.DecalGeometry(mesh, pos, rot, some, check), decalMaterial);
        scene.add(mesh);
        
        decals.push(m);
        scene.add(m);

        mesh.scale.set(10, 10, 10);


    });

}
2
  1. When using the code from first link you shared, keep in mind it is 4 years old. Risky to read or try to learn from it.
  2. The code you shared (which looks, like source of this example, does work.) And reading + applying transformation values fetched from an API / database should work exactly the same way as using hardcoded values (except maybe for handling async requests.)

Can you (1) explain what does not work, are there any errors, (2) share a jsfiddle that shows your code in more detail? The approach you described is perfectly reasonable and should work just fine.

1 Like
3

Thanks - i’ve added timeOut to the updated example and it’s looks fine.

4

Timeout, you mean setTimeout ? :neutral_face:

5

B.T.W - If i want to work with AngularJS - how can i load the following module files with script tags?

import * as THREE from 'https://threejs.org/build/three.module.js';

		import Stats from './skin/stats.module.js';
		import { GUI } from './skin/dat.gui.module.js';

		import { OrbitControls } from './skin/OrbitControls.js';
		import { GLTFLoader } from './skin/GLTFLoader.js';
		import { DecalGeometry } from './skin/DecalGeometry.js';

I’ve tried to add them with script tag - but it’s not working

6

Yep - sorry - i’m so use to work with snippets that i keep forget simple syntax…haha

7

What if users connection is slower than your timeout :slight_smile: ?

You can either use npm + bundler, local webserver, ES6 modules, or a cdn - universally, it doesn’t depend on whether you are using Angular, React, or something different.

1 Like