2022年8月4日
WebGL进阶（10）点光源属性与应用
摘要： <template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import 阅读全文
posted @ 2022-08-04 15:00 yulingjia 阅读(90) 评论(0) 推荐(0) 编辑
WebGL进阶（9）聚光灯属性与应用
摘要： 1.重点代码 // 聚光灯 const spotLight = new THREE.SpotLight(0xffffff, 1) spotLight.position.set(5, 5, 5) spotLight.castShadow = true spotLight.intensity = 2 / 阅读全文
posted @ 2022-08-04 14:40 yulingjia 阅读(122) 评论(0) 推荐(0) 编辑
WebGL进阶（8）灯光与阴影
摘要： 1. 重要步骤 // 目标：灯光与阴影 // 灯光阴影 // 1、材质要满足能够对光照有反应 // 2、设置渲染器开启阴影的计算 this.renderer.shadowMap.enabled = true; // 3、设置光照投射阴影 directionalLight.castShadow = t 阅读全文
posted @ 2022-08-04 11:35 yulingjia 阅读(161) 评论(0) 推荐(0) 编辑
WebGL进阶（7）加载hdr环境贴图
摘要： 1.重点代码 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader" // 加载hdr环境图 const rgbeLoader = new RGBELoader() rgbeLoader.loadAsync('others 阅读全文
posted @ 2022-08-04 10:25 yulingjia 阅读(755) 评论(1) 推荐(1) 编辑