JS库之Three.js基础入门-js教程-PHP中文网

首页

web前端

js教程

JS库之Three.js基础入门

巴扎黑

Sep 15, 2017 am 09:15 AM

javascript 入门

three.js是一款webGL框架，由于其易用性被广泛应用。下面脚本之家小编通过案例给大家阐述three.js的基本配置方法，具体内容详情大家参考下本文吧

开场白

webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。

博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享。

本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！

准备工作

在写代码之前，你首先要去下最新的three.js框架包，在你的页面里引入three.js，当然文件包里面也有不少的demo便于大家学习；

chrome是目前支持webGL最好的浏览器，Firefow居其次，国内的遨游、猎豹经测试也可以运行。

从实例开始入门!

首先我们搭建html，如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 p#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <p id="container"></p>
 </body>
</html>

登录后复制

准备和画布框大小一致的领域用于WebGL绘制。具体来说：

(1) body 标签中添加 id 为「canvas3d」的 p 元素。

(2) style 标签中指定「canvas3d」的CSS样式。

需要注意的是，我们并不需要写一个

下面我们开始写脚本，我们将通过以下五步构建一个简单的立体模型，这也是three.js的基本步骤：

1.设置three.js渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。一般来说我们都把进行渲染操作的软件叫做渲染器。具体来说要进行下面这些处理。

(0) 声明全局变量（对象）；

(1) 获取画布「canvas-frame」的高宽；

(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）；

(3) 指定渲染器的高宽（和画布框大小一致）；

(4) 追加【canvas】元素到【canvas3d】元素中；

(5) 设置渲染器的清除色(clearColor)。

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

登录后复制

2.设置摄像机camera

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。本文按照以下的步骤设置透视投影方式。

(0) 声明全局的变量（对象）；

(1) 设置透视投影的相机；

(2) 设置相机的位置坐标；

(3) 设置相机的上为「z」轴方向；

(4) 设置视野的中心坐标。　　　　　

　 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }

登录后复制

3.设置场景scene

场景就是一个三维空间。用 [Scene] 类声明一个叫 [scene] 的对象。　　　　　

　　//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }

登录后复制

4.设置光源light

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。和OpenGL一样、在一个场景中可以设置多个光源。基本上，都是环境光和其他几种光源进行组合。如果不设置环境光，那么光线照射不到的面会变得过于黑暗。本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

(0) 声明全局变量(对象)

(1) 设置平行光源

(2) 设置光源向量

(3) 追加光源到场景

这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源

　　　　//设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }

登录后复制

5.设置物体object

这里，我们声明一个球模型　　　

　　　//设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }

登录后复制

最后，我们写一个主函数执行以上五步：

　　　　　　　　//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

登录后复制

这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：

总结

以上就是three.js的入门内容，我们核心的五步就是：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~

本例完整代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
 //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 p#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload=&#39;threeStart();&#39;>
 <!--盛放canvas的容器-->
 <p id="canvas3d"></p>
 </body>
</html>

登录后复制

以上是JS库之Three.js基础入门的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7678

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

值得你花时间看的扩散模型教程，来自普渡大学 Apr 07, 2024 am 09:01 AM

Diffusion不仅可以更好地模仿，而且可以进行「创作」。扩散模型（DiffusionModel）是一种图像生成模型。与此前AI领域大名鼎鼎的GAN、VAE等算法，扩散模型另辟蹊径，其主要思想是一种先对图像增加噪声，再逐步去噪的过程。其中如何去噪还原原图像是算法的核心部分。最终算法能够从一张随机的噪声图像中生成图像。近年来，生成式AI的惊人增长将文本转换为图像生成、视频生成等领域的许多令人兴奋的应用提供了支持。这些生成工具背后的基本原理是扩散的概念，这是一种特殊的采样机制，克服了以前的方法中被

一键生成PPT！Kimi ：让「PPT民工」先浪起来 Aug 01, 2024 pm 03:28 PM

Kimi：一句话，十几秒钟，一份PPT就新鲜出炉了。PPT这玩意儿，可太招人烦了！开个碰头会，要有PPT；写个周报，要做PPT；拉个投资，要展示PPT；就连控诉出轨，都得发个PPT。大学更像是学了个PPT专业，上课看PPT，下课做PPT。或许，37年前丹尼斯・奥斯汀发明PPT时也没想到，有一天PPT竟如此泛滥成灾。吗喽们做PPT的苦逼经历，说起来都是泪。「一份二十多页的PPT花了三个月，改了几十遍，看到PPT都想吐」；「最巅峰的时候，一天做了五个PPT，连呼吸都是PPT」；「临时开个会，都要做个

