Three.js 的初步学习和实践

最新推荐文章于 2024-06-25 17:52:54 发布

学前端的枣仁

最新推荐文章于 2024-06-25 17:52:54 发布

阅读量534

点赞数 2

文章标签： webgl javascript canvas

本文链接：https://blog.csdn.net/qq_41022872/article/details/107703259

版权

Three.js 的初步学习和实践

写在前面：作为一个前端小白菜，在校期间学习过一点点的Three.js，做过一些小demo，想在这里和大家做下分享，顺便记录一下学习的过程。
Three官方文档

WebGL相信大家已经耳熟能详，是OpenGL的一个衍生版本。能够使得我们不需要安装任何插件就可以构建Web 3D场景。但是WebGL本身的语法比较偏向底层，直接使用WebGL的GLSl语言构建3D场景开发难度比较大。于是乎，Three.js对WebGL做了一层封装，并向我们前端开发人员提供了非常友好的API，使得我们前端开发人员也能快速上手，构建3D场景。

本文将要讲述的内容：

Three.js中最重要的三个内容：相机，场景，渲染器
使用Three的loader加载3D模型
在场景中加入雪花，模拟下雪效果
在Three的场景中使用天空盒模型
在Three构建的3D场景中实现模型拾取（RayCaster算法）

1 Three中最重要的三个概念

1.1 相机

相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。相机决定了场景中那个角度的景色会显示出来。

类型	名称	构造函数	参数说明	备注
ArrayCamera	相机阵列	ArrayCamera（array：Array）	很多相机组成的数组
Camera	相机	Camera()	这是camera的基类
CubeCamera	立方体相机	CubeCamera( near : Number, far : Number, cubeResolution : Number, options : Object )	最近距离，最远距离，设置立方体边缘的长度，保存传递给自动生成的WebGLRenderTargetCube的纹理参数的对象	最近距离，最远距离，立方体分辨率
OrthographicCamera	正交相机	OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )	相机视锥体左，右，顶，下平面，相机视锥体近，相机视锥体远
PerspectiveCamera	透视相机	PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )	相机视锥体垂直视野，相机平截头宽高比，相机视锥体近，相机视锥体远	视角，视图宽高比,近平面,远平面
StereoCamera	立体照相机	StereoCamera( )	用于‘3D立体影像’或‘视差屏障’等效果

正交相机和透视相机的区别

1.2 场景

// scene 的可配置参数
scene = new THREE.Scene();
// 可以给场景增加fog雾化效果 第一个参数为雾化颜色，第二为'开始施雾的最小距离'，第三为'雾停止计算和应用的最大距离'。注意：这里的'100'不能小于相机中的near，'400'不能大于相机中的far
scene.fog = new THREE.Fog( 0x444466, 100, 400 );
// 设置场景的颜色
scene.background = new THREE.Color( 0x444466 );
// 设置场景中的所有材质
scene.overrideMaterial = this.materialDepth;
// autoUpdate 默认为true。如果设置，则渲染器会检查场景及其对象是否需要矩阵更新的每一帧。如果不是，那么你必须自己维护场景中的所有矩阵。
scene.autoUpdate

1.3 渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

var scene = new THREE.Scene(); //场景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  // 相机

var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

2. 在Three中加载3D模型

虽然Three提供了很多API供我们画出各种各样的几何图形，但是代码来建模效率往往不太高，而且难度比较大。市面上有很多比较成熟的3D建模软件，比如3dmax，Maya，Blender等。

Three这个库同时也提供了很多的loader去加载各种的模型，比如GLTFLoader，OBJLoader，PLYLoader，FBXLoader等等（不要觉得很神奇，其实3D模型本质上就是一些有规则的二进制文件，我们的loader就是按照模型的规则去读取二进制文件，然后加载到我们的场景中）

下面我就以一个.gltf格式的模型为例

