Threejs给立方体添加轨道控制和窗口Resize

最新推荐文章于 2024-12-24 09:00:00 发布

桐溪漂流

最新推荐文章于 2024-12-24 09:00:00 发布

阅读量694

点赞数

分类专栏： threejs 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/126579609

版权

threejs 专栏收录该内容

4 篇文章

订阅专栏

轨道控制

轨道控制器 - 可以使得相机围绕目标进行轨道运动，表现为可以用鼠标进行缩放，旋转，平移的操作

  // 配置控制器
  const controls = new OrbitControls(camera, renderDom);
  // 在轨道控制发生改变的时候触发 - 可以进行重新渲染等操作
  // controls.addEventListener('change', doRender);
  controls.target.set(0, 0, 0.2);
  controls.update();

效果图

效果图

window的resize

只需要监听window的resize事件，然后进行渲染即可

  window.addEventListener('resize', onWindowResize);

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 如果有循环渲染，此处不需要执行渲染，否则此处需要重新渲染
    // animate();
  }