基础框架的搭建

基础库

react 17.0.2
three 0.137.5

最终效果

stats.js

threejs作者开源的性能监控工具,左侧渲染帧数的监控.

创建并添加到页面上

  const stats = new Stats();
  stats.showPanel(0);
  document.body.appendChild(stats.dom);
  return stats;

每次动画渲染更新性能情况.

// 在循环requestAnimationFrame的调用中.
stats.update();

dat.gui

一个可视化参数调节工具, demo的右上角. 可以方便调节参数, 简化实验流程. 快速找到合适的参数.

定义

const gui = new dat.GUI({ name: "Controls" });

创建并添加控制器

    const controls = new (function () {
      this.rotationSpeed = 0.02;
      this.bouncingSpeed = 0.03;
    })();
    gui.add(controls, "rotationSpeed", 0, 0.5);
    gui.add(controls, "bouncingSpeed", 0, 0.9);

使用控制器

...
      cube.rotation.x += controls.rotationSpeed;
      cube.rotation.y += controls.rotationSpeed;
      cube.rotation.z += controls.rotationSpeed;
...

详细API文档

TrackballControls

threejs api 之一轨迹球控制器, 可以使得相机围绕目标进行轨道运动 TrackballControls 与 OrbitControls 的区别?

使用

按住 D + 鼠标可以平移摄像机.
安装 S + 鼠标左键可以拉远或者拉近相机.

创建

...
new TrackballControls(camera, renderer.domElement);
...

更新

// 控制相机, 在循环requestAnimationFrame的调用中.
... 
trackballControls.update();
...

小结

一个用react 开发threejs的基础框架, 包含了stats.js 和dat.ui 的基本配置和使用.

项目源码

中 view/chapter-01/materials-light.jsx文件.

threejs 学习笔记 一