function initCamera_Light_Renderer_Stats_Controls() {
      //这里等于是在用脚本添加dom节点
      container = document.createElement('div');
      document.body.appendChild(container);

      //camera 相机
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
      camera.position.set(-9.91836908539192, 26.217305658821992, 101.97602220273721);

      //controls 控制器
      //轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放
      controls = new THREE.OrbitControls(camera);

      //场景
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf0f0f0);

      //light 光源
      var light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(0, 20, 0);
      scene.add(light);
      hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
      hemiLight.color.setHSL(0.6, 1, 0.6);
      hemiLight.groundColor.setHSL(0.095, 1, 0.75);
      hemiLight.position.set(0, 50, 0);
      scene.add(hemiLight);
      // 渲染器
      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      initSky();

      effectController.azimuth = 0.44;
      // stats性能监视器
      // 其中FPS表示：图形处理器每秒钟能够刷新几次；MS表示渲染一帧需要的毫秒数；
      stats = new Stats();
      container.appendChild(stats.dom);

      // model 模型							
      var onProgress = function(xhr) {
        if (xhr.lengthComputable) {
          var percentComplete = xhr.loaded / xhr.total * 100;
          var percent = document.getElementById("percent");
          //percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
        }
      };
      const gltfLoader = new THREE.GLTFLoader();
        gltfLoader.setCrossOrigin('*');
        gltfLoader.load(
          'nit/model.gltf',
          (object) => {
          object.scene.scale.set(4, 4, 4);
          object.scene.rotation.y = (Math.PI / 2) * 1.3;
          // 在加载模型后，在canBeSelectedMeshes变量中加入模型的信息
          // 射线摄取法 https://blog.csdn.net/ahilll/article/details/84185576
          // canBeSelectedMeshes = object.scene.children;
          scene.add(object.scene);
          },
      );
      var onError = function(xhr) {};

      window.addEventListener('resize', onWindowResize, false);

}

查看效果:

源代码地址

(多提一嘴，由于我们要加载本地的模型数据，那么如果克隆代码之后直接打开html的话会出现跨域的问题，建议在本地启一个http-server服务，或者使用HBUilder编译器打开，Hbuilder会自动帮我们启一个服务)

3. 在场景中加入下雪的效果

大概的实现思路是这样的，首先我们假设整个场景外围有一个立方体，在这里立方体里面有很多随机飘动的雪花，每个雪花可以看作一个对象，然后调用Web的RequestAnimationFrame()来使得我们的场景每一秒渲染60次，也就是60帧，从视觉上达到一个很好的效果，然后每次渲染的时候改变我们每一片雪花的位置。核心代码如下

// 初始化雪花
function initContent() {

      /* 雪花图片 */
      let texture = new THREE.TextureLoader().load('textures/Snow.png');

      let geometry = new THREE.Geometry();

      let pointsMaterial = new THREE.PointsMaterial({

        size: 2,
        transparent: true,
        opacity: 0.8,
        map: texture,
        blending: THREE.AdditiveBlending,
        sizeAttenuation: true,
        depthTest: false
      });

      let range = 800;

      for (let i = 0; i < 15000; i++) {

        let vertice = new THREE.Vector3(
          Math.random() * range - range / 2,
          Math.random() * range * 1.5,
          Math.random() * range - range / 2);
        /* 纵向移动速度 */
        vertice.velocityY = 0.1 + Math.random() / 3;
        /* 横向移动速度 */
        vertice.velocityX = (Math.random() - 0.5) / 3;

        /* 将顶点加入几何 */
        geometry.vertices.push(vertice);
      }

      geometry.center();

      points = new THREE.Points(geometry, pointsMaterial);
      points.position.y = -30;

      scene.add(points);
    }
  
  // ...
  
  // 递归调用，requestAnimationFrame每秒会执行60次
  function animate() {

    requestAnimationFrame(animate);

    renderer.render(scene, camera);

    update();

  }
  
  // ...
  
  // 每次重新渲染的时候遍历下雪花 改变位置
  function update() {

    stats.update();
    let vertices = points.geometry.vertices;
    vertices.forEach(function(v) {
      v.y = v.y - (v.velocityY);
      v.x = v.x - (v.velocityX);
      if (v.y <= 0) v.y = 60;
      if (v.x <= -20 || v.x >= 20)
        v.velocityX = v.velocityX * -1;

    });
    /* 顶点变动之后需要更新，否则无法实现雨滴特效 */
    points.geometry.verticesNeedUpdate = true;

  }

查看效果:

4. 使用天空盒作为场景的背景

在Three官方提供的demo中，我看到这样一个案例，觉得很神奇。不管如何转，就像在真实的世界一样.

在线地址

于是乎，去研究了下他的代码，是这样的

scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
  .setPath( 'textures/cube/Park3Med/' )
  .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

后来，我才知道，实际这叫做天空盒模型,只需要六张图，分别作为3D场景的六个面，就可以做出这种效果，类似于这样，然后把图片分成6张，上、下、左、右、前、后.

