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

1回答

yancy 2023-06-17 19:15:26

在场景中添加两个相机就可以了，一个正交相机用来渲染文字，一个透视相机用来渲染场景。可以参考下方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>

0 回复有任何疑惑可以回复我~

收起回答

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

正在回答回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

请问这里使用的什么ui框架

能问下这是为什么吗，图片很奇怪

getPerspective 实现原理

在光墙显示出现，但不会动，提示以下错误

为什么是重新绘制而不是叠加？

热搜

最近搜索清空

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

正在回答 回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

请问这里使用的什么ui框架

能问下这是为什么吗，图片很奇怪

getPerspective 实现原理

在光墙显示出现，但不会动，提示以下错误

为什么是重新绘制而不是叠加？

正在回答回答被采纳积分+3