three.js学习笔记 day1-2

最新推荐文章于 2024-06-19 14:45:15 发布

github_czy

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量932

点赞数 19

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/m0_56366541/article/details/135572261

版权

1.three.js是什么

开发Web 3D 应用的js封装类

2.three.js需要怎么上手

2.1引入

2.2三要数（场景，照相机，渲染器）

首先，场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有场景，Three.js 就无法渲染任何物体。其次，摄相机决定了能够在场景中看到什么，即屏幕上哪些东西需要渲染。最后，渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子，然后调用底层 API 执行真正的场景绘制工作。

场景。在 Three.js 中，场景只有一种，就是用 THREE.Scene 来表示。它是所有不同对象的容器，可以用来保存所有图形场景的必要信息。也就是说， THREE.Scene 保存了所有对象、光源和渲染所需的其他对象。例如，你想要显示一个橙子，就需要将橙子这个对象加入到场景中。
在 Three.js 中提供了两种主要的摄像机，分别是正交投影摄像机和透视投影摄像机（目前还支持了 VR 摄像机）。首先，使用正交投影摄像机 (OrthographicCamera) ，你看到的物体所被渲染的尺寸都是一样的，因为对象相对于摄像机的距离对渲染的结果是没有影响的。这种摄像机通常被用在二维游戏中。接着，我们再来看看透视投影摄像机 (PerspectiveCamera) ，这也是我们实验中大部分使用的类型。因为这种摄像机的效果更贴近真实世界。
Three.js 除了提供基于 WebGL 的渲染器外，还有其他的渲染器，比如基于 HTML canvas 的渲染器、基于 CSS 的渲染器，基于 SVG 的渲染器。但是这些渲染器并不推荐使用，一方面它们十分消耗 CPU 资源，另一方面缺乏对一些功能（如：阴影、材质）的支持。在 Three.js 主要使用 WebGLRenderer() 渲染器，一般会经历如下三个过程：
1. 创建渲染器；
2. 开始渲染： render(scene, camera)；
3. 添加到 canvas 对象中；

还有一些开发过程中会用到的概念如下：

网络模型

几何体、材质、贴图、颜色这些概念属于网络模型（ Mesh ）的范畴中。Three.js 中几何体基本上是三维空间中的点（顶点）集和将这些点连接起来的面。例如，一个立方体有 8 个角，每个角都可以用 x,y 和 z 坐标点来定义，所以每个立方体在三维空间中都有 8 个顶点。其次，一个立方体有 6 个面，每个角有一个顶点。在 Three.js 中，每个面都是包含 3 个顶点的三角形。所以，立方体的每个面都是由两个三角形面组成的。当你使用几何体时，不需要自己定义几何体的所有顶点和面。例如，定义立方体只需要定义长、宽、高。 Three.js 会基于这些信息在正确的位置创建一个拥有 8 个顶点和 12 个三角形面的立方体。材质（ Material ）。材质就像物体的皮肤，决定了几何体的外表。例如，材质可以定义一个几何体看起来是否像金属，是否是透明的等等。在 Three.js 中，材质对象有一些共同的属性，例如：常用的基础属性（控制物体的透明度、可见性、引用），融合属性（决定物体如何与背景融合）以及高级属性（控制底层 WebGL 上下文对象渲染物体的方式）。

光源

Three.js 中的光源可以分为两种类型。

其中，基础光源是最常见的，所有这些光源都是基于 THREE.Light 对象扩展的。对于这些光源，我们需要知道的是：

THREE.AmbientLight 光源的颜色可以附加到场景中的每一种颜色上，通常用来柔化生硬的颜色和阴影。
THREE.PointLight 光源会朝所有方向发射光线，不能被用来阴影。
THREE.SpotLight 光源类似手电筒，它有一个锥形的光束，可以配置它随着距离的增大而逐渐变弱，并且可以生成阴影。
THREE.Directional 光源相当于远光的效果，比如太阳光。它的光线呈平行，其光强并不会随着与目标对象距离的增大而减弱。
THREE.HemisphereLight 光源，该光源考虑了天空和地面的反射，可以具备更加自然的户外效果。
THREE.AreaLight 不从单个点发射光线，而是从一个很大的区域发射光线。

day01代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>20-使用 Three.js 绘制正方体</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        65,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      ); //使用 透视摄像机,第一个参数：视野角度，第二个参数是长宽比值，第三个参数是近面，第四个参数是远面
      const renderer = new THREE.WebGLRenderer(); // 定义 渲染器
      renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); // 设置一个渲染器的大小尺寸,如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，给updateStyle（第三个参数）传入false
      document.body.appendChild(renderer.domElement); //将renderer（渲染器）这个元素添加到我们的HTML文档中

      const spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-10, 10, 0); //从位置(-10,10,0)开始照射场景
      spotLight.castShadow = true; // 启用阴影功能
      spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024); //控制阴影的精细程度
      spotLight.shadow.camera.far = 100;
      spotLight.shadow.camera.near = 0.1;
      scene.add(spotLight);

      const geometry = new THREE.BoxGeometry(2, 2, 2); // 定义一个 立方体 对象，这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
      const material = new THREE.MeshLambertMaterial({ color: 0xffffff }); // 定义材质，设置材质的颜色属性，值是一个十六进制
      const cube = new THREE.Mesh(geometry, material); // 定义一个网格，它是包含有一个几何体以及应用在此几何体上的材质的对象
      cube.castShadow = true;
      scene.add(cube); // 添加到场景中
      camera.position.z = 5; // 移动摄像机的 z 轴位置

      function renderScene() {
        // 渲染
        requestAnimationFrame(renderScene); //在每次屏幕刷新时对场景进行绘制
        renderer.render(scene, camera); // 渲染
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      }
      renderScene();
    </script>
  </body>
</html>

day02代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>实战：魔方</title>
    <style>
      div#canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body onload="main()">
    <div id="canvas"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
    <!-- 对 app.js 进行版本控制，处理浏览器缓存，如果你在开发中频繁改动 app.js 内容，请修改app.js 的版本号 v 的值 -->
    <script src="./app.js?v=1.0"></script>
  </body>
</html>

github_czy

关注

19
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
three.js学习笔记 day1-2

1.three.js是什么开发Web 3D 应用的js封装类2.three.js需要怎么上手2.1引入2.2三要数（场景，照相机，渲染器）首先，场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有场景，Three.js 就无法渲染任何物体。其次，摄相机决定了能够在场景中看到什么，即屏幕上哪些东西需要渲染。最后，渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子，然后调用底层 API 执行真正的场景绘制工作。
复制链接

扫一扫