然后，应用到我们的场景中来

 scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
  .setPath('https://zaoren.oss-cn-beijing.aliyuncs.com/')
  .load(['skyrender0001.png', 'skyrender0004.png',
    'skyrender0003.png', 'skyrender0006.png', 'skyrender0005.png', 'skyrender0002.png']);

效果是这样的：

5. 使用RayCaster算法实现模型拾取（如何在Three的场景中区分两个建筑物）

由于目前我们所有的事情都是使用HTML中的Canvas标签来实现的。在通常情况下，在web中我们区分标签主要是通过DOM节点，像在svg我们也可以给对应的标签加上事件，那么Canvas中，我们是如何去区分3D场景中的对象的呢？

由于我们的Canvas就像是一张画布，显然我们需要区分Canvas中的不同内容只能通过坐标来区分。

由于浏览器是一个2d视口，而在里面显示Three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案，那就是THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等等。我们看一张图片：

大概的意思是，我们相机是一个点，我们鼠标点击的位置是一个点，这两个点可以形成一条射线，穿过我们的3D场景，那么在这条射线上的对象，就是被我们点击到的对象（可能会有多个，我们一般只取第一个）

那么我们如何知道这些模型对象的位置信息呢？问的好！

我们使用loader去加载模型完成以后，会有一个回调函数，带出我们模型中所有建筑的点位信息，我们现在这个回调函数里面用变量将其存储起来，在点击之后就可以通过RayCaster算法去计算到底哪个模型被点击了！下面看代码：

// 第一步: 在回调函数中用 canBeSelectedMeshes 变量接受模型的点位信息
function loadGLTF() {
  const gltfLoader = new THREE.GLTFLoader();
  gltfLoader.setCrossOrigin('*');
  gltfLoader.load(
    'https://zaoren.oss-cn-beijing.aliyuncs.com/NIT.gltf',
    (object) => {
      object.scene.scale.set(4, 4, 4);
      object.scene.rotation.y = (Math.PI / 2) * 1.3;
      // 在加载模型后，在canBeSelectedMeshes变量中加入模型的信息
      // 射线摄取法 https://blog.csdn.net/ahilll/article/details/84185576
      canBeSelectedMeshes = object.scene.children.filter((item) => {
        if (item.name[0] === 'S') {
          if (item.type === 'Mesh') {
            item.name = getChineseName(item.name);
            return item;
          } if (item.type === 'Group') {
            item.name = getChineseName(item.name);
            item.children.forEach((child) => {
              child.name = getChineseName(child.name);
            });
            return item;
          }
        }
        return false;
      });
      scene.add(object.scene);
      // 用来控制动画显隐的
      self.setState({
        contentVisibility: true,
      });
    },
  );
}

// 二步: 监听点击事件
renderer.domElement.addEventListener('click', handleClick, false);

// 第三步： 使用RayCaster算法进行碰撞检测
function handleClick(e) {
  // 获取点击的位置
  const coords = tranformMouseCoord(
    e.clientX,
    e.clientY,
    renderer.domElement,
  );
  // 检测被射线碰撞到的模型
  const intersects = getSelectedMeshes(
    coords,
    camera,
    canBeSelectedMeshes,
  );
  if (intersects.length > 0) {
    getDetail(intersects[0].object.name);
  }
}

function getSelectedMeshes(coords, camera, Meshes) {
  const raycaster = new THREE.Raycaster();
  // 可以看到，我们碰撞检测用到的两个参数 1.点击的相对位置 2.相机的位置
  raycaster.setFromCamera(coords, camera);
  const intersects = raycaster.intersectObjects(Meshes, true);
  return intersects;
}

查看效果:

OK，对Three的分享就到这里拉，因为之后的作内容可能和这块没有很大的交集，暂时不会花太多的时间在这一块上，作为刚毕业的前端小白菜，毕业后的头两年还是先打好基础，哈哈。

学前端的枣仁

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Three.js 的初步学习和实践

Three.js 的初步学习和实践写在前面：作为一个前端小白菜，在校期间学习过一点点的Three.js，做过一些小demo，想在这里和大家做下分享，顺便记录一下学习的过程。Three官方文档WebGL相信大家已经耳熟能详，是OpenGL的一个衍生版本。能够使得我们不需要安装任何插件就可以构建Web 3D场景。但是WebGL本身的语法比较偏向底层，直接使用WebGL的GLSl语言构建3D场景开发难度比较大。于是乎，Three.js对WebGL做了一层封装，并向我们前端开发人员提供了非常友好的API，使得
复制链接

扫一扫