标签：几何体 scene 初探 THREE three new var position js
初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。学习了它之后，就可以在3D发挥你无穷的想象力和设计能力。虽说他是js，但是实际上是对WebGL的封装，对于不那么international得小伙伴来说文档可能不那么友好，相关中文文章零零散散又多又单薄，今天记录一下最近学习的情况，让广大萌新少走一些弯路。
1.渲染3D场景的一些条件
首先3D场景渲染的主角当然是一个场景啦，这个场景就是我们多能看到的全部内容，它包括一些光源light，和一个网格mesh。而网格又可以分成几何体geometry和材质material,几何体和材质又可以分成好多种，我们一会再说。
场景有了，那么在一个空间中，我们以什么视角去看这个场景呢？所以说我们还需要一个摄像机camera，他的功能其实就类似于我们的眼睛。常见的相机有两种，一种是正交投影相机orthographicCamera，另一种是透视相机，区别我们以后说。
2. 简单几何体
几何体按照维度分为二维几何体和三维几何体，二维几何体就是各种面，它们默认都在XY轴组成的平面上。三维几何体有宽度（X轴）高度（Y轴）和深度（Z轴）的划分。
日后还会记录复杂几何体。
3.材质
材质是几何体面的皮肤，决定几何体的外表。
这些材料都是比较常用的,我们也可以在一种几何体上面使用多种材质（其实是在对象的children中生成了多个网格）。
4.光源
three.js的光源都是从生活中抽象出来的，效果也和我们生活中的相差无几。下面前四种是经常用的
注意，这些光源的默认值有阴影的区分。
5. 摄像机
之前说过摄像机有正交投影相机和透视相机之分，我们使用不同的摄像机，所呈现的东西也不一样。正交相机的距离对于渲染的结果没有什么影响，多数用在游戏中，他有7个参数分别是左边界、有边界、上边界、下边界、近面距离、远面距离、变焦。透视相机和我们人的眼睛看到的十分相近，都是近大远小，他有5各参数，分别是视场（视野所及的范围角），长宽比，近面距离，远面距离，变焦。我们经常使用透视相机。
6.渲染器
渲染器实际上就是调用GL底层的渲染方法，如果不使用渲染器，我们什么都看不到。渲染起的也分好多种，使用最多的是WebGLRender();他有两个参数，分别是场景scene和相机camera。
7. 小demo
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
预览demo请移步至原文http://www.bettersmile.cn
下一章我们详细的讲一讲几何体。
标签：几何体,scene,初探,THREE,three,new,var,position,js 来源： https://www.cnblogs.com/lihaijia/p/14484542.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。