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
随机推荐
- 对于类的双重调用的demo
代码如下: package cao.com.duixiang; public class TestCCircle { public static void main(String[] args) { ...
- 《Thinking in Java》十七章_容器深入研究_练习12(Page484)
练习12: 练习使用HashMap / LinkedHashMap / TreeMap import java.util.HashMap; import java.util.LinkedHashMap ...
- OkHttp学习总结
This paper mainly includes the following contents okhttp ordinary operation. okhttp interceptors. Re ...
- python实现学生选课系统 面向对象的应用：
一.要求: 选课系统 管理员: 创建老师:姓名.性别.年龄.资产 创建课程:课程名称.上课时间.课时费.关联老师 使用pickle保存在文件 学生: 学生:用户名.密码.性别.年龄.选课列表[].上课 ...
- 64位Ubuntu运行32位程序时报文件不存在(No such file or Directory)的一种解决办法
尝试在64位Ubuntu下面运行32位程序时, 一直说 文件不存在(No such file or directory), 我只想说++. 你tm说个文件格式不正确不就好了? 非得说个文件不存在! 真 ...
- lucene/solr 修改评分规则方法总结
说明:由于solr底层使用的是lucene,因此修改solr打分机制归根结底还是依赖于lucene的打分机制,本文主要讨论lucene的打分机制. 本文说明lucene 常用的四种影响评分结果的方式. ...
- elasticsearch入门
到 https://download.elastic.co/elasticsearch/elasticsearch/elasticsearch-1.6.0.zip 下载最新包: 启动: ./elast ...
- 杂物 git rebase
- C语言中的回调函数调用过程以及函数指针使用
回调函数比喻: 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货. 在这个例子里,你的电话号码就叫回调 ...
- AxureRP7.0各类交互效果汇总帖（转）
了便于大家参考,我把这段时间发布分享的所有关于AxureRP7.0的原型做了整理. 以下资源均有对应的RP源文件可以下载. 当然 ,其中有部分是需要通过完成解密游戏[攻略]才能得到下载地址或者下载密码 ...