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
随机推荐
- August 9th 2016, Week 33rd Tuesday
Tomorrow is never clear, our time is here. 明天是未知的,我们还是要过好当下. Tomorrow is not unpredictable, it is cl ...
- mongodb启动后台服务
将MongoDB部署在服务器机子上时mongodb的实例应为后台服务进行的方式运行,而非前台进程,否则远程会话一关闭mongodb也跟着关闭了.本文介绍mongodb后台服务进程开启和关闭的操作. 开 ...
- ！struct operator reload
struct t3DObject //对象信息结构体{ int numOfVerts; // 模型中顶点的数目 int numOfFaces; // 模型中面的数目 int numTexVertex; ...
- 模拟赛1029d2
[问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...
- React Native官方DEMO
官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...
- Mac系统下使用VirtualBox虚拟机安装win7－－第四步 安装虚拟机硬件扩展包支持
如 果想要在虚拟机上使用连接在 Mac 上的硬件外设,比如 U 盘,iPhone 等,需要我们在 Virtual Box 官网下载一个硬件支持扩展安装包.同样地,我们先打开虚拟机的下载页面: http ...
- SESSION机制
一:Session与Cookie Session:在服务器端创建并存放在服务器的内存中的,Session的内容存储是键值对的列表,格式:名称 | 类型:长度:值 Session的生命周期:在php.i ...
- "".equals(str)和str.equals("")的区别
如果当str为null的话 "".equals(str)不会报空指针异常,而str.equals("")会报异常.这种方式主要用来防止空指针异常
- jq 全选和反选以及判断那条被选中
<body><div><input type="checkbox" id="a" />全选</div><d ...
- IIS网站发布若干问题
1.Win7 64位 IIS未能加载文件或程序集"System.Data.SQLite"或它的某一个依赖项 未能加载文件或程序集"System.Data.SQLite ...