图形化开发(五)033-Three.js之光照——实例1-平行光
2021/9/11 6:07:53
本文主要是介绍图形化开发(五)033-Three.js之光照——实例1-平行光,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
图形化开发(五)033-Three.js之光照——实例1-平行光
实例1-平行光案例
效果图
light.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 | <!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >平行光案例</ title > < style type = "text/css" > html, body { margin: 0; height: 100%; } canvas { display: block; } </ style > </ head > < body onl oad = "draw();" > </ body > < script > var renderer, camera, scene, gui, stats, ambientLight, directionalLight; var debug, sphere, cube, plane; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); //告诉渲染器需要阴影效果 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap document.body.appendChild(renderer.domElement); } function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 100, 200); camera.lookAt(new THREE.Vector3(0, 0, 0)); } function initScene() { scene = new THREE.Scene(); } function initGui() { //声明一个保存需求修改的相关数据的对象 gui = { ambientLight: "#111111", //环境光源 directionalLight: "#ffffff", //点光源 intensity: 1, //灯光强度 visible: true, //是否可见 castShadow: true, //是否开启阴影 debug: true, //开启关闭光照辅助 targetX: 0, //朝向x轴坐标 targetY: 0, //朝向y轴坐标 targetZ: 0, //朝向z轴坐标 near: 20, //阴影渲染的最近距离 far: 100, //阴影渲染的最远距离 left: -50, //阴影的最左边距离 right: 50, //阴影的最右边距离 top: 50, //阴影的最上边距离 bottom: -50, //阴影的最下边距离 }; var datGui = new dat.GUI(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值) datGui.addColor(gui, "ambientLight").name("环境光颜色").onChange(function (e) { ambientLight.color.set(e); }); datGui.addColor(gui, "directionalLight").name("平行光颜色").onChange(function (e) { directionalLight.color.set(e); }); datGui.add(gui, "intensity", 0, 5).name("光线强度").onChange(function (e) { directionalLight.intensity = e; }); datGui.add(gui, "visible").name("显示平行光").onChange(function (e) { directionalLight.visible = e; }); datGui.add(gui, "castShadow").name("显示阴影").onChange(function (e) { directionalLight.castShadow = e; }); datGui.add(gui, "debug").name("开启光照辅助").onChange(function (e) { debug.visible = e; }); datGui.add(gui, "targetX", -20, 20).name("焦点X坐标位置").onChange(changeSpherePosition); datGui.add(gui, "targetY", 0, 20).name("焦点Y坐标位置").onChange(changeSpherePosition); datGui.add(gui, "targetZ", -20, 20).name("焦点Z坐标位置").onChange(changeSpherePosition); //修改球体位置的方法,平行光的target就是球 function changeSpherePosition() { sphere.position.set(gui.targetX, gui.targetY, gui.targetZ); } var camera = datGui.addFolder("阴影设置"); camera.add(gui, "near", 0, 50).name("最近距离").onChange(updateShadow); camera.add(gui, "far", 50, 100).name("最近距离").onChange(updateShadow); camera.add(gui, "left", -200, 0).name("最左距离").onChange(updateShadow); camera.add(gui, "right", 0, 200).name("最右距离").onChange(updateShadow); camera.add(gui, "top", 0, 200).name("最上距离").onChange(updateShadow); camera.add(gui, "bottom", -200, 0).name("最下距离").onChange(updateShadow); function updateShadow() { directionalLight.shadow.camera.near = gui.near; //产生阴影的最近距离 directionalLight.shadow.camera.far = gui.far; //产生阴影的最远距离 directionalLight.shadow.camera.left = gui.left; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = gui.right; //最右边 directionalLight.shadow.camera.top = gui.top; //最上边 directionalLight.shadow.camera.bottom = gui.bottom; //最下面 directionalLight.shadow.camera.updateProjectionMatrix(); } } function initLight() { // 环境光 ambientLight = new THREE.AmbientLight("#111111"); scene.add(ambientLight); // 类似太阳光 directionalLight = new THREE.DirectionalLight("#ffffff"); directionalLight.position.set(40, 60, 10); directionalLight.shadow.camera.near = gui.near; //产生阴影的最近距离 directionalLight.shadow.camera.far = gui.far; //产生阴影的最远距离 directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = 50; //最右边 directionalLight.shadow.camera.top = 50; //最上边 directionalLight.shadow.camera.bottom = -50; //最下面 //这两个值决定生成阴影密度 默认512 directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.mapSize.width = 1024; //告诉平行光需要开启阴影投射 directionalLight.castShadow = true; scene.add(directionalLight); //添加灯光辅助 debug = new THREE.CameraHelper(directionalLight.shadow.camera); debug.name = "debug"; scene.add(debug); } function initModel() { //球体 var sphereGeometry = new THREE.SphereGeometry(5, 24, 16); var sphereMaterial = new THREE.MeshPhongMaterial({color: 0xff00ff}); sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.castShadow = true; //开启阴影 directionalLight.target = sphere; //平行光的焦点到球 scene.add(sphere); //立方体 var cubeGeometry = new THREE.CubeGeometry(10, 10, 10); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}); cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = 30; cube.position.z = -5; cube.castShadow = true; //开启阴影 scene.add(cube); //底部平面 var planeGeometry = new THREE.PlaneGeometry(100, 100); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa}); plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.y = -5; plane.receiveShadow = true; //可以接收阴影 scene.add(plane); } function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } function render() { renderer.render(scene, camera); } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 render(); //更新性能插件 stats.update(); //更新光照辅助 if (debug) { debug.update(); } requestAnimationFrame(animate); } function draw() { initGui(); initRender(); initScene(); initCamera(); initLight(); initModel(); initStats(); animate(); window.onresize = onWindowResize; } </ script > </ html > |
这篇关于图形化开发(五)033-Three.js之光照——实例1-平行光的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://blog.csdn.net/weixin_44867717/article/details/120231597
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南