threejs中在透视相机场景中，怎么能让一个对象以正交相机效果显示

来源：2-1 canvas 和 webgl 的区别

wellDo

2023-06-16

threejs中在透视相机场景中，怎么能让一个对象以正交相机效果显示？一个文字对象绕着中心旋转，怎么能让它大小保持不变，其实没变，只是因为透视效果，转的远了就小了，近了就大了。

写回答

1回答

yancy

2023-06-17

在场景中添加两个相机就可以了，一个正交相机用来渲染文字，一个透视相机用来渲染场景。可以参考下方demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
</head>
<body>

</body>
</html>

<script>
  const renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setClearColor(new THREE.Color(0xffffff)); //设置背景颜色
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 0, 400);

  const cameraOrtho = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, -window.innerHeight, window.innerHeight, -10, 10);

  const scene = new THREE.Scene();

  const sceneOrtho = new THREE.Scene();

  scene.add(new THREE.AmbientLight(0x404040));

  const light = new THREE.DirectionalLight(0xffffff);
  light.position.set(1, 1, 1);
  scene.add(light);

  // 创建立方体
  const material = new THREE.MeshNormalMaterial();
  const geom = new THREE.BoxGeometry(10, 100, 10);
  const mesh = new THREE.Mesh(geom, material);

  scene.add(mesh);

  // 正交创建立方体
  const material1 = new THREE.MeshNormalMaterial();
  const geom1 = new THREE.BoxGeometry(20, 400, 20);
  const mesh1 = new THREE.Mesh(geom1, material1);
  mesh.position.set(100, 100, 0);

  sceneOrtho.add(mesh1);

  function animate() {
    mesh1.rotation.y += 0.01;
    mesh.rotation.y += 0.01;

    renderer.render(scene, camera);
    renderer.autoClear = false;
    renderer.render(sceneOrtho, cameraOrtho);

    requestAnimationFrame(animate);
  }

  animate();
</script>

WebGL+Three.js 入门与实战，系统学习 Web3D 技术

前端的技术蓝海，涨薪好选择

1081 学习 · 294 问题

查看课程

相似问题

想要实现双击3D场景中的某个位置，就在该位置上新增一个正方体，我这边一直定位不到改位置，能帮忙解答下不？谢谢！

回答 2

关于矩阵相乘

回答 1

显示效果和案例不同，且不理解，如下：

回答 1

请问，物体运动超出相机范围了

回答 1

新版three.js中课程代码看不到运行效果

回答 2

打开慕课网App查看更多内容