CVPR 2024全部奖项公布！近万人线下参会，谷歌华人研究员获最佳论文奖 Jun 20, 2024 pm 05:43 PM

北京时间6月20日凌晨，在西雅图举办的国际计算机视觉顶会CVPR2024正式公布了最佳论文等奖项。今年共有10篇论文获奖，其中2篇最佳论文，2篇最佳学生论文，另外还有2篇最佳论文提名和4篇最佳学生论文提名。计算机视觉（CV）领域的顶级会议是CVPR，每年都会吸引大量研究机构和高校参会。据统计，今年共提交了11532份论文，2719篇被接收，录用率为23.6%。根据佐治亚理工学院对CVPR2024的数据统计分析，从研究主题来看，论文数量最多的是图像和视频合成与生成（Imageandvideosyn

从裸机到700亿参数大模型，这里有份教程，还有现成可用的脚本 Jul 24, 2024 pm 08:13 PM

我们知道LLM是在大规模计算机集群上使用海量数据训练得到的，本站曾介绍过不少用于辅助和改进LLM训练流程的方法和技术。而今天，我们要分享的是一篇深入技术底层的文章，介绍如何将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群。这篇文章来自于AI初创公司Imbue，该公司致力于通过理解机器的思维方式来实现通用智能。当然，将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群并不是一个轻松的过程，充满了探索和试错，但Imbue最终成功训练了一个700亿参数的LLM，并在此过程中积累

AI在用 | AI制作独居女孩生活Vlog，3天狂揽上万点赞量 Aug 07, 2024 pm 10:53 PM

机器之能报道编辑：杨文以大模型、AIGC为代表的人工智能浪潮已经在悄然改变着我们生活及工作方式，但绝大部分人依然不知道该如何使用。因此，我们推出了「AI在用」专栏，通过直观、有趣且简洁的人工智能使用案例，来具体介绍AI使用方法，并激发大家思考。我们也欢迎读者投稿亲自实践的创新型用例。视频链接：https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ最近，独居女孩的生活Vlog在小红书上走红。一个插画风格的动画，再配上几句治愈系文案，短短几天就能轻松狂揽上

入门学习C语言的五款编程软件 Feb 19, 2024 pm 04:51 PM

C语言作为一门广泛应用的编程语言，对于想从事计算机编程的人来说是必学的基础语言之一。然而，对于初学者来说，学习一门新的编程语言可能会有些困难，尤其是缺乏相关的学习工具和教材。在本文中，我将介绍五款帮助初学者入门C语言的编程软件，帮助你快速上手。第一款编程软件是Code::Blocks。Code::Blocks是一个免费的开源集成开发环境（IDE），适用于

技术入门者必看：C语言和Python难易程度解析 Mar 22, 2024 am 10:21 AM

标题：技术入门者必看：C语言和Python难易程度解析，需要具体代码示例在当今数字化时代，编程技术已成为一项越来越重要的能力。无论是想要从事软件开发、数据分析、人工智能等领域，还是仅仅出于兴趣学习编程，选择一门合适的编程语言是第一步。而在众多编程语言中，C语言和Python作为两种广泛应用的编程语言，各有其特点。本文将对C语言和Python的难易程度进行解析

细数RAG的12个痛点，英伟达高级架构师亲授解决方案 Jul 11, 2024 pm 01:53 PM

检索增强式生成（RAG）是一种使用检索提升语言模型的技术。具体来说，就是在语言模型生成答案之前，先从广泛的文档数据库中检索相关信息，然后利用这些信息来引导生成过程。这种技术能极大提升内容的准确性和相关性，并能有效缓解幻觉问题，提高知识更新的速度，并增强内容生成的可追溯性。RAG无疑是最激动人心的人工智能研究领域之一。有关RAG的更多详情请参阅本站专栏文章《专补大模型短板的RAG有哪些新进展？这篇综述讲明白了》。但RAG也并非完美，用户在使用时也常会遭遇一些「痛点」。近日，英伟达生成式AI高级解决

See all articles

JS库之Three.js基础入门

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题