备案控制台
开发者社区 人工智能 文章 正文

十分钟快速实战Three.js

2022-05-05 149
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 十分钟快速实战Three.js

前言

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。


学习

我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段（模块）来进行开发。 模块如下：


  • 场景对象
  • 网格模型
  • 光源
  • 相机
  • 渲染器对象
  • 渲染操作


1. 创建html文件


首先，我们得创建一个html文件，这样才有地方开发。创建完成后，我们可以引入Three.js文件，今天，它可是主角。我是直接引入远程URL地址进行加载，你也可以去官网进行下载到本地引入。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  </body>
</html>


2. 创建场景对象


借助Three.js引擎创建好一个虚拟的三维场景。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
    </script>
  </body>
</html>


3. 创建网格模型


这行代码new THREE.BoxGeometry(200, 200, 200)的意思是创建了一个长200、宽200、高200的立方体对象。然后并通过代码new THREE.MeshLambertMaterial给立方体对象定义材质，这里可以理解成立方体的属性（包含了颜色、透明度等属性），这里暂时列举颜色属性。然后我们需要将立方体与属性联系起来，就用到网格模型，将两者作为构造函数Mesh的两个参数传进去，最后添加到场景里面。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
    </script>
  </body>
</html>


4. 设置光源


代码new THREE.PointLight('#fff')创建了一个点光源对象，参数#fff定义的是光照强度， 你可以尝试把参数更改为#666，你会看到立方体的表面颜色变暗，这很好理解，实际生活中灯光强度变低了，周围的景物自然暗淡。比如夜空中的照明弹就是一个点光源例子。代码THREE.AmbientLight('#333')创建了一个环境光对象，环境光的颜色会影响到整个场景，环境光没有特定的光源，是模拟漫反射的一种光源，因此不需要指定位置它能将灯光均匀地照射在场景中每个物体上面，一般情况下用来弱化阴影或者添加一些颜色到环境中，因此不能将环境光作为场景中的唯一光源。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /*
       * 设置光源
       */
      var point = new THREE.PointLight('#fff'); //点光源
      point.position.set(300, 100, 200); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight('#333');//环境光
      scene.add(ambient); //环境光添加到场景中
    </script>
  </body>
</html>


5.设置相机


代码new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)创建了一个正射投影相机对象， 什么是“正射投影”，什么是“相机对象”， 比如把该构造函数参数中用到的参数s，也就是代码var s = 200中定义的一个系数，可以把200更改为300,你会发现立方体显示效果变小，这很好理解，相机构造函数的的前四个参数定义的是拍照窗口大小， 就像平时拍照一样，取景范围为大，被拍的人相对背景自然变小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position)定义的是相机的位置和拍照方向，可以更改camera.position.set(200,300,200)参数重新定义的相机位置，把第一个参数也就是x坐标从200更改为250， 你会发现立方的在屏幕上呈现的角度变了，这就像你生活中拍照人是同一个人，但是你拍照的位置角度不同，显示的效果肯定不同。这些具体的参数细节可以不用管， 至少你知道相机可以缩放显示三维场景、对三维场景的不同角度进行取景显示。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /*
       * 设置光源
       */
      var point = new THREE.PointLight('#fff'); //点光源
      point.position.set(300, 100, 200); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight('#333');//环境光
      scene.add(ambient); //环境光添加到场景中
      /*
       * 设置相机
       */
      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); //设置相机方向(指向的场景对象)
    </script>
  </body>
</html>


6.创建渲染器对象


Three.js是基于原生WebGL封装运行的三维引擎。所以浏览器利用代码new THREE.WebGLRenderer()就会渲染出一帧图像。可以设置渲染区域尺寸和背景颜色。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /*
       * 设置光源
       */
      var point = new THREE.PointLight('#fff'); //点光源
      point.position.set(300, 100, 200); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight('#333');//环境光
      scene.add(ambient); //环境光添加到场景中
      /*
       * 设置相机
       */
      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(0xb9d3ff, 1); //设置背景颜色
    </script>
  </body>
</html>


7.执行渲染操作


