标签：scene THREE Three 学习 camera renderer var new js
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 位置：xyz
plane.rotation.x=-0.5*Math.PI
plane.position.x=15
plane.position.y=0
plane.position.z=0
//物体添加到场景中
scene.add(plane)
3.创建相机
//创建相机(透视)角度，长宽比,最近视野，最远视野
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
//设定摄像机位置，指向场景中心
camera.position.x=-30
camera.position.y=40
camera.position.z=30
camera.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.PI
plane.receiveShadow = true
scene.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 = true
spotLight.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 = true
renderer.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);
}
标签：scene,THREE,Three,学习,camera,renderer,var,new,js 来源： https://blog.csdn.net/CatCat1997/article/details/120700382
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。