three.js入门3
为什么要用three.js
Three.js为我们封装了底层的WebGl接口，使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景。相比较使用底层的WebGL我们可以使用更少的代码，大大的降低了学习成本，使开发变的更高效。
新建HTML页面
首先新建一个HTML页面，引入Three.js文件。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>three.js</title>
</head>
<body>
<script type="text/javascript" src="js/Three/three.js"></script>
<script> </script>
</body> </html>
创建一个三维场景
var scene = new THREE.Scene();
添加一个渲染器
Three.js为我们提供了如：canvas,SVG,CSS3..众多渲染器，但是WebGL渲染器相较比较灵活，所以均以WebGL为例。
var render = new THREE. THREE.WebGLRenderer({
//抗锯齿属性，WebGLRenderer常用的一个属性
antialias: true
});
//设置背景色为白色(0xffffff)
render.setClearColor(0xffffff);
//设置渲染尺寸为页面大小
render.setSize(window.innerWidth, window.innerHeight);
//使用WebGLRenderer生成canvas元素。
document.body.appendChild(render.domElement);
当然也可以自己定义一个
canvascanvas <canvas id="myCanvas" width="400px" height="300px" ></canvas> 并将WebGLRenderer定义改为 var render = new THREE.WebGLRenderer({
canvas: document.getElementById('myCanvas'),
antialias: true
});
三维场景中重要的组件
三维场景中重要的组件包括 renderer(渲染器)、scene(场景) 和camera(相机)。
three.js使用的右手坐标系。
camera
camera(相机)，决定了你开始看到三维场景的位置，朝向和角度等信息。
three.js相机有两种
PerspectiveCamera(fov,aspect,near,far) 透视相机
fov :视角。从相机能看到的部分场景。对于游戏来讲大概有60到90度左右的视场。推荐默认值：45
aspect:长宽比。渲染结果的横向长度和纵向长度比。推荐默认值：window.innerWidth/window.innerHeight
near ：相机开始看到的渲染距离。推荐默认值:0.1
far :相机最远可以看到的渲染距离。推荐默认值：1000
OrthographicCamera(left,right,top,bottom,near,far)
正投影相机
left ：相机可以看到渲染的左平面。
right
：相机可以看到渲染的右平面。
top
：相机可以看到渲染的上平面。
bottom：相机可以看到渲染的下平面。
naer :同上PerspectiveCamera
far :同上PerspectiveCamera
camera 常用到的函数包括：lookAt()设置相机所看的位置
<span style="font-family:Courier New;"> camera.lookAt(new THREE.Vector3(10,10,10)); </span>
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
//设置相机朝向位置为(20,0,20)
camera.lookAt(new THREE.Vector3(20, 0, 20));
light
light(光源)，决定了你的场景拥有的光源类型和会产生的光照效果。
three.js里面灯光主要有四种
1.AmbientLight(影响整个场景的光源) AmbientLight的光线没有特定的来源，所以不需要指定位置信息。也不会对阴影的生成产生影响。 2.PointLight(照射所有方向的光源) PointLight一般不用来产生阴影，PointLight的光线来自四面八方产生阴影会为GPU带来沉重负担。 3.SpotLight(具有锥形效果的光源) SpotLight产生的阴影为圆锥形状。 4.DirectionLight(模拟远处类似太阳的光源) DirectionLight产生的阴影为方块形状。
光源的几个主要属性：color:光源颜色
intensity:光源的强度 默认值：1
distance:光源的照射距离
position:光源的所在位置
visible:光源是否可见
材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。
MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框
MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体
MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体
我们在场景中先添加了几个物体,然后添加了一个会移动的SpotLight光源便会看到物体阴影会随着光源变化而变化。
物体添加阴影：
1.渲染器开启shadowMap
- renderer.shadowMapEnabled = true;
shadowMap的样式有 THREE.BasicShadowMap ， THREE.PCFShadowMap ， THREE.PCFSoftShadowMap 三种。参数为0-2。
如：设置shadowMap样式为 THREE.BasicShadowMap
- renderer.shadowMap = 0;
2.灯光生成阴影
- light.castShadow = true;
3.地面接收阴影
- plane.receiveShadow = true;
4.物体产生阴影
- mesh.castShadow = true;
var light = new THREE.AmbientLight(0xffffff);
//使用 Scene()的add方法将light添加到Scene中
scene.add(light);
object
THREE.CubeGeometry ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );//立方体
THREE.CylinderGeometry ( radiusTop, radiusBottom, height, segmentsRadius, segmentsHeight, openEnded );//円錐型
THREE.OctahedronGeometry ( radius, detail ) //八面体
THREE.PlaneGeometry ( width, height, segmentsWidth, segmentsHeight ); //平面型
THREE.SphereGeometry ( radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength );//球型
THREE.TorusGeometry ( radius, tube, segmentsR, segmentsT, arc )//トーラス型
object(物体)，你想要添加到场景中的各式各样的物体。
//物体三维图形
var geometry = new THREE.CubeGeometry(4, 4, 4); //物体材质
var material = new THREE.MeshBasicMaterial({
color: 0x4d6dad
}); //生成三维物体
var mesh = new THREE.Mesh(geometry, material); mesh.position.set(10, 0, 10); //使用 Scene()的add方法将mesh添加到Scene中
scene.add(mesh);
渲染场景
1.声明渲染器对象，我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。
其中WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：
(1)antialias:
值：true/false
含义：是否开启反锯齿，设置为true开启反锯齿。
(2)precision:
值：highp/mediump/lowp
含义：着色精度选择。
(3)alpha:
值：true/false
含义：是否可以设置背景色透明。
(4)premultipliedAlpha:
值：true/false
含义：？
(5)stencil:
值：true/false
含义：?
(6)preserveDrawingBuffer:
值：true/false
含义：是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲。
(7)maxLights:
值：数值int
含义：最大灯光数，我们的场景中最多能够添加多少个灯光。
2.制定渲染器的宽高，我们用renderer.setSize(width,height)来设置；
3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement；
4.设置canvas背景色(clearColor)和背景色透明度（clearAlpha）,renderer.setClearColor(clearColor,clearAlpha);
那么以上就是three.js渲染器的一些常用设置了，大家可以实际检验一下各种参数所起的作用。
定时刷新场景，调用WebGLRenderer的render函数刷新场景。
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
添加动画
我们可以通过在render()函数中对object(物体)的position(位置)，rotation(旋转)和scale(缩放)属性进行控制来实现简单地动画效果。渲染的FPS为60，也就意味着一秒钟会变化60次。
mesh.rotation.y += Math.PI / 180 * 1;
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>three-basic</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head> <body>
<script type="text/javascript" src="libs/three.js"></script>
<script>
var scene, renderer, camera, mesh;//场景，渲染器，相机，网格
function init() {//初始化
scene = new THREE.Scene();//场景
renderer = new THREE.WebGLRenderer({//渲染器
antialias: true//是否开启反锯齿
});
renderer.setClearColor(0xffffff); //设置canvas背景色(clearColor)
renderer.setSize(window.innerWidth, window.innerHeight);//指定渲染器的高宽（和画布框大小一致） camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 透视相机(视角，长宽比，开始看到的渲染距离，最远的渲染距离)
camera.lookAt(new THREE.Vector3(20, 0, 20));//设置相机朝向位置为(20,0,20) var light = new THREE.AmbientLight(0xffffff);//灯光，AmbientLight影响整个场景的光源
scene.add(light);
var geometry = new THREE.CubeGeometry(4, 4, 4);//创建立方体
var material = new THREE.MeshBasicMaterial({//材质，MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框
color: 0x4d6dad
}); mesh = new THREE.Mesh(geometry, material);//Mesh（图元装配函数） 生成三维物体
mesh.position.set(10, 0, 10);
scene.add(mesh); //使用 Scene()的add方法将mesh添加到Scene中
document.body.appendChild(renderer.domElement);
render();
}
function render() {
mesh.rotation.y += Math.PI / 180 * 1;//添加动画
renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
requestAnimationFrame(render);
}
init();
</script>
<script type="text/javascript" src="../js/cjy_info.js"></script>
</body> </html>
原文https://chenjy1225.github.io/2016/08/08/three-js-basic/
three.js入门3的更多相关文章
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- JS入门之ActiveXObject对象（转载）
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
- Node.js 入门手册：那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 让我们一起学习《Node.js入门》一书吧！
Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...
- web前端开发分享-css,js入门篇（转）
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- Underscore.js(1.7.0) 中文文档 Underscore.js 入门
原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门 http://www.tuicool.com/articles/jQ3IfeR
随机推荐
- 用 MyEclipse 开发 Spring 入门操作
何为Spring Spring框架是一个轻量级的控制反转(IOC)技术和面向切面编程(AOP)技术的容器框架,利用Spring框架可以实现对象的生命周期管理和分离应用系统中的业务逻辑组件和通用的技术服 ...
- 模拟赛1030d1
[问题描述]从1− ?中找一些数乘起来使得答案是一个完全平方数,求这个完全平方数最大可能是多少.[输入格式]第一行一个数字?.[输出格式]一行一个整数代表答案对100000007取模之后的答案.[样例 ...
- JavaScript数组排序
JavaScript的sort方法排序是有问题的,我们可以给sort方法传一个参数 function Compare(value1, value2) { //数字排序的函数参数 if (value1 ...
- 浅析_tmain()与main()的区别
转自http://www.jb51.net/article/34516.htm _tmain()是为了支持unicode所使用的main一个别名,既然是别名,应该有宏定义过的,在哪里定义的呢?就在那个 ...
- Swift - 状态栏颜色显示(字体、背景)
ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时间等部分: 背景部分:就是显示黑色或者图片的背景部分: 如下图:前景 ...
- hibernate之处理视图
近期,我去用hibernate去创建视图, 发现无法进立建立视图, 为啥? 个人去尝试去,却发现无法很好的完成, 因为hibernate的作用类似视图 后解决方案是: 1.用传统的方式去处理 2.写存 ...
- mysql中select五种子句和统计函数
select 五种子句顺序 where 条件 group by 分组 having 把结果进行再次筛选 order by 排序 limit 取出条目 统计函数 max(列名) 求最大 min( ...
- Android Message Handling Mechanism
转自:http://solarex.github.io/blog/2015/09/22/android-message-handling-mechanism/ Android is a message ...
- Newtonsoft.Json(Json.Net)学习笔记（转）
概述 Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库,通过Nuget获取.(查看原文) 下面是Json序列化和反序列化的简单封装: /// <summary&g ...
- ASP.NET多线程下使用HttpContext.Current为null解决方案 2015-01-22 15:23 349人阅读 评论(0) 收藏
问题一:多线程下获取文件绝对路径 当我们使用HttpContext.Current.Server.MapPath(strPath)获取绝对路径时HttpContext.Current为null,解决办 ...