Error: The texture is not rendering on the object in Forge Three.js

I am struggling to showcase a textured plane using Three.js within the context of Forge RCDB. Initially, I was able to render the plane; however, it appeared completely black instead of being textured... After making some adjustments, now nothing is showing up on the screen...

Below is my code snippet :

render () {
    var viewer = NOP_VIEWER;
    var scene = viewer.impl.scene;
    var camera = viewer.autocamCamera;
    var renderer = viewer.impl.renderer();
    renderer.render( scene, camera ); 
  }

In the function intended to display the textured plane :

new THREE.TextureLoader(texture).load(texture, this.render);
tex.wrapS  = THREE.RepeatWrapping   //ClampToEdgeWrapping  //MirroredRepeatWrapping
tex.wrapT = THREE.RepeatWrapping    //ClampToEdgeWrapping   //MirroredRepeatWrapping 
tex.mapping = THREE.UVMapping

Initially, I used loadTexture(). Although I managed to showcase my plane, it appeared entirely black without any texture applied.

Subsequently, I switched to THREE.TextureLoader().load(), which seems to be searching for the image on localhost. The image gets downloaded successfully as I can see it in the console.

However, I am now encountering the following errors :

Uncaught TypeError: scope.manager.itemStart is not a function

and :

Uncaught TypeError: renderer.render is not a function

Currently, the object isn't visible at all, not even in black.

Hence, I suspect there might be an issue related to the rendering process, but I'm having trouble pinpointing it...

Answer №1

After doing some research, I stumbled upon this helpful resource which partially addresses my query.

Ultimately, I made the decision to stick with using THREE.ImageUtils.loadTexture() and switched from using MeshLambertMaterial to MeshBasicMaterial.

No need for rendering anymore.

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

In what situations is it beneficial to utilize inherited scope, and when is it best to avoid it

Is it better to use inherited scope (i.e scope:true) when creating a directive, or is it more appropriate not to use it (i.e scope:false)? I grasp the distinction between scope types and their respective functionalities. However, I am uncertain about whic ...

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

Guide to adding a JS file from npm package to a new page in Nuxt.js

I am facing an issue where I have multiple npm packages containing client-side scripts that I need to include in different pages of my Nuxt.js project. I attempted to achieve this by using the following method: <script> export default { head: { ...

Unable to iterate through array using jQuery promise (when > then) due to issues with $.each and $.ajax

I have been experimenting with different approaches and searching for solutions without success. Currently, I am working with an array of users: var arr = ['tom', 'sally', 'jill', 'sam', 'john']; My goal ...

Executing a jQuery.ajax call using a proxy server

I'm currently working on a Chrome extension and I have encountered an issue. When making a jQuery.ajax request for a standard HTTP page from a page served via HTTPS, Chrome blocks the request. This has led me to consider if it would be feasible to ret ...

Ways to expose a components prop to its slotted elements

I've set up my structure as follows: <childs> <child> <ul> <li v-for="item in currentData">@{{ item.name }}</li> </ul> </child> </childs> Within the child component, t ...

Step-by-step guide on building a personalized rxjs operator using destructured parameters

I am in the process of developing a unique RxJS filter operator that requires a destructured array as a parameter. Unfortunately, TypeScript seems to be throwing an error related to the type declaration: Error TS2493: Tuple type '[]' with a len ...

What could be causing this JavaScript if statement to consistently evaluate to true?

I'm facing an issue where I want to run a specific block of code when a div is clicked for the first time, and then another block when it's clicked for the second time. The problem is that even though my alert shows the variable being updated wit ...

Imported sphere contained within a three.js box3

Seeking guidance: I am trying to figure out how to determine the dimensions of my 3D objects that I have imported. Currently, I am using the code snippet below: var box = new THREE.Box3().setFromObject(obj); This code allows me to calculate the boxes for ...

Unable to access ng-model values within ng-repeat loop

I'm having trouble setting ng-model values within an ng-repeat statement. When I repeat this div with an array of JSON objects, I am able to print the 'ID' value of the object in any element. However, I can't use that as the ng-model v ...

What is the behavior of a variable when it is assigned an object?

When using the post method, the application retrieves an object from the HTML form as shown below: code : app.post("/foo", (req, res)=> { const data = req.body; const itemId = req.body.id; console.log(data); console.log(itemId); }) ...

GlideJS is experiencing a flashing issue on the first slide

Is anyone else experiencing a flashing issue when changing slides in the slider periodically? Specifically, the first slide flashes when transitioning from the first to the last slide. This bug seems to be isolated to Chrome only. Interestingly, I've ...

Calculating the percentage in a jQuery Slider

For a while now, I've been using var slideWidth = 420; to set the width of sliders and then $('#slideInner').css('width', slideWidth * numberOfSlides); to calculate the total width of all sliders effectively in pixels. An Issue Ar ...

Determine the Total of Various Input Numbers Using JQuery

There are 3 input fields where users can enter numbers, and I want to calculate the sum of these numbers every time a user updates one of them. HTML <input class="my-input" type="number" name="" value="0" min="0"> <input class="my-input" type="n ...

Loading local JSON data using Select2 with multiple keys can greatly enhance the functionality

Comparing the select2 examples, it is evident that the "loading remote data" example contains more information in the response json compared to the "loading array data" example. I am interested in knowing if it is feasible to load a local json file with a ...

Is there a way to import TypeScript modules from node_modules using browserify?

After successfully running tsc, I am facing difficulty understanding how to import TypeScript modules from node modules. The crucial section of my gulp file is as follows: gulp.task('compile-ts', ['clean'], function(){ var sourceTsF ...

The ReactJS application is experiencing issues when run on an outdated version of Chrome, specifically version

I recently set up a new ReactJS project using create-react-app, with node Version 12.22.12. To ensure compatibility with older browsers, I incorporated the polyfill core-js. As a result, the project now functions smoothly on Chrome versions 31 and above; h ...

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

Enhancing Your Website - Customizing Image Sizes for Optimal Display

I have put in a fair amount of effort searching through Google and attempting to troubleshoot the issue on my own, but despite my limited knowledge, I am unable to determine how to properly scale my image using bootstrap. Essentially, I have two flex boxe ...

Texture's shadow map opaqueness

Wondering if there's a way to address the issue with the shadow map shown below. It seems like the shadowmap isn't properly rendering the alpha test, resulting in shadows only appearing for the tree planes geometry and not the leaves. Could this ...