本文主要详细介绍了Three.js的基础学习教程，有一定的参考价值。感兴趣的朋友可以参考一下。
一、Three.js官网及使用Three.js必备的三个条件
1.three . js https://threejs.org/,官网
2.使用Three.js的三个必要条件
(为了能够用Three.js显示任何东西，我们需要三样东西：一个场景、一个摄像机和一个渲染器，这样我们可以用摄像机渲染场景。)
一般是指使用three.js可以实现任何显示的东西，必须满足三个条件：一个场景，一个相机摄像头，一个渲染器。三者缺一不可。
二、使用Three.js必备三个条件（a scene场景、a camera相机、a renderer渲染器）之间的关系
如上图所示，说明场景、相机、渲染器之间的关系[/code]。
1.一个场景场景就是一个对象的容器【通俗的理解事物】。开发者可以把需要的角色放到场景中，比如苹果和葡萄。同时，角色本身管理它在场景中的位置。
2.相机相机的功能是面向场景，在场景中取一个合适的场景并拍摄下来。[想象一下成年人的眼睛]
3.渲染器渲染器用于在浏览器中显示相机拍摄的图片。
三、通过上述理论来实践官网案例
效果图如下
官网案例实现源代码
超文本标记语言
头
titleMy first three.js app/title
风格
正文{边距：0；}
画布{宽度：100%；高度：100% }
/风格
/头
身体
脚本src='。/lib/three.js'/script
脚本
//创建一个场景对象
var场景=新三。场景()；
//创建一个照相机对象
var相机=新三。透视照相机(75，window.innerWidth/window.innerHeight, 0.1，1000)；
//创建渲染器对象
var渲染器=新三。WebGLRenderer()；
//设置画布大小
renderer . setsize(window . inner width，window . inner height)；
//设置画布颜色
renderer . setclearcolor(0x 00aa bb，1.0)；
//在浏览器中添加渲染画布，让摄像头拍下的场景留下来。
document . body . appendchild(renderer . DOM element)；
//创建一个长宽高为1的几何对象。
var几何=新三。BoxGeometry( 1，1，1)；
//材料，皮肤
var材质=新三。MeshBasicMaterial({ color:0x 00ff 00 })；
//将材质material添加到几何体中，生成新的对象几何体立方体。
var cube=新三。网格(几何、材质)；
//将几何体添加到场景中
scene.add(立方体)；
//设置摄像头Z轴，垂直于电脑屏幕位置。
camera . position . z=5；
var render=function () {
/* requestAnimationFrame(render)；//循环呈现
cube . rotation . x=0.1；//x轴每秒旋转60次
cube . rotation . y=0.1；//y轴每秒旋转60次*/
renderer.render(场景、相机)；//将摄像机拍摄的几何图形实时渲染到场景中
};
render()；
/脚本
/body
/html
通过官网的案例不难发现，相机摄像头的默认观察方向是屏幕的方向(Z轴负向)。当坐标发生变化时，需要将相机对准原点来观察物体。
z轴负方向？所以这里有必要说一下三维坐标(如下图)。
镜头指向原点？再说说相机摄像头(很重要！想象一下失明是什么感觉。
案例中使用了透视相机(物体离视点越近，物体越大，远处的物体画得越小，这和我们日常生活中看物体的方式是一致的。)
var相机=新三。透视照相机(视野、视角、近、远)
新三人组。透视照相机(FOV、方位、近、远)透视照相机
Fov:FOV角(有些地方叫拍摄距离)越大，场景中的物体越小，FOV角越小，场景中的物体越大。
长宽比
从摄像机到可视体积的最近距离：近
摄像机到视觉体的最远距离：远
综上所述，结合上面的三维坐标和相机图，相信理解相机应该是非常简单的。接下来修改上面的情况(说明后一种情况下的鼠标滚动放大缩小和三维旋转都是基于摄像头的)
四、将官网案修改且设置相机朝向及相机位置
利用[看看]方法来设置相机的视野中心看()看的参数是一个属性包含中心坐标『x』y』z的对象。
设置相机的上方向为正方向y轴相机。x=0；camera.up.y=1/*相机朝向-相机上方为y轴*/;相机。z=0；
五、实现旋转立方体
旋转动画原理相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，实时将相机拍摄下来的图片，放到浏览器中去显示
//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
函数动画(){
var timer=日期。now()* 0.0001；
相机。位置。x=数学。cos(定时器)* 100；
相机。位置。z=数学。sin(定时器)* 100；
相机。看(场景。位置)；//设置相机视野中心
renderer.render(场景、相机);
requestAnimationFrame(动画);//渲染回调函数
}
实现效果图如下所示
旋转立方体——案例源码
！文档类型超文本标记语言
超文本标记语言
头
meta charset='UTF-8 '
标题旋转立方体/标题
风格
#画布框架{
宽度：100%;
高度：600像素
}
/风格
/头
body onload='threeStart()'
div id='canvas-frame' /div
/body
脚本类型='text/javascript' src=' ./lib/three.js' /script
脚本类型='文本/javascript '
定义变量渲染器，//渲染器
宽度=文档。getelementbyid(“canvas-frame”).clientWidth，//画布宽
高度=文档。getelementbyid(“canvas-frame”).客户端高度；//画布高
//初始化渲染器
函数initThree(){
渲染器=新三WebGLRenderer({
抗锯齿：正确
//canvas:文档。getelementbyid(“canvas-frame”)
});
renderer.setSize(宽度，高度);
渲染器。setclearcolor(0x ffffff，1.0)；
文档。getelementbyid(“canvas-frame”).appendChild(渲染器。DOM元素)；
渲染器。setclearcolor(0x ffffff，1.0)；
}
//初始化场景
定义变量场景；
函数initScene(){
场景=新三。场景();
}
定义变量相机；
函数initCamera() { //透视相机
相机=新三。透视相机(45,宽/高，1,10000);
相机。位置。x=50
相机。位置。y=150
相机。位置。z=150
相机。x=0；
相机。向上。y=1；//相机朝向-相机上方为y轴
相机。z=0；
相机。看({//相机的中心点
x : 0，
y : 0，
z : 0
});
//相机正交相机
/*相机=新三10 .正字法Camera(-300，300，100，-100，1，10000)；
相机。位置。x=250
相机。位置。y=100
相机。位置。z=1800
相机。x=0；
相机。向上。y=1；//相机朝向-相机上方为y轴
相机。z=0；
相机。看({//相机的中心点
x : 0，
y : 0，
z : 0
});*/
}
函数initLight(){
//灯光-这里使用环境光
//var light=新三7 .方向灯(0x ffffff)；/*方向性光源*/
//light.position.set(600，1000，800)；
定义变量光=新三环境光线(0x ffffff)；//模拟漫反射光源
light.position.set(600，1000，800)；//使用背景光时可以忽略方向和角度，只考虑光源的位置
场景.添加(灯光);
}
函数initObject(){ //初始化对象
//初始化地板
init floor()；
}
函数initGrid(){ //辅助网格
var助手=新三GridHelper( 1000，50)；
helper.setColors(0x0000ff，0x 808080)；
场景。添加(帮助者)；
}
函数initFloor(){
//创建一个立方体
定义变量几何=新三BoxGeometry(80，20，80)；
for(var I=0；我几何形状。表面。长度；i=2 ) {
var hex=数学。random()*0x ffffff；
geometry.faces[ i ].color.setHex(十六进制);
几何。面孔[I 1]。颜色。设置十六进制(十六进制);
}
定义变量材质=新三MeshBasicMaterial({顶点颜色：三.脸色})；
//将材料材料添加到几何体几何学
可变网格=新三。网格（几何、材质);
网格位置=新三。向量3(0,0,0);
场景。添加(网格)；
}
//初始化页面加载
函数threeStart(){
//初始化渲染器
init three()；
//初始化场景
初始化场景()；
//初始透视化相机
初始化camera()；
//初始化光源
//init light()；
//模型对象
init object()；
//初始化网格参考线
init grid()；
//renderer.render(场景，相机)；
//实时动画
动画()；
}
/*
*旋转原则
*摄像机绕Y轴旋转
*不断修改摄像机的X轴和Z轴位置，使场景中的物体始终保持在摄像机的视野范围内，
*相机拍摄的实时图片将显示在浏览器中。
*/
函数动画(){
//渲染成像
var timer=date . now()* 0.0001；
camera . position . x=math . cos(timer)* 100；//相机位置x轴方向
camera . position . z=math . sin(timer)* 100；//相机位置Y轴方向
//设置摄像机的视野中心
camera . look at(scene . position)；
//渲染成像
renderer.render(场景、相机)；
//渲染回调动画函数
requestAnimationFrame(动画)；
}
/脚本
/html
至此，附上个人画图思路流程图。
[参考]
利用3D引擎threeJS实现星形粒子运动效果
http://www.hewebgl.com/article/getarticle/50
https://read.douban.com/reader/ebook/7412854/
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。