three.js材质

最新推荐文章于 2024-08-19 11:34:22 发布
最新推荐文章于 2024-08-19 11:34:22 发布
阅读量67 收藏
点赞数
文章标签： xhtml javascript ViewUI 
<!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>
        
        <script type="text/javascript">
            function init() {//init()函数是我们整个项目的入口
                var renderer = new THREE.WebGLRenderer({//渲染器
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();//场景
                
                // 相机
                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                //正交投影照相机（Orthographic Camera）设置起来较为直观，它的构造函数是：
                //THREE.OrthographicCamera(left, right, top, bottom, near, far)
                camera.position.set(25, 25, 25);//相机位置
                camera.lookAt(new THREE.Vector3(0, 0, 0));//通过lookAt函数指定它看着原点方向，这样我们就能过仰望正方体了
                scene.add(camera);//照相机需要被添加到场景中
                
                // 灯光
                var light = new THREE.PointLight(0xffffff, 1, 100);
                light.position.set(10, 15, 5);
                scene.add(light);//创建好的灯光添加到场景中
                
                //使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，
                //不会由于光照产生明暗、阴影效果
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00;//黄色
                    opacity: 0.75;//不透明度为0.75
                });
                
                var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);//应用于一个正方体
                scene.add(cube);//把立方体添加到场景中
                
                renderer.render(scene, camera);//调用渲染器的渲染函数，就能使其渲染一次
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

lambert材质

<!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>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(25, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 100);
                light.position.set(10, 15, 5);
                scene.add(light);
                
                var material = new THREE.MeshLambertMaterial({
                //Lambert材质（MeshLambertMaterial）是符合Lambert光照模型的材质   漫反射
                    color: 0xffff00,//创建一个黄色的Lambert材质
                    //color是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性
                    //emissive: 0xff0000
                });
                
                var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
                scene.add(cube);
                //var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);
                //scene.add(sphere);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

 

 

color是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性。除此之外，还可以用ambient和emissive控制材质的颜色。

ambient表示对环境光的反射能力，只有当设置了AmbientLight后，该值才是有效的，材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。

emissive是材质的自发光颜色，可以用来表现光源的颜色。单独使用红色的自发光： 

new THREE.MeshLambertMaterial({ emissive: 0xff0000 })

效果为：
如果同时使用红色的自发光与黄色的散射光： 

new THREE.MeshLambertMaterial({ color: 0xffff00, emissive: 0xff0000 })

效果为：

<!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>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(25, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 200);
                light.position.set(10, 15, 25);
                scene.add(light);
                
                var material = new THREE.MeshPhongMaterial({
                    color: 0xff0000,
                    specular: 0xffff00,//使用黄色的镜面光，红色的散射光：
                    shininess: 100//可以通过shininess属性控制光照模型中的n值，当shininess值越大时，高光的光斑越小
                });
                
                var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);
                scene.add(sphere);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

 

法向材质

<!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>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(25, 25, 25);
                //材质的颜色与照相机与该物体的角度相关，下面我们只改变照相机位置，观察两个角度的颜色变化
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 100);
                light.position.set(10, 15, 5);
                scene.add(light);
                
                var material = new THREE.MeshNormalMaterial();//法向材质的设定很简单，甚至不用设置任何参数：
                
                var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
                scene.add(cube);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

                camera.position.set(25, 25, 5);

