设置文本几何的位置？

Question

我查看了堆栈溢出和 google，并且找到了如何使文本几何居中，但这不是我想要做的。

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

我现在不能做的是将文本偏移任意数量的单位。我尝试将其向下移动 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;

有和没有

geometry.center();

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

所以现在我尝试通过在

中包含的所有内容的外部键入以下代码来从函数外部设置位置

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

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

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

但这让我的整个场景变得空白（黑色）。所以我尝试了 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 没有

geometry.center();

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

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

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

Answer 1

I just wanna move it down a couple of units.

在这种情况下使用 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>

设置文本几何的位置？

Setting the position of a text geometry?

javascript

text

position

three.js