前言

本文不会对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>
  1. 创建场景对象

借助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>
  1. 创建网格模型

这行代码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>
  1. 设置光源

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

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118693237

十分钟快速实战Three.js的更多相关文章

  1. [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！

    十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...

  2. 十分钟快速入门 Python，看完即会，不用收藏！

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  3. Redis 十分钟快速入门

    本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...

  4. Redis数据类型简介（十分钟快速学习Redis）

    如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库 如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端 如何在Redis中管理字符串 如何在Redis中 ...

  5. 十分钟快速入门 Python

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  6. 十分钟快速上手NutUI

    本文将会从 NutUI 初学者的使用入手,对 NutUI 做了一个快速的概述,希望能帮助新人在项目中快速上手. 文章包括以下主要内容 安装引入 NutUI NutUI 组件的使用 NutUI 主题和样 ...

  7. 【容器云】十分钟快速构建 Influxdb+cadvisor+grafana 监控

    本文作者:七牛云布道师@陈爱珍,DBAPlus社群联合发起人.前新炬技术专家.多年企业级系统的应用运维及分布式系统实战经验.现专注于容器.微服务及DevOps落地的研究与实践. 安装过程 三个都直接下 ...

  8. [Nodejs]十分钟快速编写简单静态文件服务器

    学了几天Nodejs 后我又干上了前端的活.这次遇到的问题是,我想在不同的设备上方便的查看我编写的网页,很自然的就想到要是能在本地搭建一个简单的http服务器的话,那局域网内的所有设备都可以访问了,这 ...

  9. HDFS+MapReduce+Hive+HBase十分钟快速入门

    1.     前言 本文的目的是让一个从未接触Hadoop的人,在很短的时间内快速上手,掌握编译.安装和简单的使用. 2.     Hadoop家族 截止2009-8-19日,整个Hadoop家族由以 ...

随机推荐

  1. JetBrains Rider C# 学习②

    前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5Dul3GLIICRHg 提取码:1314 C#入门课程 刘铁猛 链接:https://pan.ba ...

  2. Java核心知识1：泛型机制详解

    1 理解泛型的本质 JDK 1.5开始引入Java泛型(generics)这个特性,该特性提供了编译时类型安全检测机制,允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,即给类型指定一个参 ...

  3. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  4. Kotlin 之 let、with、run、apply、also 函数的使用

    一.内联拓展函数 let let 扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择:let函数另一个作用就是可以避免写一些判断null的操 ...

  5. 2022.02.27 CF811E Vladik and Entertaining Flags

    2022.02.27 CF811E Vladik and Entertaining Flags https://www.luogu.com.cn/problem/CF811E Step 1 题意 在一 ...

  6. MySQL基础之写表(创建表)

    我的博客 工具 市面上的SQL可视化工具不少,我一般常用的主要就是这两个. 当然,IDEA也是集成了数据库可视化功能的.除了这些,还有DBeaver.SQLyog等等. 我比较喜欢DataGrip,我 ...

  7. Oracle 定时任务增删改查

    创建 -- 创建定时任务 DECLARE jobno NUMBER; BEGIN dbms_job.submit ( jobno, -- 定时器ID,系统自动获得 'PRC_INSERT;', -- ...

  8. XCTF练习题---MISC---simple_transfer

    XCTF练习题---MISC---simple_transfer flag:HITB{b3d0e380e9c39352c667307d010775ca} 解题步骤: 1.观察题目,下载附件 2.经过观 ...

  9. screen使用小结

    目录 安装 shell-screen-window关系 常用参数 快捷键 离开当前screen 打开一个新的窗口 查看窗口列表 窗口的快速切换 回到行首 关闭窗口 关闭所有窗口 关闭screen 删除 ...

  10. go-micro集成链路跟踪的方法和中间件原理

    前几天有个同学想了解下如何在go-micro中做链路跟踪,这几天正好看到wrapper这块,wrapper这个东西在某些框架中也称为中间件,里边有个opentracing的插件,正好用来做链路追踪.o ...