用php编写一个正方体,three.js画一个3D立体的正方体教程

Three.js是一个3DJavaScript库，基于右手坐标系，可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质，可以添加五光十色的光源，可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用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正方形的画布，也就是上图那个黑色的方框。

Camera 相机

#canvas {

width: 400px;

height: 300px;

border: 1px solid red;

margin: 50px auto;

display:block;

}

明确绘制思路

接下来的绘制过程会涉及到多个概念：canvas、scene、camera、renderer。

为了能更好理解绘制过程的代码和有助于记忆，我们先来理解这几个概念：

假设我们现在正在旅游的途中，看到了一个很唯美的画面，想把这个3D世界记录下来这个唯美的场景就是scene，我们用相机camera拍摄下来形成照片

为了能看清楚这个照片，我们把这个照片放置在一个画布canvas上

最后，我们再用renderer修饰渲染一下

这样，我们就能成功展现这个3D世界了。

【程序还是很贴近生活哒

用php编写一个正方体,three.js画一个3D立体的正方体教程相关推荐

three.js 画一个旋转的立方体
学习交流欢迎加群:789723098,博主会将一些demo整理共享试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界:同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验 ...
利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...
用js画一个中国地图
好的,下面是使用 JavaScript 画出中国地图的方法: 首先,你需要准备一张中国地图的图片.你可以在网上找一张合适的图片,或者使用图形工具(如 Adobe Illustrator)自己制作. 在 ...
用js画一个佐助的写轮眼
如果要使用 JavaScript 在网页上画出一个佐助的写轮眼,需要使用 canvas 元素,并使用 canvas 的绘图 API 来绘制各个部分. 首先,需要创建一个 canvas 元素,并在 Ja ...
HTML+CSS+JS实现 ❤️canvas 3D立体图片相册幻灯片❤️
用js画出一个等腰三角形
用js画一个等腰三角形效果图如下: 效果图如下: <html> <head> </head> <body> <script language=& ...
python画长方形的代码_python使用turtle画一个三角形、正方形（矩形或四边形）
今天我们用python使用turtle库画一个三角形.一个正方形. 1.画一个三角形. 实现方法是先画一个直线,然后旋转120度,然后继续画直线.这样反复画三条直线后,就形成一个等边三角形.先看效果: ...
前端怎么画三角形_用CSS画一个三角形
作者 | 李银城三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是 ...
用EasyX图形库画一个哆啦A梦
继续说图形库,加一点实战用图形画图(用来巩固代码): rectangle这个函数四个参数,左上角坐标的x,y值,右下角坐标的x,y值:因为只要有两个点,就可以以它们的横坐标之差为长,纵坐标之差为宽画 ...

用php编写一个正方体,three.js画一个3D立体的正方体教程

用php编写一个正方体,three.js画一个3D立体的正方体教程相关推荐

最新文章

热门文章