Upon examining the source code, it appears that this solution will function properly as of revision 103. However, there is no assurance that it will continue to work in subsequent updates since nothing within three.js is guaranteed for future compatibility.
Begin by creating a Texture
followed by calling forceTextureInitialization
to compel Three.js to initialize the texture.
const forceTextureInitialization = function() {
const material = new THREE.MeshBasicMaterial();
const geometry = new THREE.PlaneBufferGeometry();
const scene = new THREE.Scene();
scene.add(new THREE.Mesh(geometry, material));
const camera = new THREE.Camera();
return function forceTextureInitialization(texture) {
material.map = texture;
renderer.render(scene, camera);
};
}();
Subsequently, replace the WebGL texture of that Texture
with your own using this approach:
const texProps = renderer.properties.get(someTexture);
texProps.__webglTexture = someGLTexture;
An example implementation:
'use strict';
/* global THREE */
function main() {
// Implementation details included
}
main();
<canvas id="c"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
Note that alternatively, you could manipulate the existing texture used by the Texture
object through WebGL instead of introducing your custom one.