Custom Character Personalization

🌵 Needle Engine
1

I’m really new to Needle Engine, so please be gentle :melting_face:

I’m working on a character personalization site for a project, where I want users to be able to modify a model’s features (like height, chest width, weight, etc.).

Is there a way to use regular, stylized HTML sliders to control these model changes? (no 3d objects)

file3
file3900×1840 125 KB

Something like this. :slight_smile:

Thank you!

2

Hi mdes!

You can indeed use HTML sliders to control the character features without displaying any 3D objects in Needle Engine. You need to handle the values from the sliders and use them to update the relevant properties of your character dynamically.

Here’s an outline of the implementation steps:

  1. HTML Sliders: Create sliders in your HTML for different character attributes, such as height, chest width, and weight.

  2. JavaScript: Use JavaScript to listen for changes on the sliders and read their values.

  3. Update Character Properties: When a slider is adjusted, update the relevant parameters of your character model based on the slider’s value.

Here’s a simple code example:

<div>
    <label for="height">Height:</label>
    <input type="range" id="height" min="1" max="3" step="0.01" />
</div>
<div>
    <label for="chestWidth">Chest Width:</label>
    <input type="range" id="chestWidth" min="1" max="2" step="0.01" />
</div>
<div>
    <label for="weight">Weight:</label>
    <input type="range" id="weight" min="30" max="200" step="1" />
</div>

<script>
    const heightSlider = document.getElementById('height');
    const chestWidthSlider = document.getElementById('chestWidth');
    const weightSlider = document.getElementById('weight');

    heightSlider.oninput = function() {
        updateCharacter('height', this.value);
    };

    chestWidthSlider.oninput = function() {
        updateCharacter('chestWidth', this.value);
    };

    weightSlider.oninput = function() {
        updateCharacter('weight', this.value);
    };

    function updateCharacter(attribute, value) {
        console.log(`Updated ${attribute} to ${value}`);
        // Here, implement logic to update the character properties in Needle Engine
    }
</script>

In this setup, you’ll replace the console.log logic in updateCharacter function with actual logic to affect your character model using Needle Engine’s API.

If you need further guidance or have specific feature requirements, feel free to ask! You can also explore more examples in the samples repository (see the documentation).

1 replies left - Get a PRO license for more AI replies.
thread_QOhIK98HcYv2LzWFViWpJDqg
Reply to this message to continue the conversation

3

Hi, checkout this little sample here. I set it up so it should be easy to copy the relevant stuff to your local project :slight_smile:

You can style the HTML elements just as any regular HTML website :slight_smile:
We regularly work with sveltekit and react for our projects for those kind of UI heavy apps (we have templates that you can select in Unity when creating a new web project or that you can checkout on Needle Engine · GitHub)

image
image2214×1297 385 KB