The Three.js scene features an Obj and Cubemap, but encountered an issue with THbindTexture where textures cannot be utilized with multiple targets

Attempting to craft a three.js scene featuring a cubemap panorama background and various .obj files with .mtl textures situated within the scene, an intriguing WebGL error has surfaced. The specific issue being encountered reads:

THbindTexture: textures can not be used with multiple targets
Seeking insight on what may possibly be causing this hiccup. Provided below is the relevant code snippet:

    var camera, cubeCamera, scene, object, renderer;
        var cube, sphere, torus;
        var fov = 70,
        isUserInteracting = false,
        onMouseDownMouseX = 0, onMouseDownMouseY = 0,
        lon = 0, onMouseDownLon = 0,
        lat = 0, onMouseDownLat = 0,
        phi = 0, theta = 0;
        var skyLoader = new THREE.TextureLoader();
        skyLoader.load( 'pano.jpg', function ( texture ) {
            texture.mapping = THREE.UVMapping;
            init( texture );
            animate();
        } );



        function init( texture ) {
            camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0x444444 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 ).normalize();
            scene.add( directionalLight );


        var mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( {  map: texture } ) );
        mesh.scale.x = -1;
            scene.add( mesh );
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
        cubeCamera = new THREE.CubeCamera( 1, 1000, 256 );

            scene.add( cubeCamera );
            document.body.appendChild( renderer.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
            document.addEventListener( 'MozMousePixelScroll', onDocumentMouseWheel, false);
            window.addEventListener( 'resize', onWindowResized, false );
            onWindowResized( null );

            var loader = new THREE.OBJLoader();
loader.load( 'nsa_sanantonio.obj', function ( obj ) {
  obj.traverse( function ( child ) {
      if ( child instanceof THREE.Mesh ) {
          child.material.envMap = texture;
          // add any other properties you want here. check the docs.
      }
  } );

  scene.add( obj );

    } );
        }          
        function onWindowResized( event ) {
            renderer.setSize( window.innerWidth, window.innerHeight );
            camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        }
        function onDocumentMouseDown( event ) {
            event.preventDefault();
            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;
            onPointerDownLon = lon;
            onPointerDownLat = lat;
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        }
        function onDocumentMouseMove( event ) {
            lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
        }
        function onDocumentMouseUp( event ) {
            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
        }
        function onDocumentMouseWheel( event ) {
            // WebKit
            if ( event.wheelDeltaY ) {
                fov -= event.wheelDeltaY * 0.05;
            // Opera / Explorer 9
            } else if ( event.wheelDelta ) {
                fov -= event.wheelDelta * 0.05;
            // Firefox
            } else if ( event.detail ) {
                fov += event.detail * 1.0;
            }
            camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        }
        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            var time = Date.now();
            lon += .15;
            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = THREE.Math.degToRad( 90 - lat );
            theta = THREE.Math.degToRad( lon );

            camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
            camera.position.y = 100 * Math.cos( phi );
            camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
            camera.lookAt( scene.position );

            cubeCamera.updateCubeMap( renderer, scene );

            renderer.render( scene, camera );
        }

Puzzled by the simultaneous application of two textures. The Objloader implementation was borrowed from here. Even the standard obj/stl loader isn't yielding the desired outcome. A demonstration can be found on my website at (notably showcasing a black model).

Answer №1

The error message "bindTexture: textures can not be used with multiple targets" indicates that you are attempting to utilize the same texture for two different purposes - as a standard 2D texture and also as a cubemap. A texture can only serve one purpose at a time, so it cannot be both.

This issue arises when trying to assign conflicting roles to a single texture, resulting in confusion for the program and ultimately causing errors in rendering.

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

What is the value of x.fn.x.init[] displayed for the $() and $(this) functions in the Chrome Developer Tools?

I often debug JS and jQuery scripts using developer tools. I noticed that Chrome Dev Tools displays x.fn.x.init as the value for $() and $(this). However, I'm not sure what exactly these values represent: Code <!DOCTYPE html> <html lang="e ...

Update the color of the div when all checkboxes in the hidden form are selected

Seeking help for multiple issues I'm facing with my code. Here is the link to the code. HTML for Upper Table: <div class="block"> <table> <tr> <th>Nr.</th> <th style="width: 200px">Task</th& ...

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

