Question

我通过将两个网格弯曲成一个圆圈来创建一个3D选框，但是我无法让它们以相机为中心。

请参考https://jsfiddle.net/siiiick/1jh49e1u/

var text = "EXPRESS FREE SHIPPING WORLDWIDE OVER 200€ / 200% 150$ "; 
var geoParams = {
  size: 208,
  height: 1,
  curveSegments: 4,
  font: "junicode",
  // bevelEnabled: false,
  // bevelThickness: 1,
  // bevelSize: 1,
}

var textMaterial = new THREE.MeshPhongMaterial({
  color: 0x000000
});

var deg = Math.PI / 4.8;

var geoTop = new THREE.TextGeometry(text, geoParams);
var textTop = new THREE.Mesh(geoTop, textMaterial);

geoTop.computeBoundingBox();
textWidth = geoTop.boundingBox.max.x - geoTop.boundingBox.min.x;

controls.target.set(-textWidth * .1 - 10, 0, -textWidth / 3.8);

textTop.rotation.y = Math.PI;
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
textTop.position.set(-0.5 * textWidth + textWidth * .867, 0, -textWidth * .577);

var geoBot = new THREE.TextGeometry(text, geoParams);
var textBot = new THREE.Mesh(geoBot, textMaterial);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
textBot.position.set(-0.5 * textWidth, 0, 0);

scene.add(textTop);
scene.add(textBot);

正如您在几秒钟后看到的那样，选框未居中。您认为这是摄像机定位还是网格定位的结果？

由于

Answer 1

//正在测试一些简单的相机居中代码...

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);

camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);
var light2 = new THREE.PointLight(0x00FFFF);
light2.position.set(-20, 20, -20);
scene.add(light2);
var light3 = new THREE.PointLight(0xFF00FF);
light3.position.set(-20, -20, -20);
scene.add(light3);

var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
var material = new THREE.MeshLambertMaterial({
  color: 0x808080
});

var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
var mesh1 = new THREE.Mesh(sphereGeom, material);
mesh1.position.x += 5;
mesh.add(mesh1);
var mesh2 = new THREE.Mesh(sphereGeom, material);
mesh2.position.y += 5;
mesh2.position.x += 9;
mesh.add(mesh2);

var grp0 = mesh;


var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
mesh.position.x += 30;
var mesh1 = new THREE.Mesh(sphereGeom, material);
mesh1.position.x += 15;
mesh.add(mesh1);
var mesh2 = new THREE.Mesh(sphereGeom, material);
mesh2.position.y += 12;
mesh2.position.x += 9;
mesh.add(mesh2);
renderer.setClearColor(0xdddddd, 1);

var grp1 = mesh;
var curGrp;
var targPos;
var targLook;
var tmp = new THREE.Vector3();
var vbox;

function focusCam(targ) {
  const boundingBox = new THREE.Box3();
  boundingBox.setFromObject(targ)

  var center = boundingBox.getCenter(new THREE.Vector3())

  var sz = boundingBox.getSize(new THREE.Vector3());
  var minZ = sz.length() + camera.near;

  var lookOffset = new THREE.Vector3(0, 0, 1);
  lookOffset.applyQuaternion(camera.quaternion);
  lookOffset.multiplyScalar(minZ)

  targLook = center.clone();
  targPos = new THREE.Vector3().copy(center).add(lookOffset)

  if (!vbox) {
    vbox = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material.clone())
    vbox.material.transparent = true;
    vbox.material.opacity = 0.15;
    scene.add(vbox)
  }
  vbox.scale.copy(sz);
  vbox.position.copy(center);
}


renderer.domElement.onclick = (evt) => {
  if (!curGrp) {
    curGrp = grp0;
  } else if (curGrp === grp0) {
    curGrp = grp1
  } else if (curGrp === grp1) {
    curGrp = grp0
  }
  focusCam(curGrp);
}


(function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
  if (targPos) {
    tmp.copy(targPos).sub(camera.position).multiplyScalar(0.01)
    if (tmp.length() > 0.01) {
      camera.position.add(tmp)
      controls.target.add(tmp);//copy(targLook);
      //camera.lookAt(targLook);
    } else targPos = undefined;
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

相机旋转上的物体不居中三j

1 个答案: