We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Dragging puzzle block sliders for real-time scene updates

Home Forums General Questions Dragging puzzle block sliders for real-time scene updates

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #67771
    aqiang
    Customer

    As we all know, many three.js scene demos come with dat.gui panels where you can drag numeric sliders to observe scene changes in real-time. I’ve also implemented this functionality in the UI panels generated through puzzle plugins. These puzzle blocks with real-time updates are also present in V3D’s post-processing applications. My issue is how to define puzzle blocks with sliders that can achieve the same functionality. After multiple attempts, the generated puzzle blocks have partially achieved this, but there are two main issues that remain unresolved. One is that in the ‘onchange’ event, ‘app’ is reported as undefined, meaning that the scene hasn’t been initialized yet. The second issue is that the puzzle block ID in the event is dynamic and cannot be accurately obtained, any suggestions,Thanks :heart:

    <script>
        function template(block) {
            block.setColor('#cc66cc');
            block.setPreviousStatement(true);
            block.setNextStatement(true);
            block.appendValueInput('SLIDENUM').appendField('print slidernumber');
            block.setOnChange(function (changeEvent) {
                if (changeEvent.type === Blockly.Events.BLOCK_CHANGE) {
                    // if (changeEvent.blockId === block.id) {
                    console.log('New value:', changeEvent.newValue);
                    appInstance.enablePostprocessing([{
                        type: 'brightnessContrast',
                        brightness: changeEvent.newValue,
                    }]);
                    // }
                }
            });
        }
        function code(block) {
            var slidenumber = Blockly.JavaScript.valueToCode(block, 'SLIDENUM', Blockly.JavaScript.ORDER_NONE);
            return 

    console.log(‘New value:’, ${slidenumber});
    appInstance.enablePostprocessing([{
    type: ‘brightnessContrast’,
    brightness: ${slidenumber},
    }]);`;
    }
    </script>

    Attachments:
    You must be logged in to view attached files.
    #67774
    kdv
    Participant
    block.setOnChange(function (event) {
        if (event.type == 'change') {
          const inputBlock = block.getInputTargetBlock('SLIDENUM');//<--
          if (inputBlock && inputBlock.id == event.blockId) {//<--
            console.log('New value:', event.newValue);
          }
        }
    });

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #67791
    aqiang
    Customer

    Thank you! kdv. The second problem has been perfectly resolved :good: . The first issue of creating the “createLivePreview” block doesn’t seem to be an easy task.

    • This reply was modified 1 year, 2 months ago by aqiang.
    #67794
    kdv
    Participant

    Plugins don’t have access to appInstance initialized in the puzzles editor.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.