Creating a file logging system with log4js to capture Console logs

Is there a way to automatically log all console logs, including failed expectations and exceptions, to a file without using try and catch in JavaScript? In Java's LOG4j, the rootlogger feature does this by default. Is there a similar functionality ava ...

What is the best way to create height segments from a cylinder in three.js?

My current project involves a cylinder that is divided into multiple height segments, with the number of segments depending on the specific data. Each height segment contains a value that I want to use for extruding the entire circle at that particular hei ...

exploring the use of background threads in jQuery and JavaScript

Here's an interesting scenario to consider... As I work on my Java web project, utilizing AJAX to store large amounts of data in a database using a separate thread. Everything seems to be functioning as expected. However, something has me puzzled... ...

Can you provide instructions on how to use JavaScript to click and hold a button for a specific duration?

Is it possible to use jQuery to create a button that, when guest button number 1 is clicked, will automatically click and hold down button number 2 for about 3 seconds? I have tried using the mousedown() and click(), but they only register a click, not a ...

Something odd is happening with the shadow effect on Thee.js Material

I have a small box-shaped mesh, and I've applied shadowSide: DoubleSide to its material. After setting both castShadow and receiveShadow to true, I noticed a peculiar effect: https://i.sstatic.net/0RmlK.png If I remove shadowSide: DoubleSide, the sh ...

Is there a way to modify the function so that it can be used with a variety of arrays

I'm trying to find a way to streamline the process of pushing vertex positions from a 3D geometry into an array by using a single function. Is it possible to create a function that automates this task every time I need to add positions to an array? Ca ...

The NodeJS req.query is providing inaccurate information

When I send a JSON from the Client-Side to a NodeJS Server, it looks like this: $.ajax({ type: "POST", dataType: "jsonp", url: "www.xyz.com/save", data: { designation: "Software Developer", skills: [ "", "ASP.NET", "P ...

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...

Can a single static variable be shared among all connections on the server?

I am currently working on a turn-based Chinese checkers game. I have added an onload function in the body that sends an ajax request to the server to obtain the player number for the connection. However, I am encountering an issue where the response always ...

Building an Empty AngularJS Response with the Combination of Spring Boot and MongoDB

In my AngularJS application, I collect user input and store it in painting objects. These objects are then sent to my Spring Boot backend which saves them to a MongoDB server and returns an ID. However, when attempting to POST data to the server, I receive ...

Looking to compare the values of objects in one array with the values of objects in another array

Within this code snippet, I am attempting to retrieve the id of a variant that aligns with the selected objects const selected = [ { "id": 14 }, { "id": 95 } ] const variants = [ { "id": 1, "option_values": ...

Explaining Vue.js actions and mutations in detail

Can someone help clarify the relationship between these functions for me? I'm currently learning about Vue.js and came across an action that commits a mutation. The Action: updateUser({commit}, user) { commit('setUser', {userId: user[&ap ...

Parent controller was not in command before Child执行

When working with a parent view and a child view, I encounter an issue with accessing a json file. In the parent view, I retrieve the json file using the following code: $scope.services = Services.query(); factory('Services', function($reso ...

How to create flexible, non-url-changing layout states with angular-ui-router?

My Objective I am working with two different styles of display: "Normal": [ Header | Body | Footer ] - primarily used for most views "Discreet": [ Body ] only, centered on screen - ideal for states like login/register, errors etc. These display styles ...

Retrieve the file name from the URL while disregarding the query string

Looking for a way to extract the test.jsp from this URL: http://www.xyz.com/a/test.jsp?a=b&c=d Can anyone provide guidance on how to accomplish this task? ...

The usage of $('').switchClass in IE8 may cause an error when the switched class includes a color property

I have the following unique css classes .swap-format{ background-color: green; } .swap-format1{ background-color: orange; } .swap-format2{ color: purple; } Using these classes, I want to create an animation on the given div <div id="swap-clas ...

Communication breakdown between components in Angular is causing data to not be successfully transmitted

I've been attempting to transfer data between components using the @Input method. Strangely, there are no errors in the console, but the component I'm trying to pass the data from content to header, which is the Header component, isn't displ ...