Vanishing Items - Three.js CanvasRenderer

I'm in a bit of a pickle here. I can't figure out why my objects are disappearing when using the canvas renderer. Strangely enough, everything works fine with the webGL renderer. Unfortunately, I need to make sure this displays properly on mobile devices, which don't support webGL rendering.

I've experimented with setting overdraw:true, but that hasn't fixed the issue of the missing objects.

Check out my code here

Interestingly, when I remove the room element, the boxes do appear, but they look distorted on my iPhone.

I'm familiar with Z-fighting, but I don't believe that's what's happening here. Each face should have its own zPosition value.

floor = drawTopFacingWall(room.width, room.length);
wall1 = drawLeftFacingWall(room.length, room.depth);
wall2 = drawFrontFacingWall(room.width, room.depth);
wall3 = drawRightFacingWall(room.length, room.depth);
roof = drawBottomFacingWall(room.width, room.length);
wall4 = drawBackFacingWall(room.width, room.depth);

Answer №1

The issue with the geometry disappearing is a result of a specific limitation in CanvasRenderer and its handling of depth-sorting.

Unlike WebGLRenderer, which sorts at the pixel level, CanvasRenderer operates at the polygon level.

To address this problem, it is recommended to increase the tessellation of the geometry.

var newGeometry = new THREE.PlaneGeometry( width, height, 10, 10 );

This pertains to three.js version r.66

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

Maintain checkbox selection even after leaving the page

I am looking for a way to maintain the state of a checkbox even after navigating away from the page in an AngularJS and bootstrap environment. Currently, I find that my bound variable gets reset to false every time I reload the page when the controller run ...

Include the document when the query results in zero documents

Struggling to figure out how to add a document to a collection if a query returns no results. The current query lacks operators for checking the length or size of the result. How can this be achieved? The query in question: this.monthCollection = this.af ...

obtain a Javascript variable within a Jade template by using inline code

script. var hide_section = 'block'; .title(style='display:#{hide_section}') I received an undefined value, any thoughts on why? Could it be because #{hide_section} is trying to access a variable from the back-end, such as the cont ...

Include a couple of images to the jQuery Slider

I have a website and am looking to incorporate a jQuery slider that meets my needs. However, the current slider only displays 3 pictures. How can I add one or two additional pictures to the slider? Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/ He ...

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Within my RegisterTaster function, I need to execute another function called endRegisterAlert. Since I'm not using a constructor and instead treating the class as a const in React Native, how can I achieve this? What is the best way to call the endRe ...

What is the best way to transform an array of lists into a neatly organized state?

I recently received a list of breweries from an API call and I am trying to format it into my React state container. Here is what I have so far: state = { breweries: [ {name: Foo, long: 45, lat: -39.239}, ...

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

As a newcomer to front-end development, one issue I frequently encounter is avoiding repetition when dynamically generating HTML using JS/jQuery. Imagine you have a DOM object that has various states. Typically, all you need to do with JS is switch betwee ...

Aligning an object in ThreeJS to always face the camera, ensuring it is perfectly straight and flat

Reviewing this demo http://codepen.io/anon/pen/JdmMPW, I am working on creating a camera orbiting around a sphere with text labels/satellites (represented by the plane object) that should always face the camera. function render() { marker.lookAt(camera.p ...

Navigate directly to a designated element in a React component without the need to scroll when clicking a link

When viewing a user's profile in React, clicking on an image currently scrolls to that specific image within the entire images page. However, I am looking to modify this behavior so that it navigates directly to the image element without any scrolling ...

Ant design of the card

I am struggling to make the image appear in full width within the ant design card component. import React, { useState, useEffect } from 'react'; import uno from '../images/dualComida.jpg' import { Button, Space, Typography, ...

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

Tips on implementing v-show within a loop

Hey @zero298, there are some key differences in the scenario I'm dealing with. My goal is to display all the items in the object array and dynamically add UI elements based on user input. Additionally, v-if and v-show function differently (as mentione ...

Utilize the clearChart() function within Google charts in conjunction with vue-google-charts

I have integrated vue-google-charts to display various charts on my website. I want to allow users to compare different data sets, by enabling them to add or delete data from the chart. In order to achieve this functionality, I need to find a way to clear ...

Angular, JavaScript, and PHP are three powerful programming languages that

This file contains HTML code <ul class="list"> <li id="numword" data-score="{{item.score}}" class="" ng-repeat="item in words track by $index"> {{item.word}} {{item.score}} </li> </ul> Here is the visual representa ...

Can you show me a comprehensive list of all the REST endpoints for Express mounted Apps?

When working with Express 4, you can utilize the app._router.stack object to list your app routes. In one of the routes in my todos module routes file, I attempted to display this object by sending it as part of the response: exports.update = (req,res) = ...

Guide to retrieving a JSONArray using JavascriptInterface

I attempted to collect form data from an HTML using Javascript and send it back to Java as a JSONArray. However, I am encountering issues with the correct return of the JSONArray in the JavaScriptInterface. The JavaScript functions flawlessly in Chrome, i ...

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

Submitting a form in Rails without refreshing the page and dynamically updating the view

Hello everyone! I am currently utilizing Rails and in my process, I would like the user to perform the following steps on the same page: Input their address Completing the form Submit the form Clicking to submit Update the view to display the add ...

Setting up Redis for session store in the right way involves a few key steps

I have been attempting to configure Redis Store in the following manner: var express = require('express'); var app = express(); ....... ....... var session = require('express-session'); var redis = require("redis").createClient(); var ...

How to replicate Javascript's 32-bit signed integer arithmetic in C (or Perl) with a few differences

I have encountered a discrepancy when translating simple JS code to C and/or Perl, specifically related to arithmetic operations (+ - * / << >>) on integers causing overflow. My goal is to replicate the exact behavior of JS, including handling ...