Issue with Three.js failing to display textures

Question

Issue with Three.js failing to display textures

I'm a beginner with three.js and I'm struggling to get my texture to render properly in my scene. Despite following the documentation closely, all I see is a blank canvas with no errors in the console. Can anyone offer any guidance on why my code isn't rendering the texture as expected? Any help would be greatly appreciated. Here is the JavaScript code I'm using:

`var camera, scene, renderer, texture, fog; var mesh, geometry, material, buffer;

        var start_time = Date.now();

        init();
        animate();

        function init() {

            var container = $('#clouds');

            // Background gradient

            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = window.innerHeight;

            var context = canvas.getContext('2d');

            var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, "#1e4877");
            gradient.addColorStop(0.5, "#4584b4");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            container.css('background', 'url(' + canvas.toDataURL('image/png') + ')');
            container.css('background-size', '32px 100%');

            //

            camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
            camera.position.z = 6000;

            scene = new THREE.Scene();

            geometry = new THREE.Geometry();

            var texture = new THREE.TextureLoader().load('/media/cloud-element.png', animate);
            THREE.LinearMipMapNearestFilter;
            THREE.LinearMipMapLinearFilter;

            var fog = new THREE.Fog(0x4584b4, -100, 3000);

            material = new THREE.ShaderMaterial({

                uniforms: {

                    "map": { type: "t", value: texture },
                    "fogColor": { type: "c", value: fog.color },
                    "fogNear": { type: "f", value: fog.near },
                    "fogFar": { type: "f", value: fog.far },

                },
                depthWrite: false,
                depthTest: false,
                transparent: true,
                color: 0xf2f2f2

            });

            var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));

            for (var i = 0; i < 8000; i++) {

                plane.position.x = Math.random() * 1000 - 500;
                plane.position.y = - Math.random() * Math.random() * 200 - 15;
                plane.position.z = i;
                plane.rotation.z = Math.random() * Math.PI;
                plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

                THREE.GeometryUtils.merge(geometry, plane);
            }

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            mesh = new THREE.Mesh(geometry, material);
            mesh.position.z = -8000;
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);

            container.append(renderer.domElement);

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize(event) {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            var position = ((Date.now() - start_time) * 0.03) % 8000;

            camera.position.x += (camera.position.x) * 0.01;
            camera.position.y += (camera.position.y) * 0.01;
            camera.position.z = -position + 8000;

            renderer.render(scene, camera);

        }

    }`

javascript three.js

Answer 1

Answer №1

You've got multiple warnings that need to be addressed before proceeding. For example, color is not an attribute of THREE.ShaderMaterial. Additionally, the method

THREE.GeometryUtils.merge(geometry, plane);

has been relocated to a new API on Geometry. There are other issues that need attention as well.

I've simplified your code into a snippet that can be executed here (since we don't have access to your texture files).

Here are some key takeaways from the modifications I made:

I removed the initial canvas in your code. You can always add it back later. I also included { alpha: true } in the WebGLRenderer parameters, allowing content behind the renderer canvas to be visible.
Although I understand the use of
```
new THREE.Mesh( new THREE.Plane(...) )
```
, it might be more efficient to create individual plane meshes despite the increase in draw calls.
To get your code functioning, I replaced your shader definition with a basic color. If this updated code is working, we can explore the texture issue further. It's worth noting that you may not necessarily need a shader for this task. THREE.MeshBasicMaterial has a map property that can accept a THREE.Texture (provided by THREE.TextureLoader).
I managed the merging of geometries differently. The transformation properties of your plane do not update its vertices, which are needed for merge. Instead, I created a temporary THREE.Geometry object to store the updated vertices of your plane, applying the transformation matrix to them. This approach ensures the merged vertices are correctly positioned.

Outside of these adjustments, the core of your code remains unchanged. I recommend trying out these techniques in your own code. If you encounter difficulties with your textures, please leave a comment so we can revisit that aspect.

var camera, scene, renderer, texture, fog;
var mesh, geometry, material, buffer;

var start_time = Date.now();

init();
animate();

