Setting the position of a text geometry?

I have looked through stack overflow and google and I have found how to CENTER a text geometry but that is not what I want to do.

I have a scene that just has a block of text that says “Buy Here!”. Using the documentation in the three.js website and examples here I was able to do that after some struggling. I had some trouble finding out how to refer to that mesh since I had created the geometry inside a function, and it took hours for me to know about setting a name for it as a string so it can be accessible from different parent/child levels.

What I am NOT able to do now is to offset the text by some arbitrary number of units. I tried shifting it down by 5 units. No matter how I try to do it it isn’t working. I either manage to make the text geometry disappear OR my whole scene is black.

Here is my code…

I have the basic scene setup working properly and I’ll include it here but feel free to skip since I’m pretty sure this has nothing to do with the issue…

import './style.css'
import * as THREE from 'three';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.117.0/examples/jsm/controls/OrbitControls.js';
import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/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 my code for the text object….

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 tried…..

under “var geometry ({…});” I typed….

geometry.position.setX(-5);

but the text object disappears completely so I tried

geometry.position.setX = -5;

but there was no difference so i tried taking out

geometry.center();

but it had the same results.

So then I tried using

mesh.position.x = -5;

with AND without

geometry.center();

but again, they all just make my text object disappear.

So now I tried to set the position from outside the function by typing the following code OUTSIDE of everything that is contained in

loaderF.load (‘https…..’, function (font){var geometry = …..})

using the reference I learned….

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

but this makes my entire scene go blank (black). So I tried variations of 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 pretty sure this wasn't going to work since I wasn't 
                        //using the mesh name specifically for when it's inside something
                        //I can't reach because of parent-child relations

and again trying each of those with AND without

geometry.center();

but they all made my scene go black.

I just wanna move it down a couple of units. Sheesh.

Could anyone be kind enough to tell me WHERE in my code I can set the position of the text geometry? Thank you please.

Answer

I just wanna move it down a couple of units.

In this case use mesh.position.y = - 5;. Changing the x coordinate will move the mesh to the left or right. Here is a complete live example based on your code:

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set( 0, 0, 10 );

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

const pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(5, 5, 5);

const ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(pointLight, ambientLight);

const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function(font) {
  const geometry = new THREE.TextGeometry('Buy Here!', {
    font: font,
    size: 2,
    height: 0.5
  });
  geometry.center();
  const material = new THREE.MeshLambertMaterial({
    color: 0x686868
  });
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.y = - 1; // FIX
  
  mesh.name = "bhText"
  scene.add(mesh);
  
  renderer.render(scene, camera);
  
});

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

Advertisement

Answer