three.js一个简单demo学些和讲解
叉口裁剪球体案例
二话不说先上效果图:
全部代码带注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clipIntersection</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../three.js-master/build/three.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script>
var camera, scene, renderer;
// 定义参数，后面定义材质的时候会用到
var params = {
clipIntersection: true
};
// 定义裁剪的切面，后面定义材质的时候会用到
var clipPlanes = [
new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
];
init()
render()
function init() {
// 定义WebGL渲染器，并且开启抗锯齿
renderer = new THREE.WebGLRenderer({ antialias: true })
// 设置设备像素比，通常用于HiDPI（一种高清渲染方式）设备防止模糊输出canvas
renderer.setPixelRatio(window.devicePixelRatio)
// 返回一个包含渲染器输出canvas宽高的对象，以像素为单位
renderer.setSize(window.innerWidth, window.innerHeight)
// 定义渲染器是否考虑对象级别的裁剪平面
renderer.localClippingEnabled = true
// 将输出的canvas添加到body中
document.body.appendChild(renderer.domElement)
// 定义场景和相机并且设置相机的位置
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(-20, 30, 40)
// 设置鼠标点击拖拽之后旋转和滚动滚轮放大缩小
var controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', render); // use only if there is no animation loop
controls.minDistance = 10;
controls.maxDistance = 100;
controls.enablePan = false;
// 定义半球光，参数为天空颜色，地面颜色，光的强度
var light = new THREE.HemisphereLight(0xffffff, 0x080808, 1)
scene.add(light)
// 添加环境光
scene.add(new THREE.AmbientLight(0x505050))
// 这与Object3d几乎是一样的，其目的是使用语法上更清晰的对象组进行工作
var group = new THREE.Group()
for (var i = 1; i < 25; i++) {
// 创建球体的缓存几何模型，参数为半径，水平分割面数量，垂直分割面数量
var geometry = new THREE.SphereBufferGeometry(i / 2, 48, 24);
// 定义兰伯特网口材料，一种非发光材质
var material = new THREE.MeshLambertMaterial({
// 线条的十六进制颜色
color: new THREE.Color(Math.sin(i * 0.5) * 0.5 + 0.5, Math.cos(i * 1.5) * 0.5 + 0.5, Math.sin(i * 4.5 + 0) * 0.5 + 0.5),
// 定义表面两侧的哪一个将呈现，默认是前面
side: THREE.DoubleSide,
// 用户在全局使用THREE.Plane对象定义的裁剪平面，这些平面应用于该材料所附的对象。
// 空间中与平面点积为负的点将被裁剪掉。缺省为空 []。
clippingPlanes: clipPlanes,
// 改变剪切平面的行为，以便只裁剪他们的交集，而不是剪接
clipIntersection: params.clipIntersection
})
// 三角形布成的网格图形的基类
group.add(new THREE.Mesh(geometry, material))
}
scene.add(group)
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
// 设置相机视锥体宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影矩阵
camera.updateProjectionMatrix();
// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
代码知识点详解
- THREE.Plane
- 该方法是定义一个在三维空间中无线伸展的平面，Plane( normal, constant )
- normal -- (Vector3) 定义平面指向原点的法向量，(1, 0, 0)
- constant -- (Float) 从原点到平面沿法线方向的负距离，默认0
- THREE.Vector3
- 定义一个三维向量，Vector3( x, y, z )
- x,y,z分别代表向量的x,y,z的值
- THREE.WebGLRenderer
- WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬件加速从而提高渲染性能。这个渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。
- WebGLRenderer( parameters )，parameters可以不写，parameters参数介绍：
- canvas：将要渲染到的canvas对象，如果没有定义将会新创建一个canvas
- context：所需要的渲染上下文对象
- precision：着色器的精度，有"highp","mediump","lowp",如果设备支持的话默认为"highp"
- alpha：这个canvas是否包含alpha（透明度）缓冲区，默认为false
- premultipliedAlpha：渲染器是否会假设颜色具有预乘透明度
- antialias：是否抗锯齿，默认为false
- stencil：绘制缓冲区是否有一个最少8位的模板缓冲区，默认为true
- preserveDrawingBuffer：是否保留缓冲区，知道手动清除或者覆盖，默认为false
- depth：绘图缓冲区是否具有至少16位的深度缓冲区，默认为true
- logarithmicDepthBuffer：是否使用对数深度缓冲区，如果在一个场景中处理巨大的差异可能需要使用它
- renderer.setPixelRatio(PixelRatio),设置设备像素比，通常用于HiDPI设备放置模糊输出canvas，最好使用新的three.js文件
- renderer.setSize(width,height，updateStyle),调整输出canvas尺寸，要考虑设备像素比，并且设置视口以匹配改尺寸，如果设置updateStyle为true则显示添加像素到输出canvas的样式中
- renderer.localClippingEnabled，定义渲染器是否考虑对象级别的裁剪平面
- 他还有很多的属性和方法，以后在需要的时候再介绍
- THREE.Scene
- 场景允许你设置哪些对象呗three.js渲染并且渲染在哪里，我们在场景中放置物体，灯光和相机，他有三个属性：
- fog，一个fog实例，定义了场景中雾状北京类型，默认为null
- overrideMaterial，如果不为空，它将强制场景中的一切对象都是用该材料进行渲染，默认为null
- autoUpdate：默认为true，如果设置为true，那么每一帧的渲染都要检查场景和对象是否需要矩阵更新，否则你必须自己来维护场景中的所有矩阵
- 场景允许你设置哪些对象呗three.js渲染并且渲染在哪里，我们在场景中放置物体，灯光和相机，他有三个属性：
- THREE.PerspectiveCamera
- 进行远景投影的相机，PerspectiveCamera( fov, aspect, near, far )
- FOV，相机视锥体垂直角度
- aspect，相机视锥体宽高比
- near，相机视锥体近裁剪面
- far，相机视锥体远裁剪面
- camera.position.set(x,y,z),定义相机的位置
- camera.updateProjectionMatrix()，更新相机投影矩阵
- 进行远景投影的相机，PerspectiveCamera( fov, aspect, near, far )
- THREE.HemisphereLight
- 位于场景正上方的光源，HemisphereLight( skyColor, groundColor, intensity )
- skyColor，RGB天空颜色值
- groundColor，RGB地面颜色值
- intensity，光的强度
- 位于场景正上方的光源，HemisphereLight( skyColor, groundColor, intensity )
- THREE.AmbientLight
- 定义环境光，AmbientLight( color, intensity ),这种光应用到场景中的所有物体
- color：RGB颜色
- intensity：光的强度
- 定义环境光，AmbientLight( color, intensity ),这种光应用到场景中的所有物体
- THREE.SphereBufferGeometry
- 球体缓存几何模型，SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
- radius，球体半径，默认为50
- widthSegments，水平分割面的数量，最小为3，默认为8
- heightSegments，垂直分割面数量，最小为2，默认为6
- phiStart，水平起始角度，默认为0
- phiLength，指定水平扫描角度大小，默认为Math.PI*2
- thetaStart，垂直起始角度，默认为0
- thetaLength，指定垂直扫描角度大小，默认为Math.PI
- 球体缓存几何模型，SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
- THREE.MeshLambertMaterial
- 兰伯特网口材质，一种非发光材料，无镜面高光，改材料使用非物理的朗博模型来计算反射率，这可以模拟一些表面（如未经处理的木材或者石头），但是不能模拟具有镜面高光的光泽表面（比如上漆的木头）
- 阴影使用Gouraud阴影模型计算，这将计算每个顶点的阴影（在顶点着色器中），并在多边形的面上插入结果
- 由于反射率和照明模型的简单性，性能要比其他几个材质更好，代价是图形的准确行要稍差
- MeshLambertMaterial( parameters )
- color,线条的十六进制颜色，默认为0xffffff
- side，定义表面两侧的哪一个将呈现，前面，后面或者双面，默认值是THREE.Frontside，其他可选为THREE.Backside和THREE.Doubleside
- map，设置纹理贴图，默认为null
- lightMap，设置光照贴图，默认为null
- lightMapIntensity，设置光照贴图强度，默认为1
- aoMap，设置环境遮挡贴图（ao=ambient occlusion），默认为null
- aoMapIntensity，设置环境遮挡贴图强度，默认为1
- specularMap，高光贴图，默认为null
- alphaMap，透明度贴图，默认为null
- envMap，环境贴图，默认为null
- combine，如果有环境贴图，如何组合表面颜色的结果，默认为THREE.Multiply，还有THREE.MixOperation, THREE.AddOperation.如果选择了mix，反射率用于在两种颜色之间进行混合
- reflectivity，设置反射率，默认为1
- refractionRatio，设置折射率默认值是0.98
- fog，定义材质是否受全局雾设置的有影响，默认为true
- shading，定义着色器，默认为THREE.SmoothShading
- wireframe，渲染模型为线框，默认为false
- wireframeLinewidth，线框线宽度，默认为1
- wireframeLinecap，定义线端的外观，默认值是round
- vertexColors：定义顶点如何着色，默认值是THREE.NoColors
- skinning：定义材质是否使用皮肤，默认为false
- morphTargets：定义是否使用变形目标，默认为false
- morphNormals：定义材质是否使用morphNormals，如果设置为true的话将morphNormals从geometry传递到着色器，默认为false
- clippingPlanes，用户定义的裁剪平面，指定为世界空间中的THREE.Plane对象。 这些平面应用于该材料所附的对象。空间中与平面点积为负的点将被裁剪掉。缺省为空 []
- chipIntersection，改变裁剪平面的行为，一边只是裁剪他们的交集而不是剪接
- 还有其他许多基础材料的属性就不在继续介绍了，会在后续逐渐介绍
- THREE.Mesh
- 网孔对象的基类，Mesh( geometry, material )
- geometry，一个几何体的实例
- 一个材质的实例
- 网孔对象的基类，Mesh( geometry, material )
three.js一个简单demo学些和讲解的更多相关文章
- 创建node.js一个简单的应用实例
在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...
- angular实现了一个简单demo，angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- 在cengos中安装zabbix server/agent， 并创建一个简单demo
添加zabbix更新源 rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch ...
- Log4net - 项目使用的一个简单Demo
参考页面: http://www.yuanjiaocheng.net/entity/entitytypes.html http://www.yuanjiaocheng.net/entity/entit ...
- 关于EF的一个简单Demo
今天使用EF的时候很奇怪的问题,添加属性后,使用程序包管理器控制台的NuGet命令更新无效,于是做了这个测试,一次性写好,自动更新,看看效果 1.首先建立一个MVC项目 2.我们选择Intern ...
- Android中调用C++函数的一个简单Demo
这里我不想多解释什么,对于什么JNI和NDK的相关内容大家自己去百度或谷歌.我对Android的学习也只是个新手.废话少说直接进入正题. 一.在Eclipse中创建一个Android Applicat ...
- 用redis来实现Session保存的一个简单Demo
现在很多项目都用Redis(RedisSessionStateProvider)来保存Session数据,但是最近遇到一个比较典型的情况,需要把用户数据全部load到redis里面,在加上RedisS ...
- Chart.js: 一个简单的 JS Chart Library
Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供 ...
- gin框架初识(先跑一个简单demo) ①
Gin 是一个 go 写的 web 框架,具有高性能的优点.官方地址:https://github.com/gin-gonic/gin 先跑一个demo(先安装gin框架,具体见官方地址): 1.vs ...
随机推荐
- stl仿函数和适配器
所谓的适配器就是底层利用仿函数,然后修改仿函数的接口,达到自己的目的: 例如:template<class operation> class binder1st的适配器,其本质是一个类,它 ...
- CF580D Kefa and Dishes 状压dp
When Kefa came to the restaurant and sat at a table, the waiter immediately brought him the menu. Th ...
- error : Could not load UI satellite dll 'TrackerUI.dll'. Make sure it exists in an LCID subdirectory of 'C:\Program Files (x86)\MSBuild\12.0\bin\'.
原因 VS2013 + QT环境部署好后, 又安装了VS2015\ 解决方案: 在另一台电脑里重装VS2013, 并将 C:\Program Files (x86)\MSBuild\12.0\B ...
- Linux防火墙详解
1.Linux防火墙基础 作为隔离内外网.过滤非法数据的有力屏障,防火墙通常按实现环境的不同分为硬件防火墙和软件防火墙.硬件防火墙是功能专一的硬件设备,具有比较全面的功能,其工作效率较高,但是加个昂贵 ...
- N - 嘤嘤嘤 （并查集+枚举）
Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...
- POJ 3067 Japan (树状数组 && 控制变量)
题意: 西海岸和东海岸有分别有n (1~n)个和m (1~m)个城市, 两个海岸的城市之间有k条公路连通, 公路会相交, 现在给出城市和公路的信息问你由这些公路组成的复杂交通有多少个交点 (如果两个条 ...
- 经典SQL行列转换
-- http://www.programbbs.com/doc/4885.htm /* 标题:普通行列转换(version 2.0) 说明:普通行列转换(version 1.0)仅针对sql ser ...
- Jenkins自动化CI CD流水线之4--Master-Slave架构
一.介绍 jenkins的Master-slave分布式架构主要是为了解决jenkins单点构建任务多.负载较高.性能不足的场景. Master/Slave相当于Server和agent的概念.Mas ...
- uva 815之理解诡异的海平线题目之不容易
首先题意:(这个真的令人无奈,题目都看不太明白) 网上百度了一下,就是以下意思: 给你n*m个格子,每个格子的面积是10*10米,整个区域外看作无限高的墙壁.输入每个格子的海拔高度(可能为负数),以及 ...
- Mybatis学习笔记7 - select查询的相关属性使用
1.当接口的返回类型是集合List时,resultType要写集合中元素的类型 示例如下: 接口定义: package com.mybatis.dao; import com.mybatis.bean ...