Cheng

Appearance

渲染器和交互界面 ​

canvas 画布 ​

three.js 渲染输出的 Canvas 画布本质上是一个 HTML 元素, 可以用 css 来布局配置

画布尺寸设置 ​

  • width: window.innerWidth 减去左侧其它布局尺寸
  • height: window.innerWidth 减去顶部其它布局尺寸

canvas 随着窗口变化 ​

窗口尺寸减去其余布局的多余尺寸

js
window.onresize = function () {
  const width = window.innerWidth - 200; //canvas画布高度
  const height = window.innerHeight - 60; //canvas画布宽度
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
};

交互界面与画布背景 ​

1.通过访问renderer.domElement修改 canvas 画布的style属性 ​

js
const renderer = new THREE.WebGLRenderer();
// ...
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = "0px";
renderer.domElement.style.left = "0px";
renderer.domElement.style.zIndex = 1;
// renderer.setClearAlpha(0.0);
renderer.setClearColor(0xb9d3ff, 0.4);

2.canvas 画布的背景色可以自定义修改 ​

  • 设置背景透明度

    • .setClearAlpha()方法

      js
      //完全透明
renderer.setClearAlpha(0.0);

    • 背景透明alpha: true

      js
      // 在构造函数参数中设置alpha属性的值, 默认是false
var renderer = new THREE.WebGLRenderer({
  alpha: true,
});

  • 改变背景颜色.setClearColor()

    js
    //设置背景颜色和透明度
renderer.setClearColor(0xb9d3ff, 0.4);

渲染结果保存为图片 ​

将 three.js 对应 canvas 画布上的图像保存为一张图片,下载到本地

  1. 配置 webgl 渲染器preserveDrawingBuffer:true

    js
    // WebGL渲染器设置
const renderer = new THREE.WebGLRenderer({
  //想把canvas画布上内容下载到本地，需要设置为true
  preserveDrawingBuffer: true,
});

  2. 创建超链接元素 a：用于保存下载文件

    js
    // 鼠标单击id为download的HTML元素，threejs渲染结果以图片形式下载到本地
document.getElementById("download").addEventListener("click", function () {
  // 创建一个超链接元素，用来下载保存数据的文件
  const link = document.createElement("a");
  // 通过超链接herf属性，设置要保存到文件中的数据
  link.href = "";
  link.download = "threejs.png"; //下载文件名
  link.click(); //js代码触发超链接元素a的鼠标点击事件，开始下载文件到本地
});

  3. Cavnas 方法.toDataURL()

    js
    const link = document.createElement("a");
// 通过超链接herf属性，设置要保存到文件中的数据
const canvas = renderer.domElement; //获取canvas对象
//"image/jpeg", "image/bmp"
link.href = canvas.toDataURL("image/png");
    • Canvas 画布通过.toDataURL()方法可以获取画布上的像素信息。
    • canvas.toDataURL("image/png");表示以 png 格式获取像素数据

深度冲突 ​

产生原因: 两个网格模型重合,当旋转三维场景时, 模型产生闪烁

解决方法 ​

  • 模型之间拉开距离, 给与一定的间隙

  • 设置对数深度缓冲区，优化深度冲突问题

    js
    // WebGL渲染器设置
const renderer = new THREE.WebGLRenderer({
  logarithmicDepthBuffer: true,
});

模型加载进度 ​

由于 3d 模型体积比较大, 加载时需要一段时间, 所以设置进度条表示加载进度以优化显示

加载器查看模型进度 ​

js
loader.load(path, func1, func2);
  • func1: 加载完成函数 在模型加载完成以后才会被执行
  • func2: 加载过程函数 每当模型加载部分内容, 函数就会被调用, 直到模型加载完毕
js
loader.load(
  "../工厂.glb",
  function (gltf) {
    model.add(gltf.scene);
  },
  function (xhr) {
    // 控制台查看加载进度xhr
    // 通过加载进度xhr可以控制前端进度条进度
    const percent = xhr.loaded / xhr.total;
    console.log("加载进度" + percent);
  }
);

加载完成后隐藏进度条 ​

js
loader.load(
  "../工厂.glb",
  function (gltf) {
    model.add(gltf.scene);
    // 加载完成，隐藏进度条
    document.getElementById("container").style.display = "none";
  },
  function (xhr) {
    const percent = xhr.loaded / xhr.total;
    console.log("加载进度" + percent);
  }
);