threejs 笔记 01 —— 初识

lxf2023-05-12 00:53:39

首页 > JavaScript
> 正文

threejs的官网地址

Github案例地址案例

推荐书籍 THREEJS开发指南

浏览器通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形，但是直接使用WebGL 编程来创建三维动画场景时分复杂而且还容易出问题，使用Three.js库可以简化这个过程，Three.js带来的好处有以下几点：

1. 创建简单和复杂的三维几何图形库
2. 在三维场景下创建动画和移动物体
3. 为物体添加纹理和材质
4. 使用各种光源来装饰场景
5. 通过三维模型软件加载物体
6. 为三维场景添加高级的后期处理效果
7. 使用自定义的着色器
8. 创建点云（即粒子系统）

                         ——摘录于THREEJS开发指南

创建第一个三维场景

   <script src="../../three.js-master/build/three.js"></script>

创建3D场景必要元素

场景（scene）
相机（camera）
渲染器（renderer）
灯光（light）

场景：毋庸置疑是必不可少的元素之一，决定了场景怎么展示，在哪展示，展示多大

var scene = new THREE.Scene();

我们可以给场景加一个背景色或者一张图片

    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff)
    console.log(scene)

这里用到了颜色的api 可以用来定义物体场景或者灯光的颜色

相机：相当于人的眼睛，将看到的内容展示出来

    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

渲染器：WebGL Render 用WebGL渲染出你精心制作的场景

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    // renderer.setClearColor(0xffffff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

灯光：用来照亮场景，产生阴影，可以使场景更加绚烂

 //点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
![](https://user-gold-cdn.xitu.io/2020/4/26/171b48e3dfd8ee48?w=700&h=688&f=gif&s=146747)

创建一个正方形元素

需要几何体对象Geometry，和材质对象material 几何体对象包含顶点，结构等元素决定几何体的形状材质对象包含贴图，纹理，颜色等，决定几何体的样子

/**
 * 创建网格模型
 */
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

官网提供了许多默认的几何体，也可以自己通过设置顶点的信息创建属于自己的几何体

控制器：可以对场景进行移动，旋转，缩放等不同方位查看

引入控制器文件

    <script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>

使用控制器需要注意的是每次使用控制器都需要在渲染器中进行更新新的场景

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西

  function render() {
    controls.update()  // 更新控制器
    renderer.render(scene, camera)  // 渲染changing
  }

  function animate() {
    // 具体可以查看 https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
    requestAnimationFrame(animate)
    render()
  }
  animate()

让元素自己动起来

每次改变场景，都需要在render函数中重新渲染，所以我们想要改变元素，需要在render函数中改变，拿旋转举例子

mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;

这样我们就得到了一个基础场景，场景内包含一个蓝色的立方体，并且可以使用鼠标改变观看角度

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <!--引入three.js三维引擎-->
    <script src="../../three.js-master/build/three.js"></script>
    <script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>
  </head>

  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      scene.background = new THREE.Color("rgb(200,200,200)");
      console.log(scene);
      /**
       * 创建网格模型
       */
      // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff,
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /**
       * 光源设置
       */
      //点光源
      var ambient = new THREE.AmbientLight(0xffffff);
      // scene.add(ambient);
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      // console.log(scene)
      // console.log(scene.children)
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建控制器
       */
      
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      // renderer.setClearColor(0xffffff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      renderer.render(scene, camera);
      function render() {
        controls.update()  // 更新控制器
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera)  // 渲染changing
      }
      function animate() {
        // 具体可以查看 https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
        requestAnimationFrame(animate)
        render()
      }
      animate()
    </script>
  </body>
</html>

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

上一篇公分成合理区域失效地区合理地区做为底版放置于情景内

下一篇网格图材料目标对于一个完善的3D实体模型

threejs 笔记 01 —— 初识

相关专题