three.js 加载光影贴图

一、效果图：

二、实现过程

1、加载光影贴图

在给添加光影贴图时，要给底面物体接收阴影才能看到效果

 //var geometry = new THREE.SphereGeometry(40, 100, 40);var material = new THREE.MeshLambertMaterial({color: 0x0000ff});var mesh = new THREE.Mesh(geometry, material);mesh.position.set(0,40,0)scene.add(mesh);// 设置产生投影的网格模型mesh.castShadow = true;//创建一个平面几何体作为投影面var planeGeometry = new THREE.PlaneGeometry(300, 200);planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];var textureLoader = new THREE.TextureLoader();// 加载光照贴图var textureLight = textureLoader.load('cshadow.webp');var planeMaterial = new THREE.MeshLambertMaterial({color: 0x999999,lightMap:textureLight,// 设置光照贴图lightMapIntensity:0.5,//烘培光照的强度. 默认 1.});var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象MeshplaneMesh.rotateX(-Math.PI / 2); //旋转网格模型//接受阴影planeMesh.receiveShadow= true;scene.add(planeMesh);

3、初始化场景

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>光照贴图</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="js/yanhuang/three.js"></script><!-- 引入threejs扩展控件OrbitControls.js --><script src="js/yanhuang/OrbitControls.js"></script>
</head><body>
<script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(-100,200, 0); //点光源位置point.castShadow = true;scene.add(point); //点光源添加到场景中/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(100, 200, 100); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)camera.castShadow = true;/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色//允许渲染阴影renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧}var axisHelper = new THREE.AxisHelper(250,250,250);scene.add(axisHelper);render();//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性var controls = new THREE.OrbitControls(camera);</script>
</body></html>

three.js 加载光影贴图相关推荐

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
three.js通过CubeTexture加载环境贴图，和RGBELoader加载器加载hdr环境贴图
一.使用CubeTexture进行环境贴图 1.CubeTexture使用介绍 Three.js中可以通过使用CubeTexture进行环境贴图,CubeTexture需要将6张图片(正面.反面.上下 ...
优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
CSS实现树形结构 + js加载数据
看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: 拉莫小学一年级一班二班二年级三年级一班二班三班树的dom结构: <div ...
（转）Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
FusionCharts Free-使用JS加载-flash图表
使用JS加载这个JS类文件就在FusionChartsFree>JSClass文件夹下,我们把它拷贝到c:FusionChartsFusionCharts下面. 现在,我们把原来的Chart. ...
three.js 加载显示文字
three.js 加载显示文字代码放到 ./three.js/examples/ 下 <!DOCTYPE html> <html lang="en">&l ...
node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...

three.js 加载光影贴图

一、效果图：

二、实现过程

1、加载光影贴图

3、初始化场景

three.js 加载光影贴图相关推荐

最新文章

热门文章