Hello Everyone,
I am new to three.js and programming in general. I have an issue trying to display text from an input tag into a dynamic texture on a custom mesh. Basically I want to have the ability to type a name or number into a text field and have it display live on the mesh. I really just don’t know where to start. If anyone could help me with this, I would greatly appreciate it. I am including my code and a screenshot of what I am trying to accomplish to hopefully give you a better idea.
if (WEBGL.isWebGLAvailable() === false) {
document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var statsEnabled = true;
var container, stats;
var camera, scene, renderer, controls;
var dynamicTexture = new THREEx.DynamicTexture(2048, 2048)
dynamicTexture.context.font = "bold " + (70) + "px Arial";
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 2;
//
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 40;
controls = new THREE.OrbitControls(camera, renderer.domElement);
//
scene.add(new THREE.HemisphereLight(0x443333, 0x222233, 4));
//
new THREE.CubeTextureLoader()
.setPath('textures/cube/blur/')
.load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], function (textureCube) {
scene.background = textureCube;
});
//
var material = new THREE.MeshStandardMaterial({
map: dynamicTexture.texture
});
new THREE.OBJLoader()
.setPath('mesh/')
.load('jersey.obj', function (group) {
var loader = new THREE.TextureLoader()
.setPath('mesh/');
material.roughness = 1; // attenuates roughnessMap
material.metalness = 0.0; // attenuates metalnessMap
//material.map = loader.load('jersey_base2.png');
// roughness is in G channel, metalness is in B channel
material.metalnessMap = material.roughnessMap = loader.load('Base_occlusionRoughnessMetallic.png');
material.normalMap = loader.load('jersey_Base_Normal.png');
material.map.wrapS = THREE.RepeatWrapping;
material.roughnessMap.wrapS = THREE.RepeatWrapping;
material.metalnessMap.wrapS = THREE.RepeatWrapping;
material.normalMap.wrapS = THREE.RepeatWrapping;
var _image = document.createElement('img');
_image.src = 'mesh/jersey_base2.png';
_image.addEventListener('load', function () {
dynamicTexture.drawImage(_image, 0, 0);
dynamicTexture.drawText('Lewis', 450, 400, 'white');
dynamicTexture.drawText('99', 515, 600, 'white');
dynamicTexture.drawText('TEAM', 1300, 500, 'white');
});
group.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
group.position.x = - 0.45;
group.rotation.y = - Math.PI / 2;
scene.add(group);
});
var genCubeUrls = function (prefix, postfix) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
};
var hdrUrls = genCubeUrls('./textures/cube/pisaHDR/', '.hdr');
new THREE.HDRCubeTextureLoader().load(THREE.UnsignedByteType, hdrUrls, function (hdrCubeMap) {
var pmremGenerator = new THREE.PMREMGenerator(hdrCubeMap);
pmremGenerator.update(renderer);
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
pmremCubeUVPacker.update(renderer);
var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
material.envMap = hdrCubeRenderTarget.texture;
material.needsUpdate = true; // is this needed?
hdrCubeMap.dispose();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
});
//
if (statsEnabled) {
stats = new Stats();
container.appendChild(stats.dom);
}
window.addEventListener('resize', onWindowResize, false);
}
//
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
//
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
if (statsEnabled) stats.update();
}