When a two-sided object is rotated on the y-axis in THREE.js, the graphic vanishes into

class Game extends backbone.View
    constructor: ->
        @scene = new THREE.Scene()
        @camera = new THREE.PerspectiveCamera 75, window.innerWidth/window.innerHeight, 1, 100000

        @camera.position.z = 300
        @scene.add @camera
        @imgText = imgText = THREE.ImageUtils.loadTexture "/images/health.png"
        imgText.wrapT = imgText.wrapS = THREE.RepeatWrapping
        sphereMat = new THREE.MeshBasicMaterial {map: imgText}
        @mesh = new THREE.Mesh new THREE.CylinderGeometry(100, 100, 200, 64, 1, true), sphereMat
        @mesh.doubleSided = @mesh.flipSided = true
        @mesh.frustumCulled = false
        @scene.add @mesh
        pl = new THREE.PointLight 0xFFFFFF
        [pl.position.x, pl.position.y, pl.position.z] = [10, 50, 130]
        @scene.add pl

        @el = $ "body"

    render: ->
        @renderer = new THREE.WebGLRenderer()
        @renderer.setSize window.innerWidth, window.innerHeight
        $(@el).append @renderer.domElement

        $(@el).mousewheel (event, delta) =>
            @camera.position.z += delta

    step: (delta) ->
        @mesh.rotation.y += 1*
        @renderer?.render @scene, @camera

Experiencing some peculiar issues with the texture vanishing and reappearing intermittently. It seems like the entire object disappears momentarily and then suddenly reappears out of nowhere. I have included a link to a video demonstrating this odd behavior.

http://www.youtube.com/watch?v=aHh25O6I5Vs

Answer №1

To solve this issue, it is recommended to adjust the settings by setting mesh.flipSided = false and mesh.doubleSided = true.

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

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

Uploading CouchDB document attachments using an HTML form and jQuery functionality

I am currently in the process of developing a web form that, upon submission, will generate a couchdb document and attach file(s) to it. I have followed tutorials and visited forums that suggest a two-stage process similar to futon's approach. While I ...

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

Transform the image data retrieved from an external API into the appropriate format for displaying on the webpage

When I make a call to an external API, it returns image data that I want to render on my page. However, the response looks like this when I log it to the console: https://i.stack.imgur.com/GpDhH.png I'm not very familiar with image formats, so I&ap ...

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

Transform current JSON data into formatted JSON format using JavaScript or TypeScript

I have a JSON structure that needs to be reformatted in order to meet the requirements of an external service. Although the current format is complex and cannot be altered, I need to modify it to match the desired output for the external service. Current ...

Ways to enhance the data for my YouTube video uploads version 3

Currently facing an issue where Google has restricted my daily queries to 10,000. I am in search of a solution to adjust my chunksize either up or down. Uncertain about the exact amount to increase or decrease to limit the number of queries per upload, her ...

How to work with multiple selections in React material-ui Autocomplete

I'm currently using Material-ui Autocomplete in multiple selection mode. My goal is to retrieve all the selected values when the form is submitted. Although I found a solution on how to get individual values through the onChange event handler from thi ...

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

What is the reason behind using AJAX to attempt sending a new URL request on

Having a strange issue with my product list. When trying to edit a product by clicking on it, I am redirected to the product form where an AJAX request is supposed to be sent to getFiltersGroup. However, on error, the AJAX request is somehow being sent to ...

Show HTML form elements on the page using jQuery or JavaScript

Is there a jQuery or JS library that can perform the following task: If the user inputs 'x' in A01, then make A01_1 visible. Otherwise, do nothing. <form id="survey"> <fieldset> <label for="A01">A01</label&g ...

Why isn't my NPM package functioning properly within the Laravel framework?

I recently developed an npm package for my personal use, but encountered a ReferenceError when attempting to utilize it in a Laravel project. Here's the breakdown of what I did: I followed a tutorial on initializing an npm package, and it functioned p ...

"Enhancing User Interaction with AngularJS: Leveraging ng-click and ng

Currently, I have a map with markers that trigger an overlay-div to open when clicked. <div class="map" ng-init="loadall()"> <a ng-click="details.show=!details.show" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker ...

Can one transition from using a callback to a returning Promise in order to implement an ErrorFirstCallback strategy?

In Node.js documentation, it is explained that an ErrorFirstCallback is triggered when the referred function fails. Error-first-callbacks in Node.js I have been practicing with this callback pattern and I am curious to know if it is possible to refactor i ...

The PHP script retrieves the entire content of the file

Currently in the process of learning PHP, I am experimenting with connecting PHP and JavaScript using AJAX calls. Here is how my JavaScript file is set up: $.ajax({ type:"GET", url:"test.php", success:function(data) { console.log(data) ...

Create an Array with a dynamic name derived from the values of other variables

In my JavaScript project, I am facing a challenge in naming arrays based on dynamic data such as room numbers and user IDs. As the rooms and users are constantly changing, I need to create multiple arrays accordingly. Although this code is incorrect, it s ...

Showing the date in AngularJSAngularJS can be used to

I have a view set up in AngularJS and I'm attempting to show the current date in a formatted way. My initial thought was to use <span>{{Date.now() | date:'yyyy-MM-dd'}}</span> to display the current date. ...

Managing the automatic download of a zip file through JQuery - A guide

When working with a REST API and creating a zip file for forced download, the task is to call the API by sending necessary POST data through JQuery to initiate the download. How can this goal be accomplished effectively? ...