weixin_33973609
关注
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 1万+
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
使用Three.js的材质
weixin_33835103的博客
04-20 243
1.three.js提供哪些材质？     MeshBasicMaterial(网格基础材质)/基础材质，，可以用它富裕几何体一种简单的亚瑟，或者显示几何体的线框     MeshDepthMaterial（网格深度材质）/根据网格到相机的举例，这种材质决定如何给网格染色     MeshNormalMaterial(网格法向材质)/这是一种简单的材质，根据物体表面的方向向量计算颜色   ...
【Three.JS零基础入门教程】第八课：材质详解
最新发布
GIS前端嘉欣的博客
08-19 456
对于表面光滑的物体, 是可以反射出周围环境的效果, 环境贴图主要就是用于实现这个效果。我们不仅提供优质课程，助你学习更进一步！为了模拟表面的粗糙凹凸效果, 可以多加一组贴图来模拟高度上的凹凸效果。中, 使用图片来模拟纹理效果, 将一张二维的图片包裹到三维的物体上。上一期我们介绍了threejs中的材质，本期主要介绍纹理。三维GIS开发特训营即将开班，免fei领视频版教程戳↓↓↓。使用法向贴图可以展示更多的细节, 更精细的控制。中通过纹理加载器加载图片。
THREE.JS中常用的3种材质
热门推荐
思念
05-15 2万+
总序材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。 MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框 MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体 MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体 材质的共有属性材质虽然可能有不同的分类，但是都是材质啊，还是有共
three.js之材质
youhebuke225的博客
11-30 1475
所谓材质，就是平常我们所说的塑料材质，金属材质，纤维材质等实质上所有材质都是WebGL着色器代码的封装。
Three.js - 材质（六）
小小的前端
04-25 894
材质（Material） 材质简单理解就是设置几何体各个面的颜色。但它不是单纯的颜色，它能模拟在不同光照下颜色的表现。比如太阳光照射光滑的物体，表面会出现白色的反光，都能模拟。 材质和渲染器无关，在开发中定义一份材质就可以重复使用。 定义材质的常用的方式有两种: 在实例化时传入要配置的参数。 const material = new THREE.MeshPhongMaterial({ color: 0xFF0000, // 也可以使用CSS的颜色字符串 }); 通
使用three.js 画渐变的直线
10-22
three.js是基于WebGL技术，提供了一整套完整的API来简化3D图形的开发工作，从场景创建到对象渲染，再到光照和材质的应用，开发者都可以利用three.js提供的接口来实现。尽管three.js的API相对较为丰富，但相较于其他...
three.min.js 最全的版本
11-01
这些几何形状可以配合不同的材质（如`THREE.MeshBasicMaterial`、`THREE.MeshPhongMaterial`）和纹理，创造出丰富多彩的视觉效果。 光照是3D渲染中的关键因素，Three.js提供了多种光照类型，如`THREE.AmbientLight`...
Vue3 + Three.js 商城可视化实战
04-06
Vue3提供了强大的组件化开发模式，而Three.js则是JavaScript中的一个流行库，用于创建和展示复杂的3D场景。下面将详细解析这两个技术的结合及其在实际应用中的关键知识点。 **Vue3** Vue3是Vue.js框架的最新版本，...
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
Three.js学习之Lamber材质和Phong材质
12-12
前言 　　材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。 　　MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。 　　MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。 　　MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。 1.基本材质 　　使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。其构造函
THREE.JS开发指南 资源包 素材 learning-threejs
08-28
THREE.JS开发指南 资源包 素材 learning-threejs Three.js开发指南
Three.js模型包
06-23
Three.js模型包,包含各种示例使用模型
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
Three.JS教程5 threejs中的材质
编程圈子-谢厂节的博客
02-16 2079
在Three.js中，材质是应用于几何体（Geometry）的外观和纹理的规则。它们决定了对象在场景中如何反射光线、显示颜色、反射环境等。Three.js提供了各种类型的材质，每种都有不同的特性和用途，使开发人员能够根据需求创建出各种视觉效果。官方文档地址本文源码地码lesson5。
《Three.JS零基础入门教程》第七篇：材质详解
GIS前端嘉欣的博客
05-21 813
便于模拟真实的物理效果(为了保证更逼真的效果, 最好是设置环境贴图, 模拟物体对环境光的反射/折射)PBR材质, 也叫物理材质, 用于模拟光照到不同的物体上发生反射, 产生更逼真的显示效果。color对象的rgb范围为[0,1]的浮点数, 而不是[0, 255]的整数。此时, 我们发现渲染的是一个黑色的圆锥体, 是因为没有添加光源的原因.: 模拟物体对光线的反射, 在不同的光照下显示效果不同。不同的材质的应用场景不同, 从整体上分为两大类。, 最简单, 便于观察, 有明显的立体效果。
threejs 材质
12-27 659
一、基本材质 THREE.MeshBasicMaterial(参数集); visible：是否可见，默认为true side：渲染面片正面或是反面，默认为正面THREE.FrontSide，可设置为反面THREE.BackSide，或双面THREE.DoubleSide wireframe：是否渲染线而非面，默认为false color：十六进制RGB颜色，如红色表示为0x...
three.js 材质
08-01
在three.js中，材质是用来定义物体的外观和表面特性的。根据提供的引用内容，有几种常见的材质类型可以在three.js中使用。 首先是MeshNormalMaterial，它可以用于给物体的每个面指定不同的材质，例如不同的颜色。这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值