十分钟快速实战Three.js
前言
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
学习
我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段（模块）来进行开发。
模块如下：
场景对象
网格模型
光源
相机
渲染器对象
渲染操作
- 创建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>
- 创建场景对象
借助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>
- 创建网格模型
这行代码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>
- 设置光源
代码new THREE.PointLight(’#fff’)创建了一个点光源对象，参数#fff定义的是光照强度， 你可以尝试把参数更改为#666，你会看到立方体的表面颜色变暗，这很好理解，实际生活中灯光强度变低了，周围的景物自然暗淡。比如夜空中的照明弹就是一个点光源例子。代码THREE.AmbientLight(’#333’)创建了一个环境光对象，环境光的颜色会影响到整个场景，环境光没有特定的光源，是模拟漫反射的一种光源，因此不需要指定位置它能将灯光均匀地照射在场景中每个物体上面，一般情况下用来弱化阴影或者添加一些颜色到环境中，因此不能将环境光作为场景中的唯一光源。
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118693237
十分钟快速实战Three.js的更多相关文章
- [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！
十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...
- 十分钟快速入门 Python，看完即会，不用收藏！
本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...
- Redis 十分钟快速入门
本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...
- Redis数据类型简介（十分钟快速学习Redis）
如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库 如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端 如何在Redis中管理字符串 如何在Redis中 ...
- 十分钟快速入门 Python
本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...
- 十分钟快速上手NutUI
本文将会从 NutUI 初学者的使用入手,对 NutUI 做了一个快速的概述,希望能帮助新人在项目中快速上手. 文章包括以下主要内容 安装引入 NutUI NutUI 组件的使用 NutUI 主题和样 ...
- 【容器云】十分钟快速构建 Influxdb+cadvisor+grafana 监控
本文作者:七牛云布道师@陈爱珍,DBAPlus社群联合发起人.前新炬技术专家.多年企业级系统的应用运维及分布式系统实战经验.现专注于容器.微服务及DevOps落地的研究与实践. 安装过程 三个都直接下 ...
- [Nodejs]十分钟快速编写简单静态文件服务器
学了几天Nodejs 后我又干上了前端的活.这次遇到的问题是,我想在不同的设备上方便的查看我编写的网页,很自然的就想到要是能在本地搭建一个简单的http服务器的话,那局域网内的所有设备都可以访问了,这 ...
- HDFS+MapReduce+Hive+HBase十分钟快速入门
1. 前言 本文的目的是让一个从未接触Hadoop的人,在很短的时间内快速上手,掌握编译.安装和简单的使用. 2. Hadoop家族 截止2009-8-19日,整个Hadoop家族由以 ...
随机推荐
- linux中sort、uniq、cut、tr、wc命令的使用
文本处理命令 1.sort命令 使用场景 : 用于将文件内容加以排序(可以和cat一起用) 参数 作用 -n 依照数值的大小排序 -r 以相反的顺序来排序(默认只比较第一个数,-rn是按所有数值比较) ...
- 『现学现忘』Git基础 — 2、Git和SVN的区别
1.Git和SVN的区别 (1)SVN(集中式版本管理系统) 集中式的版本控制系统都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连到这台服务器,取出最新的文件或者 ...
- partOne讲解思路
讲解思路 分解:把一个复杂的大问题,拆解成更可执行.更好理解的小步骤. 模式识别:找出相似模式,高效解决细分问题. 抽象:聚焦最重要的信息,忽视无用细节. 算法:设计一步一步的解决路径,解决整个问 ...
- 图数据库｜正反向边的最终一致性——TOSS 介绍
本文首发于 Nebula Graph Community 公众号 Nebula Graph v2.6 当中比较重要的特性之一便是 TOSS.通过本文,我将带你全方位了解 TOSS 为何物. 从一条 G ...
- R2DBC正式孵化成功，利好Spring Webflux
2022年4月25日,R2DBC社区宣布具有普遍可用性的1.0.0.RELEASE正式发布. R2DBC致力于为反应式编程 API操作关系型数据库带来规范支持,R2DBC不同于我们熟知的JDBC规范, ...
- [洛谷] P2241 统计方形（数据加强版）
点击查看代码 #include<bits/stdc++.h> using namespace std; long long n, m, total, sum1, sum2; int mai ...
- jfinal极速开发
下载jfinal项目,上面都配置好了不用自己新建从头配置.https://jfinal.com/ idea打开项目 配置数据库 resources目录下demo-config-dev.txt # co ...
- 分享一个为Linux创建的任务管理器，看起来就像Windows的任务管理器
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 链接:https://www.linuxmi.com/sysmontask-linux-tas ...
- 使用 Swoole 加速你的 CMS 系统，并实现热更新 (基于 Laravel 框架)
主题:使用 Swoole 加速你的 CMS 系统,并实现热更新 关于 Swoole 的简介不再在此赘述,各位可以自行查看官网的文档进行详细的了解. 本文以 MyCms 为例,简要说明 Swoole 结 ...
- deepin安装jdk配置环境
下载一个jdk压缩包https://download.oracle.com/java/18/latest/jdk-18_linux-x64_bin.tar.gz 这个包,不用安装,下下来,直接解压,然 ...