将渲染好的区域指定场景、相机作为参数，并且把区域添加到页面上。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /*
       * 设置光源
       */
      var point = new THREE.PointLight('#fff'); //点光源
      point.position.set(300, 100, 200); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight('#333');//环境光
      scene.add(ambient); //环境光添加到场景中
      /*
       * 设置相机
       */
      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(0xb9d3ff, 1); //设置背景颜色
      /*
       * 执行渲染操作  
       */ 
      renderer.render(scene, camera); //指定场景、相机作为参数
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    </script>
  </body>
</html>


完整代码

代码body {margin: 0;overflow: hidden;}是为了隐藏body窗口区域滚动条。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>three.js小案例</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <!--引入three.js-->
    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>
  </head>
  <body>
  <script>  
      /*
       * 创建场景对象
       */
      var scene = new THREE.Scene();
      /*
       * 创建网格模型
       */
      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4',
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      /*
       * 设置光源
       */
      var point = new THREE.PointLight('#fff'); //点光源
      point.position.set(300, 100, 200); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight('#333');//环境光
      scene.add(ambient); //环境光添加到场景中
      /*
       * 设置相机
       */
      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(0xb9d3ff, 1); //设置背景颜色
      /*
       * 执行渲染操作  
       */ 
      renderer.render(scene, camera); //指定场景、相机作为参数
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    </script>
  </body>
</html>


微信截图_20220505192648.png


结语


微信截图_20220505192712.png


下面这幅图非常形象地说明了场景—相机—渲染器之间的关系。


微信截图_20220505192731.png


总结：这只是Three.js中的冰山一角，要是想继续学习Three.js，欢迎关注我的公众号前端历劫之路，一起学习Three.js。感受它无限的魅力吧！


文章标签：
前端开发
图形学
关键词：
十分钟JavaScript
游客ksbqbsfjgo6v6
目录
相关文章
桃李春风一杯酒
|
8天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式，并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目，提升前端开发能力。
桃李春风一杯酒
20 0
长梦
|
8天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断：深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句，它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧，包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性，避免 falsy 值陷阱，利用逻辑运算符优化，并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
长梦
31 0
长梦
|
8天前
|
JavaScript 前端开发 算法
JavaScript 中算术操作符：全面解读、实战应用与最佳实践
【4月更文挑战第5天】本文探讨JavaScript中的算术操作符，包括加、减、乘、除、求余、自增、自减及复合赋值等，强调理解与熟练运用它们对提升编程效率和代码准确性的重要性。文中通过示例介绍了各种操作符的用法，同时提醒注意数据类型转换、浮点数精度、除以零错误以及利用短路求值优化逻辑等问题。通过学习，读者能更好地掌握算术操作符在不同场景的应用，提升编程技能。
长梦
26 1
亚丁号
|
8天前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
亚丁号
189 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
游客rihqhtgkydneq
|
8天前
|
数据采集 并行计算 JavaScript
实战指南：在 Node.js 中利用多线程提升性能
在 Node.js 的世界中，多线程技术一直是一个受到广泛关注的领域。最初，Node.js 设计为单线程模式。随着技术发展，Node.js 引入了多线程支持，进而利用多核处理器的强大性能，提升了应用性能。接下来的内容将深入探讨 Node.js 如何实现多线程，以及在何种场合应该采用这种技术。
游客rihqhtgkydneq
234 1
程序员小豪
|
8天前
|
人工智能 JavaScript 前端开发
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
程序员小豪
70 0
啊理八八
|
7月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（一）
前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（一）
啊理八八
530 0
老板这功能得加钱
|
5天前
|
JSON JavaScript 前端开发
web前端入门到实战：32道常见的js面试题，2024年最新秋招是直接面试吗
web前端入门到实战：32道常见的js面试题，2024年最新秋招是直接面试吗
老板这功能得加钱
14 1
老板这功能得加钱
|
5天前
|
JavaScript 前端开发 程序员
web前端入门到实战：32道常见的js面试题(1)，面试哪些
web前端入门到实战：32道常见的js面试题(1)，面试哪些
老板这功能得加钱
13 2
s:103
|
8天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
s:103
13 1

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    148
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    20
  • 3
    描述 JavaScript 中的垃圾回收机制。
    24
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    37
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    29
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    24
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 基于函数计算快速搭建Hexo博客系统
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考