Introduce a pause using the raycaster function

Question

Introduce a pause using the raycaster function

When my raycaster intersects an object for 2 seconds, I want to update the object's texture.

I attempted to use the clock function, but I am unsure of how to properly implement it.

var clock = new THREE.Clock();
clock.autoStart = true;

var intersects = raycaster.intersectObjects( pickable, true );

if ( intersects.length > 0 ) {
    if (!clock.running) clock.start()
    
    if (clock.getElapsedTime() > 2) {
        if (intersects[0].object.name === "btn_meeting_01") {
            mesh_sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg");
        }
        if (intersects[0].object.name === "btn_lobby_01") {
            mesh_sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00003.jpg");
        }
        if (intersects[0].object.name === "btn_restaurant_01") {
            mesh_sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00002.jpg");
        }
        if (intersects[0].object.name === "btn_entrance_01") {
            mesh_sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00001.jpg");
        }
        if (intersects[0].object.name === "btn_exterior") {
            mesh_sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00000.jpg");
        };
    }
}

Could you please point out any issues with this code snippet?

javascript three.js

Answer 1

Answer №1

I found a solution utilizing a boolean variable and a setTimeout function.
While I understand that there may be more efficient methods, this is the approach I took.
Here is the code snippet showcasing my implementation:

var loading = false
var timeout = null

function render() {
  var intersects = raycaster.intersectObjects( pickable, true )

  if ( intersects.length > 0 ) {
    updateTexture()
  } else {
    resetLoader()
  }

  // Render the scene
}

function resetLoader() {
  if( loading ) {
    clearTimeout( timeout )

    loading = false
  }
}

function updateTexture() {
  if( !loading ) {
    timeout = setTimeout( function() {
      // Update the texture here
    }, 2000 )

    loading = true
  }
}

Answer 2

I found a solution utilizing a boolean variable and a setTimeout function.
While I understand that there may be more efficient methods, this is the approach I took.
Here is the code snippet showcasing my implementation:

var loading = false
var timeout = null

function render() {
  var intersects = raycaster.intersectObjects( pickable, true )

  if ( intersects.length > 0 ) {
    updateTexture()
  } else {
    resetLoader()
  }

  // Render the scene
}

function resetLoader() {
  if( loading ) {
    clearTimeout( timeout )

    loading = false
  }
}

function updateTexture() {
  if( !loading ) {
    timeout = setTimeout( function() {
      // Update the texture here
    }, 2000 )

    loading = true
  }
}

Introduce a pause using the raycaster function

Answer №1

Similar questions

Efficient State Management with React-Redux for Streamlined HTTP Requests

I'm experiencing some difficulties utilizing the return value from a function in Typescript

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

Activate animation upon scrolling to specific element using Material-UI

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

Can you explain the distinction between these codes?

Difficulty with Horizontal Mousewheel Scrolling

Is the parent node of the input element the input element itself?

Fixing Timezone Issue in VueJs 3 with Axios POST Request

Tips for updating and using a map value array as state in React

What could be causing the error message 'Why is 'push' property undefined in React Native?

How can I handle a 404 error if an object is not found in a JSON file?

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

Utilize AngularJS to enable the forward and back buttons to fetch JSON data, but ensure that the data is only retrieved if the item meets

Information on the Manufacturer of Devices Using React Native

Troubleshooting: Jquery show effects not functioning as expected

Sending HTML parameters to a PHP file

Encountering no automatic refresh feature in Next.js

What is the best way to extract data from an array of objects in a JSON response?