设置文本几何的位置？

Question

我查看了堆栈溢出和谷歌，发现了如何将文本几何居中，但这不是我想要做的。

我有一个场景，其中只有一段文字显示“在此购买！”。使用three.js网站中的文档和示例here，经过一番努力，我能够做到这一点。由于我在函数中创建了几何图形，因此在查找如何引用该网格时遇到了一些麻烦，并且我花了几个小时才知道将其名称设置为字符串，以便可以从不同的父/子级别访问它.

我现在不能做的是将文本偏移一些任意数量的单位。我尝试将其降低 5 个单位。无论我如何尝试它都不起作用。我要么设法使文本几何消失，要么我的整个场景都是黑色的。

这是我的代码...

我的基本场景设置工作正常，我会将其包含在此处，但请随意跳过，因为我很确定这与问题无关...

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();

这是我的文本对象代码......

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"};
    } );

这是我尝试过的......

在“var geometry ({...});”下我输入了....

geometry.position.setX(-5);

但是文本对象完全消失了所以我尝试了

geometry.position.setX = -5;

但没有区别，所以我尝试取出

geometry.center();

但结果相同。

然后我尝试使用

mesh.position.x = -5;

有 AND 没有

geometry.center();

但同样，它们都只是让我的文本对象消失。

所以现在我尝试通过在包含的所有内容的外部键入以下代码来从函数外部设置位置

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

使用我学到的参考......

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

但这会使我的整个场景变成空白（黑色）。所以我尝试了类似的变体

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 不使用的每一个

geometry.center();

但它们都让我的场景变黑了。

我只想将它向下移动几个单位。嘘。

谁能告诉我在我的代码中哪里可以设置文本几何图形的位置？谢谢。

Answer 1

我只想将它向下移动几个单位。

在这种情况下使用mesh.position.y = - 5;。更改x 坐标会将网格向左或向右移动。这是基于您的代码的完整实时示例：

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>