Ways to preserve decal placement using Three.js

I am searching for a solution to store and reload the decals generated in this example (source code). The goal is to allow users to save a new splatter they paint and then reload it at a later time. I have attempted various methods, but none have been successful.

My approach involved saving the position, rotation, and scale and then reconstructing them using the following function:

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 BE RETRIEVED FROM DATABASE
            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);


        });

    }

Answer №1

Implementing a timeout feature resolved the issue

setTimeout(function(){
                    
        let m = new THREE.Mesh(new DecalGeometry(mesh, pos, rot, 
        size), decalMateria2);
        decals.push(m);
        scene.add(m);
            
},100)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatic button rotation

I managed to set up a button that works on click with a delay, making it semi-automatic. However, I'm struggling with getting it to not pause after just one click. Here's what I have so far: <!DOCTYPE html> <html> <body> &l ...

Is there a way to access the state value within the reducer function of createSlice?

Currently, I am utilizing redux-toolkit within my react project. A concern arises in a specific reducer inside the createSlice method where I aim to incorporate an existing array of entities from the state and then merge it with a new array before finalizi ...

Getting Your Redux Form Ready for Submission

I recently transformed my Redux form into a wizard with multiple subcomponents following the structure outlined here: However, I'm encountering difficulties when trying to integrate the form with my actions to submit the form data. Unlike the example ...

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

I am new to AngularJS and curious about its compatibility with HTML5 Canvas or WebGL. Are there any tutorials available on how to integrate AngularJS into a view that uses these technologies? I have noticed some games claiming to be developed with Angular ...

Error message: When attempting to access firebase data in our app, an uncaught TypeError is thrown, stating that it is unable to read properties of undefined while trying to access '

While using Firebase 9 and Vue3, I encountered an error when trying to access data from a document. Even though the data was correctly logged in the console, it was showing up as undefined. Additionally, I made sure that the data was loaded before attempti ...

Express.js experienced a 404 error when processing POST requests

When working with js and express, the route handler file looks like this: var express = require('express'); var passport = require('passport'); var authRoutes = App.route('authRoutes'); va ...

Is it possible to implement a setInterval on the socket.io function within the componentDidMount or componentDidUpdate methods

I'm currently working on a website where I display the number of online users. However, I've encountered an issue with the online user counter not refreshing automatically. When I open the site in a new tab, the counter increases in the new tab b ...

Is there a way to illuminate a complete row by simply hovering over a span within one of the columns?

If I want to change the background-color of a div with classes "row" and "highlightThisRow" when hovering over a span with the class "fromThisSpan", how can I achieve that? In a list, there are multiple rows with several columns. The span in question is l ...

When trying to make edits, the cursor automatically jumps to the end of the field

In Safari, there is a strange issue occurring with a text field used for emails. When entering text and trying to edit by moving the cursor, new characters are automatically placed at the end of the text. It seems that the problematic code causing this beh ...

Invalid component exception: The element type is not valid in React Native

In my React Native App.js file, I have included the following code snippet import { StatusBar } from 'expo-status-bar'; import React, { useRef } from 'react'; import { StyleSheet, Text, View, Canvas } from 'react-native'; impo ...

Exploring the world of asynchronous operations with React Hooks

Hello, I am a beginner when it comes to React and JavaScript. I could really use some assistance with two hooks that I have created: useSaveStorage and useGetStorage. The issue I am facing is that my app is supposed to receive data and save it into AsyncS ...

Tips for effectively utilizing the select feature with Firebase data within the Angular UI typeahead functionality

I am currently attempting to integrate Angular-UI typeahead with data retrieved from my Firebase database. The structure of the data is as follows: Data:{ "-JL8IPEAs0vLSt4DJ4V9": { "name": "Something" }, "-JL8IbggYn3O8jkWoPmv": { "name": "Something Els ...

Error in External JavaScript File and Uncaught Reference Error

Wanting to utilize a separate Javascript file with my HTML code, I encountered an issue. Here is the code for the HTML document: <!DOCTYPE html> <html> <a href="javascript:showAlert()">Show Alert!</a> <script type="text/jav ...

I am looking to implement a Mouseover effect on my Canvas element using JavaScript

To create a mouseover effect only on a specific canvas location, I have developed the MousePosition function (as seen below). The commands for the mouseover effect should be implemented within the MouseOverButton function. However, despite my efforts, it ...

Javascript does not function on sections generated by ajax

I'm facing an issue with a JavaScript function not working on a dynamically generated part using AJAX. Here is the AJAX call: <script> $(window).on('scroll', function() { $("#preloadmore").show(); if ($(window).height() + $(window ...

Angular with D3 - Semi-Circle Graph Color Order

Can someone assist me with setting chart colors? I am currently using d3.js in angular to create a half pie chart. I would like to divide it into 3 portions, each represented by a different color. The goal is to assign 3 specific colors to certain ranges. ...

What is the process for executing Express's scaffold by utilizing "nodemon" and the basic "node" command instead of relying on the "npm start" command?

Could you help me locate where I need to make changes in my package.json file? Here is the content of my package.json: { "name": "xyz", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { ...

OrbitControls in THREE.JS fail to function properly when a DOM Element is layered on top of the scene

I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by t ...

Adding the location of the onClick event to the hook - a step-by-step guide

Here is the code I am working with: import { MapContainer, TileLayer } from "react-leaflet"; import React, { useState } from 'react'; export default function App() { const [positionLat, setPositionLat] = useState(null); ...

In JavaScript, utilize an object that is defined outside of a function

Here is a JavaScript function I have: function status(){ this.functionA = function(){} //Other functions and fields go here } Now, there is another function as well: function create(root){ var server = library(function (port) { //Additional functi ...