Three.js

01-three.js

1.three.js资源

GitHub：https://github.com/mrdoob/three.js

官网：https://threejs.org/

库	功能
Physijs	Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现
stats.js	JavaScript性能监控器，同样也可以测试webgl的渲染性能
dat.gui	轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色
tween.js	借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动
ThreeBSP	可以作为three.js的插件，完成几何模型的布尔，各类三维建模软件基本都有布尔的概念

2.学习three.js与webGl

Threejs是基于原生WebGl API和着色器封装得到的3D引擎，也就是一个js库。通过原生WebGL直接编写程序，会比较麻烦，一般开发项目直接使用Thre.js引擎。简单的项目一般也用不到底层WebGL知识，不过学习WebGl有助于深入理解Threejs，如果使用Thre.js开发项目需要自定义着色器的时候，肯定也是要学习底层WebGL和着色器GLSL知识。

02-three.js基础运用

1.程序结构

2.创建场景

类别	内容
二维几何	PlaneGeometry 平面、 CircleGeometry 圆形、 ShapeGeometry 塑形
三维几何体	BoxGeometry 立方体（或叫三维方块）、 SphereGeometry 球体、 CylinderGeometry 柱体、 TorusGeometry 圆环、TorusKnotGeometry 环面扭结、 PolyhedronGeometry 多面体、 IcosahedronGeometry 十二面体、 OctahedronGeometry 八面体、 TetrahedronGeometry 四面体
复杂几何体	ConvexGeometry 凸面体、 LatheGeometry 扫描面、 ExtrudeGeometry 拉伸几何体、 TubeGeometry 管状体、 ParametricGeometry 参数几何体、 TextGeometry 文本几何体

名称	内容	参数
MeshBasicMaterial	MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框，对场景中的雾化会有反应。	color(颜色)，wireframe(线框)，wireframeLinewidth(线框宽度)，wireframeLinecap(线框线段端点)，wireframeLinejoin(线框线段连接点)，shading(着色)、 vertexColors(顶点颜色)，fog(雾化)
MeshPhongMaterial	该材料使用非基于物理的Blinn-Phong模型来计算反射系数。通过THREE.MeshPhongMaterial，可以创建一种光亮的材质，与在MeshLambertMaterial中使用的Lambertian模型不同，它可以模拟带有高光的闪亮表面（如漆木）。	color(颜色)、shininess(光滑度)，specular(高光)，ambient(环境色)，emissive(发射颜色)，metal(像素颜色计算)，wrapAround（光照效果），wrapRGB（控制光）
MeshLambertMaterial	这种材质可以用来创建暗淡的并不光亮的表面。无光泽表面的材质，无镜面高光。这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。该材质非常易用，而且会对场景中的光源产生反应。	color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors和fog

 //创建场景var scene = new THREE.Scene();//显示三维坐标轴var axes = new THREE.AxesHelper(20)//添加坐标系到场景中scene.add(axes)//创建平面几何var planeGeometry = new THREE.PlaneGeometry(60, 20)//几何体材质var planeMaterial=new THREE.MeshBasicMaterial({color:0xCCCCCC})//创建平面var plane=new THREE.Mesh(planeGeometry,planeMaterial)//物体位置旋转xyz 位置：xyzplane.rotation.x=-0.5*Math.PIplane.position.x=15plane.position.y=0plane.position.z=0//物体添加到场景中scene.add(plane)

3.创建相机

  //创建相机(透视)角度，长宽比,最近视野，最远视野var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)//设定摄像机位置，指向场景中心camera.position.x=-30camera.position.y=40camera.position.z=30camera.lookAt(scene.position)

4.渲染

            //创建渲染var renderer = new THREE.WebGLRenderer()//设置渲染器初始颜色renderer.setClearColor(new THREE.Color(0xEEEEEE))//设置输出canvas画面大小宽，高renderer.setSize(window.innerWidth, window.innerHeight)//渲染document.getElementById('webgl-output').appendChild(renderer.domElement)renderer.render(scene,camera)

5.光源与阴影

阴影与光源有关，涉及函数包括castShadow，receiveShadow。投影物体与光源需要设置castShadow为true，

同时接受阴影的平面需要receiveShadow为true，注意投影平面不使用MeshBasicMaterial，否则可能存在投影不生效情况

 function init() {//创建场景var scene = new THREE.Scene();//创建阴影投射平面var planeGeometry = new THREE.PlaneGeometry(40, 40)var planeMaterial = new THREE.MeshLambertMaterial({color: 0xCCCCCC})var plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = -0.5 * Math.PIplane.receiveShadow = truescene.add(plane) //物体添加到场景中//添加球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20)var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xFFA500})var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)sphere.position.set(0, 4, 2)sphere.castShadow = true//阴影scene.add(sphere) //物体添加到场景中//添加聚光灯var spotLight = new THREE.SpotLight(0xFFFFFF)spotLight.position.set(30, 30, -30)spotLight.castShadow = truespotLight.shadow.mapSize.width = 2048; //阴影贴图宽度设置为2048像素spotLight.shadow.mapSize.height = 2048;   //阴影贴图高度设置为2048像素scene.add(spotLight)//创建相机(透视)角度，长宽比,最近视野，最远视野var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)camera.position.set(30,40,30)//设定摄像机位置，指向场景中心camera.lookAt(scene.position)//创建渲染//设置渲染器初始颜色//渲染webGLRenderer//设置输出canvas画面大小宽，高var renderer = new THREE.WebGLRenderer({antialias: true,logarithmicDepthBuffer: true,})renderer.shadowMap.enabled = truerenderer.setClearColor(new THREE.Color(0xEEEEEE))renderer.setSize(window.innerWidth, window.innerHeight)document.getElementById('webgl-output').appendChild(renderer.domElement)renderer.render(scene, camera)}

6.动画效果

旋转

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流

      function rotate() {renderer.render(scene, camera)sphere.rotateY(0.01)requestAnimationFrame(rotate)}

鼠标控制相关库为：OrbitControls

监听

    //创建控制器对象var control = new OrbitControls(camera, renderer.domElement)// 监听鼠标control.addEventListener('change', () => {renderer.render(scene, camera)})

requestAnimationFrame

     animate();var control = new OrbitControls(camera, renderer.domElement)function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);}

Three.js学习相关推荐

ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
js 学习笔记（一）
前言网上其实已经有非常多的js学习资料了,但是每个人都有自己的基础,所以往往是有的人讲的深一点,有的人说的浅一点. 就我自身而言,想要匹配自己水平的找些资料,往往是十分的零碎,所以可能今天看到的文章 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...

Three.js学习