The texture is not refreshing in three.js

Question

The texture is not refreshing in three.js

I am currently utilizing the threejs editor as a foundation for my threejs projects. One issue I am facing involves displaying tooltips when the user hovers over specific elements. To accomplish this, I have set up a canvas that is rendered as a texture on a sprite.

// Creating a canvas element
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Hello, world!', 0, 20);

// The canvas content will be used for a texture
var texture1 = new THREE.Texture(canvas1)
texture1.needsUpdate = true;

// Using the texture as a material
var spriteMaterial = new THREE.SpriteMaterial({
    map: texture1,
    useScreenCoordinates: false
});

// Creating the sprite and adding it to the scene
var sprite1 = new THREE.Sprite(spriteMaterial);
sprite1.scale.set(1000, 500, 1.0);
sprite1.position.set(50, 50, 0);
scene.add(sprite1);

var i = 0;
// Changing the content of the canvas
setInterval(function () {
    context1.clearRect(0, 0, canvas1.width, canvas1.height);
    var message = 'test' + i++;
    context1.fillText(message, 4, 20);
    texture1.needsUpdate = true;
}, 1000)

The text "test0" appears, but the sprite does not update. How can I go about updating the text on the sprite? Is there something missing in terms of cache invalidation?

https://i.sstatic.net/j6vjE.png

javascript canvas three.js textures sprite

Answer 1

Answer №1

Have you considered a different approach to placing the text box on your 3D canvas? In my opinion, it would be more beneficial to position your 2D html object by projecting the 3D object position in the context of your page.

The main advantage of this method is that there will be no decrease in rendering performance and you can easily apply normal CSS/HTML styling for your info box.

You can see an excellent example of how to do this here.

There is also another example mentioned in this stackoverflow answer. Implementation is as simple as shown below:

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

If you search online, you'll find many more examples to explore...

Here is a fiddle where you can experiment with this concept.

Answer 2

Have you considered a different approach to placing the text box on your 3D canvas? In my opinion, it would be more beneficial to position your 2D html object by projecting the 3D object position in the context of your page.

The main advantage of this method is that there will be no decrease in rendering performance and you can easily apply normal CSS/HTML styling for your info box.

You can see an excellent example of how to do this here.

There is also another example mentioned in this stackoverflow answer. Implementation is as simple as shown below:

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

If you search online, you'll find many more examples to explore...

Here is a fiddle where you can experiment with this concept.

Answer 3

Answer №2

The reason it's not functioning could be due to the missing specifications for the height and width of the canvas element.

canvas1.width = 256;
canvas1.height = 256;

An issue was identified in this line as well:

context1.fillStyle = "rgba(0.0,0,0,0.95)";

I replaced it with : context1.fillStyle = '#ff0000'; to make it functional

For a visual representation of your code with the necessary adjustments made, you can visit this JSFiddle link.

If Wilt's approach aligns better with your requirements, it may be a preferable alternative to consider.

Answer 4

The reason it's not functioning could be due to the missing specifications for the height and width of the canvas element.

canvas1.width = 256;
canvas1.height = 256;

An issue was identified in this line as well:

context1.fillStyle = "rgba(0.0,0,0,0.95)";

I replaced it with : context1.fillStyle = '#ff0000'; to make it functional

For a visual representation of your code with the necessary adjustments made, you can visit this JSFiddle link.

If Wilt's approach aligns better with your requirements, it may be a preferable alternative to consider.

Answer 5

Answer №3

UPDATE: My mistake, I just realized this question is actually from 2 years ago.

It appears to be functioning correctly on my end... Have you double-checked for any errors in the console? Did you set a breakpoint in your setInterval function to ensure it's being triggered?

I had to modify the update method to renderloop since setInterval was not defined for SO snippets. Here's the adjusted code:

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);

var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
for (var i = 0; i < sphereGeom.vertices.length; i++) {
  var v = sphereGeom.vertices[i];
  if (v.y < 0) v.y = 0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial({
  color: 0x808080
});
var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
renderer.setClearColor(0xdddddd, 1);

// create a canvas element
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Hello, world!', 0, 20);

// use canvas contents as texture
var texture1 = new THREE.Texture(canvas1)
texture1.needsUpdate = true;

// apply texture as material
var spriteMaterial = new THREE.SpriteMaterial({
  map: texture1,
  useScreenCoordinates: false
});

// create and add sprite to scene
var sprite1 = new THREE.Sprite(spriteMaterial);
sprite1.scale.set(40, 20, 1.0);
sprite1.position.set(-5, 0, -5);
scene.add(sprite1);

var i = 0;

(function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
  
  context1.clearRect(0, 0, canvas1.width, canvas1.height);
  var message = 'test' + i++;
  context1.fillText(message, 4, 20);
  texture1.needsUpdate = true;
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer 6

UPDATE: My mistake, I just realized this question is actually from 2 years ago.

It appears to be functioning correctly on my end... Have you double-checked for any errors in the console? Did you set a breakpoint in your setInterval function to ensure it's being triggered?

I had to modify the update method to renderloop since setInterval was not defined for SO snippets. Here's the adjusted code:

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);

var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
for (var i = 0; i < sphereGeom.vertices.length; i++) {
  var v = sphereGeom.vertices[i];
  if (v.y < 0) v.y = 0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial({
  color: 0x808080
});
var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
renderer.setClearColor(0xdddddd, 1);

// create a canvas element
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Hello, world!', 0, 20);

// use canvas contents as texture
var texture1 = new THREE.Texture(canvas1)
texture1.needsUpdate = true;

// apply texture as material
var spriteMaterial = new THREE.SpriteMaterial({
  map: texture1,
  useScreenCoordinates: false
});

// create and add sprite to scene
var sprite1 = new THREE.Sprite(spriteMaterial);
sprite1.scale.set(40, 20, 1.0);
sprite1.position.set(-5, 0, -5);
scene.add(sprite1);

var i = 0;

(function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
  
  context1.clearRect(0, 0, canvas1.width, canvas1.height);
  var message = 'test' + i++;
  context1.fillText(message, 4, 20);
  texture1.needsUpdate = true;
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

The texture is not refreshing in three.js

Answer №1

Answer №2

Answer №3

Similar questions

Building multiple files in React allows developers to divide their code

When creating a FlipCard, you may encounter the error message "The object may be null" while using the document.querySelector() method

Setting or passing a variable via URL in Angular 2 applications

Leveraging ES6 with jQuery in Symfony 4

Issue with displaying Youtube search API results on EJS template file

Utilize various addMethods on a field in the event a radio button is chosen through the jQuery validator plugin

What is the best method to trigger a form submission using Jquery?

jQuery Validation for Radio Buttons and Optional Fields

Retrieval of jQuery remove() method

Finding Corresponding Values in an Array with JavaScript

Getting the Value of an Object in an Array in My Angular Project

Attempting to enable a checkbox using a controller located in a separate controller

If the handler of an event listener in jQuery requires a callback function, be sure to detach the event

Is it possible to drag the parent element but only select the text within the child

The fullcalendar is experiencing difficulties in showing the event

The div in JavaScript is expanding properly, but it is not contracting back as expected

Verify if input is selected using jQuery

Searching for 10 random data records within a collection of 100 in MongoDB

Implementing Promises in AngularJS Controller: A Comprehensive Guide

Having difficulty locating any content within the return element in JSX