【three.js材质】的更多相关文章

three.js材质

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script>…

初探three.js材质

这节我们浅谈一下THREE的材质.材质就是物体的皮肤,决定物体的表面.THREE的材质有很多种,他们有的和到相机的距离有关,有的和面的法向量角度有关,有的不受光照的影响,有的受到光照的影响会产生反射效果或者漫反射效果,也可以将多个材质合成一个.1. THREE.MeshBasicMaterial(基础材料).2. THREE.MeshDepthMaterial(深度材料).3. THREE.MeshNormalMaterial(法向材料).4. THREE.MeshFaceMaterial(面材…

three.js 材质翻转

刚学.这个鸟玩意儿卡了半天,记录一下. var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); //创建一个完整的天空盒,填入几何模型和材质的参数 skyBox.name = "box1"; skyBox.position.set(0, 0, 0); skyBox.scale.x = -1 //////////////////////// this.scene.add(skyBox); //在场景中加入天空盒 左右翻转: cylin…

ApacheCN JavaScript 译文集 20211122 更新

JavaScript 编程精解 中文第三版 零.前言 一.值,类型和运算符 二.程序结构 三.函数 四.数据结构:对象和数组 五.高阶函数 六.对象的秘密 七.项目:机器人 八.Bug 和错误 九.正则表达式 十.模块 十一.异步编程 十二.项目:编程语言 十三.浏览器中的 JavaScript 十四.文档对象模型 十五.处理事件 十六.项目:平台游戏 十七.在画布上绘图 十八.HTTP 和表单 十九.项目:像素艺术编辑器 二十.Node.js 二十一.项目:技能分享网站 JavaScript…

使用Three.js的材质

1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度材质)/根据网格到相机的举例,这种材质决定如何给网格染色 MeshNormalMaterial(网格法向材质)/这是一种简单的材质,根据物体表面的方向向量计算颜色 MeshFaceMaterial(网格面材质)/这是一个容器,可以在这个容器里为物体的各个表面指定不同的颜色 MeshLambertMa…

WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNormalMaterial MeshNormalMaterial是一种不受渲染时使用的颜色影响的材质,它只与自己每一个面从内到外的法向量有关.法向量在webgl中用处十分广泛,光的反射,以及三维图形的纹理映射都与这个有关. 从图中可以看到,网格的每一面渲染的颜色都是不一样的,如果我们想要在物体表面添加法…

three.js - 添加材质 灯光 阴影

看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First Scene</title> <style type="text/css"> body { /*移除所有的滚动条*/ margin: 0; overflow: hidden; } <…

Three.js开发指南---使用three.js的材质（第四章）

材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基类拥有three.js所有材质的公有属性,分为三类:基础属性,融合属性,高级属性 基础属性:ID,name,透明度,是否可见,是否需要刷新等 融合属性:决定了物体如何与背景融合 高级属性:可以控制WEBGL上下文渲染物体的方法,大多数情况下,是不会用这些属性,我们这里不再讨论 1.1 基础属性 属性…

Three.js基础探寻八——法向材质与材质的纹理贴图

4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的颜色与照相机与该物体的角度相关,下面我们只改变照相机位置,观察两个角度的颜色变化: camera.position.set(5, 25, 25);的效果: camera.position.set(25, 25, 25);的效果: 我们观察的是同样的三个面,但是由于观察的角度不同,物体的颜色就不同了.…

Three.js基础探寻七——Lamber材质与Phong材质

材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong). MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框. MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体. MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体. 1.基本材质 使用基本材质(Ba…

20-THREE.JS 混合材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

08-THREE.JS 点面创建物体，克隆物体，多材质物体

<!DOCTYPE html> <html> <head> <title></title> < <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js">&l…

06-THREE.JS 给所有物体相同的材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

three.js各种材质的实现源码

three.js常用材质:基本材质.兰伯特材质.冯氏材质.标准材质. 我们可以自己使用着色器实现这些材质,用于批量渲染等用途. 为了简单,假设物体只有一张漫反射贴图,场景中只存在一个环境光和一个平行光. 一.基本材质(MeshBasicMaterial) 基本材质不对光源产生反应. 顶点着色器 varying vec2 vUv; void main() { vUv = uv; vec3 transformed = vec3( position ); vec4 mvPosition = model…

three.js 着色器材质之glsl内置函数

郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措.原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU.这篇说一说glsl内置函数. 1. 和角度相关的函数 下面是一个和角度相关的函数,他们的用法我们度熟悉. 函数 参数 描述 sin(x) 弧度 正弦函数 cos(x) 弧度 余弦函数 tan(x) 弧度 正切函数 asin(x) 弧度 反正弦函数 acos(x) 弧度…

three.js:使用createMultiMaterialObject创建的多材质对象无法使用光线跟踪Raycaster选中

创建多材质对象: var loader = new THREE.DDSLoader(); var map = loader.load('../assets/textures/Mountains_argb_nomip.dds', function ( texture ) { texture.magFilter = THREE.LinearFilter; texture.minFilter = THREE.LinearFilter; texture.mapping = THREE.CubeRefle…

three.js入门系列之材质

一.基础网孔材料 MeshBasicMaterial 图示(光源是(0,1,0)处的点光源): 二.深度网孔材料 MeshDepthMaterial (由于只是改了材料名,代码将不重复贴出) 在这里,有必要提一下远景相机的属性了: 大概就是这么个意思,下面,我们把上述两个参数改为3,4看一下效果: 为什么要提一下相机的参数呢,因为该种材料的物体,离相机越近就越显示白色,越远的话则显示黑色,所以初始化的时候,相机看得非常远(0.03,400)所以看到的全是黑色的正方体边框,接下来,我们调整一下相机…

26-THREE.JS 虚线绘制线框样式几何图形的材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

25-THREE.JS 绘制线框样式几何图形的材质 线材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

24-THREE.JS 镜面高光材质

<!DOCTYPE html> <html> <head> <title>Example 04.07 - Mesh Phong material</title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.j…

23-THREE.JS 光照材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

22-THREE.JS 面材质

<!DOCTYPE html> <html> <head> <title>Example 04.05 - Mesh face material</title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js…

21-THREE.JS 将法线矢量映射到RGB颜色的材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

19-THREE.JS 深度材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

18-THREE.JS 基本材质

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc…

Cesium.js学习第一天（设置材质）

var viewer = new Cesium.Viewer('cs'); var entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0), ellipse:{ semiMinorAxis : 800000.0, semiMajorAxis : 800000.0, //material : Cesium.Color.BLUE.withAlpha(0.5) //几何颜色 // mate…

Threejs中的材质贴图

最近项目需要折腾three.js,有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图(如:室内模型图)需要美术3D制作,前端导成特定格式文件(如*.mtl/*.obj 格式文件 ), 之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可 基础案例 https://github.com/AragornZJF/ThreeExample.js Chapter7.3.2 或者游戏案例  http://www.w3cmar…

AlloyTouch与three.js 3D模型交互

如你所见,上面的cube的旋转.加速.减速停止都是通过AlloyTouch去实现的. 演示 代码 <script src="asset/three.js"></script> <script src="../../alloy_touch.js"></script> <script> var camera = new THREE.PerspectiveCamera( 70, window.innerWidth…

three.js全景

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - equirectangular panorama</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala…

three.js模型

Three.js有一系列导入外部文件的辅助函数,是在three.js之外的,使用前需要额外下载, 在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到. *.obj是最常用的模型格式,导入*.obj文件需要OBJLoader.js: 导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLLoader.js. 另有PLYLoader.js.STLLoader.js等分别对应不同格式的…