Dragging block sliderNumber for real-time scene updates

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， Thank！

<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>

• This topic was modified 1 year, 2 months ago by aqiang.