I have scoured through various resources like stack overflow and google in search of a solution to my problem. I have managed to successfully create a block of text in my scene that reads "Buy Here!". However, I am facing difficulty in offsetting the text by a specific number of units.

After referring to the documentation on the three.js website and exploring examples, I was able to create the text geometry with some effort. The challenge I encountered was referencing the mesh since I had generated the geometry within a function. It took me hours to realize that assigning a name to the mesh as a string would make it accessible across different levels of the hierarchy.

My current issue is trying to shift the text downwards by 5 units. Despite my attempts, I have not been successful. Every method I have tried either makes the text geometry disappear or renders my entire scene black.

Below is a snippet of my code...

I have provided the basic setup for my scene, but feel free to skip it as I believe it is unrelated to the issue...

import './style.css'
import * as THREE from 'three';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdb9a5bfa8a88dfde3fcfcfae3fd">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2f2c3e3e357531281b6a63756e756b">[email protected]</a>/dist/tween.esm.js';

//BASIC SCENE SETUP
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//LIGHTS (POINT AND AMBIENT)
const pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(5, 5, 5);
const ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(pointLight, ambientLight);

//RESIZE WINDOW
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}, false);

//ORBIT CONTROLS
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 70;
controls.enablePan = false;
controls.enableRotate = false;
controls.enableZoom = false;
controls.target.set(0,0,-1);
camera.position.setZ(25);

window.addEventListener("click", (event) => {
        onClick(event);
    })

window.addEventListener("mousemove", onMouseMove);
    
var animate = function() {
    requestAnimationFrame(animate);
    controls.update();
    render();
    TWEEN.update();
        
};
    
function render() {
    renderer.render(scene, camera);
}
    
animate();

and here is the code where the text object is created....

var loaderF = new THREE.FontLoader();
    loaderF.load( 'https://threejs.org/examples/fonts/optimer_regular.typeface.json', function ( font ) {
        var geometry = new THREE.TextGeometry( 'Buy Here!', {
            font: font,
            size: 2.3,
            height: 0.1,
            curveSegments: 15,
            bevelEnabled: true,
            bevelThickness: 0.5,
            bevelSize: 0.31,
            bevelSegments: 7
        } );
        geometry.center();
        var material = new THREE.MeshLambertMaterial({color: 0x686868});
        var mesh = new THREE.Mesh( geometry, material );
        mesh.name = "bhText"
        scene.add( mesh );
        mesh.userData = { URL: "http://google.com"};
    } );

Here's what I have attempted.....

within "var geometry ({...});" I tried....

geometry.position.setX(-5);

which caused the text object to disappear completely, so I also attempted

geometry.position.setX = -5;

with no noticeable difference. I even removed

geometry.center();

but the outcome remained the same.

Next, I tried using

mesh.position.x = -5;

both with and without

geometry.center();

yet all attempts resulted in the text disappearing.

Subsequently, I endeavored to set the position externally by placing the following code OUTSIDE of the section enclosed by

loaderF.load ('https.....', function (font){var geometry = .....})

utilizing the knowledge I acquired....

scene.getObjectByName("bhText").position.x(-5);

however, this action caused my entire scene to turn black. I experimented with variations like

scene.getObjectByName("bhText").position.x = -5;
scene.getObjectByName("bhText").position.setX(-5);
scene.getObjectByName("bhText").position.setX = -5;
mesh.position.setX = -5;// I was fairly certain this wouldn't work due to lack of specificity 
                        // regarding the mesh name within a nested structure 

and repeated each attempt with and without

geometry.center();

nonetheless, each method resulted in a black scene.

I simply wish to move the text down by a few units. Any guidance on where in my code to set the position of the text geometry would be greatly appreciated. Thank you in advance.