function init() {

  var container = $('#clouds');

  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
  camera.position.z = 6000;

  scene = new THREE.Scene();

  geometry = new THREE.Geometry();

  material = new THREE.MeshBasicMaterial({color: 0xf2f2f2, opacity: 0.5, transparent: true});

  var plane = new THREE.Mesh( new THREE.PlaneGeometry(64, 64) ),
    tempGeometry = new THREE.Geometry();

  for (var i = 0; i < 8000; i++) {

    plane.position.x = Math.random() * 1000 - 500;
    plane.position.y = -Math.random() * Math.random() * 200 - 15;
    plane.position.z = i;
    plane.rotation.z = Math.random() * Math.PI;
    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
    // Warning: THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.
    //THREE.GeometryUtils.merge(geometry, plane);
    plane.updateMatrix();
    tempGeometry.copy(plane.geometry);
    tempGeometry.applyMatrix(plane.matrix);
    geometry.merge(tempGeometry);
  }

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -8000;
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  container.append(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);

  var position = ((Date.now() - start_time) * 0.03) % 8000;

  camera.position.x += (camera.position.x) * 0.01;
  camera.position.y += (camera.position.y) * 0.01;
  camera.position.z = -position + 8000;

  renderer.render(scene, camera);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://threejs.org/build/three.js"></script>
<div id="clouds" style="background: lightBlue;"></div>

Answer 2

You've got multiple warnings that need to be addressed before proceeding. For example, color is not an attribute of THREE.ShaderMaterial. Additionally, the method

THREE.GeometryUtils.merge(geometry, plane);

has been relocated to a new API on Geometry. There are other issues that need attention as well.

I've simplified your code into a snippet that can be executed here (since we don't have access to your texture files).

Here are some key takeaways from the modifications I made:

I removed the initial canvas in your code. You can always add it back later. I also included { alpha: true } in the WebGLRenderer parameters, allowing content behind the renderer canvas to be visible.
Although I understand the use of
```
new THREE.Mesh( new THREE.Plane(...) )
```
, it might be more efficient to create individual plane meshes despite the increase in draw calls.
To get your code functioning, I replaced your shader definition with a basic color. If this updated code is working, we can explore the texture issue further. It's worth noting that you may not necessarily need a shader for this task. THREE.MeshBasicMaterial has a map property that can accept a THREE.Texture (provided by THREE.TextureLoader).
I managed the merging of geometries differently. The transformation properties of your plane do not update its vertices, which are needed for merge. Instead, I created a temporary THREE.Geometry object to store the updated vertices of your plane, applying the transformation matrix to them. This approach ensures the merged vertices are correctly positioned.

Outside of these adjustments, the core of your code remains unchanged. I recommend trying out these techniques in your own code. If you encounter difficulties with your textures, please leave a comment so we can revisit that aspect.

var camera, scene, renderer, texture, fog;
var mesh, geometry, material, buffer;

var start_time = Date.now();

init();
animate();

function init() {

  var container = $('#clouds');

  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
  camera.position.z = 6000;

  scene = new THREE.Scene();

  geometry = new THREE.Geometry();

  material = new THREE.MeshBasicMaterial({color: 0xf2f2f2, opacity: 0.5, transparent: true});

  var plane = new THREE.Mesh( new THREE.PlaneGeometry(64, 64) ),
    tempGeometry = new THREE.Geometry();

  for (var i = 0; i < 8000; i++) {

    plane.position.x = Math.random() * 1000 - 500;
    plane.position.y = -Math.random() * Math.random() * 200 - 15;
    plane.position.z = i;
    plane.rotation.z = Math.random() * Math.PI;
    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
    // Warning: THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.
    //THREE.GeometryUtils.merge(geometry, plane);
    plane.updateMatrix();
    tempGeometry.copy(plane.geometry);
    tempGeometry.applyMatrix(plane.matrix);
    geometry.merge(tempGeometry);
  }

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -8000;
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  container.append(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);

  var position = ((Date.now() - start_time) * 0.03) % 8000;

  camera.position.x += (camera.position.x) * 0.01;
  camera.position.y += (camera.position.y) * 0.01;
  camera.position.z = -position + 8000;

  renderer.render(scene, camera);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://threejs.org/build/three.js"></script>
<div id="clouds" style="background: lightBlue;"></div>

Issue with Three.js failing to display textures

Answer №1

Similar questions

Variable unique to the specific function in universal function

Position a div relative to another div with a static position

How can I obtain the model values for all cars in the primary object?

The ajaxForm function is failing to execute properly and is not providing any error messages

Performing simultaneous document queries within a single API in MongoDB

Tips for updating and triggering useEffect when the router changes in React JS

Please include the document with a name that contains spaces

Is it necessary to use Hapi.js on the client side in order to establish a websocket connection using the Hapi.js protocol?

the status of the XMLHttpRequest Object within the realm of jQuery AJAX

Dynamically importing files in Vue.js is an efficient way to

The Magnificent jQuery Widget Factory's _trigger Instance

Converting Callbacks to Promises in Node.js

What is the best way to handle an ajax call while working with the main Vue instance?

I am looking for a specific task to be carried out, without any need for returning a value or any additional items

What is the best way to identify the type of an element using AngularJS?

Error encountered: Difficulty rendering Vue 3 components within Google Apps Script

Using a variable in Ajax URL with Action razor syntax

Struggling to fill in fields using express and Mongodb

What factors determine when Angular automatically triggers a setTimeout function compared to another?

What are the necessary headers that must accompany a post request?