利用three.js画一个3D立体的正方体示例代码
简介
three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。
Three.js中的基本概念
Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。
场景就是需要绘制的对象，相机代表取景的视角，渲染器是绘制的载体（可以挂靠到浏览器的DOM元素中），
也就是我们通过相机拍摄场景然后绘制到目标介质中去。
创建场景、相机和渲染器
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
上述代码首先创建一个场景，然后创建一个PerspectiveCamera（立体感的相机），接着创建了一个WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器），然后挂靠为HTML文档body的DOM子元素。
介绍完毕，首先奉上实现的效果图：
这就是实现的效果图，还是挺有立体感的吧？
绘制前的准备
写代码前，要先下载最新的three.js框架包，引入自己的页面。
具体实现过程
准备一个canvas画布
这个画布是我们展现整个3D正方形的画布，也就是上图那个黑色的方框。
<!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>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
</body>
</html>
明确绘制思路
接下来的绘制过程会涉及到多个概念：canvas、scene、camera、renderer。
为了能更好理解绘制过程的代码和有助于记忆，我们先来理解这几个概念：
假设我们现在正在旅游的途中，看到了一个很唯美的画面，想把这个3D世界记录下来
- 这个唯美的场景就是scene，我们用相机camera拍摄下来形成照片
- 为了能看清楚这个照片，我们把这个照片放置在一个画布canvas上
- 最后，我们再用renderer修饰渲染一下
这样，我们就能成功展现这个3D世界了。
【程序还是很贴近生活哒😊】
通过现实世界的理解，我们接下来开始代码啦o(￣▽￣)ブ
准备好canvas、scene、camera、renderer，给一个初始化的方法
<script>
var camera, scene, renderer, canvas;
init();
function init () {
canvas = document.getElementById('canvas');
}
接下来我们要做的就是完善这个init()方法啦。
创建一个3D场景scene
场景最简单了，只需要用Scene声明一个scene对象。
scene = new THREE.Scene();
准备好camera
我们这里设置的相机是一个透视的相机PerspectiveCamera
camera有四个参数
- 第一个参数是视线辐射的角度，这个参数越大，我们能看到的视觉越广，这个物体看上去会更小。
- 第二个参数是图像内容展示的比例：width/height。我们一般把这个比例设置为和画布的比例一样，这样看到的图片才不会变形。
- 第三四个参数分别是相机离展示内容（正方体）最近的距离和最远的距离。
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
接下来给camera设置摆放的位置，并把camera放到场景scene中
由于我们的世界是3D的，camera的摆放位置也是三维的，涉及三个参数：X轴、Y轴、Z轴。(0, 0, 0)是相机的原点，(1, 1, 5)就是把我们的相机往右和往上移动了1个单位，往后移动了5个单位。
ps: 这个时候画布canvas的大小正好是正方体的5倍。
camera.position.set(1, 1, 5); scene.add(camera);
在场景中添加一个立方体
每个形状都是一个mesh，geometry可以理解为物体的骨骼， material可以理解为物体的皮囊
再创建一个可填充的形状cube
这样就构成了完整的实物
我们再将这个形状放入场景scene中
CubeGeometry参数设置为1：1：1表示这是一个正方体，当然可以自行修改比例，变成不一样的立方体
var geometry = new THREE.CubeGeometry(1, 1, 1);
// 添加three自带的最简单的一种材质
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
var cube = new THREE.Mesh(geometry, material);
var cube = new THREE.Mesh(geometry, material);
最后，创建renderer对图像进行渲染
将canvas交给renderer，也就是一个渲染的容器
antialias: true 平滑，抗锯齿，输出的画面会进行优化，不会带毛边
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
// 设置renderer的样式
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
经过以上步骤，我们的的正方体就成功创建好了。
以下是本例完整代码：
<!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>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
<script>
var camera, scene, renderer, canvas;
init();
function init () {
canvas = document.getElementById('canvas');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
camera.position.set(1, 1, 5);
scene.add(camera);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
// cube 是一个可以填充的形状
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer = new THREE.WebGLRenderer({
// 将canvas交给renderer 一个渲染的容器
canvas: canvas,
// 平滑， 抗锯齿 输出的画面会进行优化，不会带毛边
antialias: true
});
// 设置renderer的样子
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
}
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Three.js源码阅读笔记(Object3D类)
这是Three.js源码阅读笔记的第二篇,直接开始. Core::Object3D Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类.几何形体类.相机类.光照类等等:他们都是3D空间中的对象,所以称为Object3D类.Object3D构造函数如下: 复制代码 代码如下: THREE.Object3D = function () { THREE.Object3DLibrary.push( this ); this.id = THR
-
three.js中3D视野的缩放实现代码
通过Threejs基础学习--修改版知道创建一个相机的相关知识点 var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大 纵横比:aspect (3d物体的宽/高比例) 相机离视体积最近的距离:near 相机离视体积最远的距离:far 其中fov视野角(拍摄距离)越大,场景中的物体越小.fov视野角(拍摄距离)越
-
Three.js的使用及绘制基础3D图形详解
一. 前言 Three.js 是一款 webGL(3D绘图标准,在此不赘述)引擎,可以运行于所有支持 webGL 的浏览器.Three.js 封装了 webGL 底层的 API ,为我们提供了高级的开发接口,可以使用简单的代码去实现 3D 渲染.(官网:https://threejs.org/) 二. 为什么要选择Three.js? Three.js 作为原生 web3D 引擎,对插件式 web3D 引擎的优势不言而喻:不需要安装插件.在移动端支持好. Three.js 与其他原生 web3D
-
使用3D引擎threeJS实现星空粒子移动效果
three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl
-
three.js实现3D视野缩放效果
首先,不再废话了,什么是three.js,是干什么的,知道的就是知道,不知道的就百度吧. 小编为大家推荐一篇:Three.js快速入门教程 昨儿发现three.js中的3D视野的缩小和放大效果可以用照相机的远近焦来实现. 缩小后: 这里采用的是透视照相机: //照相机配置 var fov = 40;//拍摄距离 var near = 1;//最小范围 var far = 1000;//最大范围 var camera = new THREE.PerspectiveCamera(fov, windo
-
利用three.js画一个3D立体的正方体示例代码
简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.
-
利用Java手写一个简易的lombok的示例代码
目录 1.概述 2.lombok使用方法 3.lombok原理解析 4.手写简易lombok 1.概述 在面向对象编程中,必不可少的需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复写Getter/Setter.构造器方法.字符串输出的ToString方法.Equals/HashCode方法等.我们都知道Lombok能够替大家完成这些繁琐的操作,但是其背后的原理很少有人会
-
利用ECharts.js画K线图的方法示例
前言 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. 支持饼图.环形图.折线图.面积图.柱形图.条形图等. Chart.js 也是一款基于HTML5的图形库和ichartjs整体类似.不过Chart.js的教程文档
-
基于Three.js制作一个3D中国地图
目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali
-
使用QPainter画一个3D正方体
本文实例为大家分享了QPainter画一个3D正的具体代码,供大家参考,具体内容如下 My3DBox .h #include <Eigen/Geometry> using namespace Eigen; #define SQUARE_LENGTH 200//是一个边长200的正方体 #define CAMERA_DISTANCE 300//视点距离 class My3DBox : public QWidget { Q_OBJECT public: explicit My3DBox(QWidg
-
利用Node.js创建一个密码生成器的全步骤
目录 一. 准备工作 二. 编写命令行 2.1 添加版本和描述 2.2 配置密码长度命令 2.2 密码长度添加默认值:8 2.3 配置保存密码命令 2.4 配置密码格式: 没有数字 2.5 配置密码格式: 没有符号 三. 解析命令行-创建密码 3.1 添加color 3.2 添加剪贴板 四. 保存密码到对应的文件 五.将本地npm模块配置成全局passgen 总结 一. 准备工作 1.1 创建项目 $ npm init 1.2 安装依赖 $ npm i commander chalk clipb
-
使用Three.js制作一个3D奖牌页面
目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球
-
利用Vue.js制作一个拼图华容道小游戏
目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简
-
Android Flutter利用贝塞尔曲线画一个小海豚
目录 前言 效果图 实现步骤 总结 前言 贝塞尔曲线的应用填补了计算机绘制与手绘之前的差距,更能表达人想画出的曲线,为了更好的理解万能的贝塞尔曲线,而海豚是我认为在海洋生物中身体曲线最完美的海洋生物,在海洋中游泳速度最高可达80km/h;比驱逐舰速度还快,学习绘制正好学到了贝塞尔曲线,那么我们今天就用贝塞尔曲线画看看能不能画一只可爱的小海豚呢. 效果图 先上效果图: 实现步骤 path路径绘制贝塞尔曲线的方法非常简单,只需要传入控制点即可,二阶就传1个控制点1个终点,三阶就传2个控制点和1个终点
-
利用Three.js制作一个新闻联播开头动画
目录 这里才是引言 技术选型 场景分解 代码逻辑分解 创建背景图和背景音乐 背景图 背景音乐 在线体验地址:点我预览 代码地址:点我github 这里才是引言 五一居家隔离,闲着也是闲着,想着整个活儿,于是就有了这个项目. 项目本身不是很难,但是中间确实是遇到了一些小问题,断断续续也是花费了三四天时间才写完,还有一些需要优化的地方,后续有时间再整. 我会从脚手架开始,按照场景中出现的物体顺序逐条进行讲解制作,每个物体将分为独立的一篇文章,方便理解.Go. 技术选型 选用vite作为构建工具: 选