惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

N
Netflix TechBlog - Medium
罗磊的独立博客
云风的 BLOG
云风的 BLOG
Last Week in AI
Last Week in AI
Y
Y Combinator Blog
小众软件
小众软件
Blog — PlanetScale
Blog — PlanetScale
T
The Blog of Author Tim Ferriss
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
月光博客
月光博客
博客园 - Franky
F
Fortinet All Blogs
D
Docker
博客园 - 司徒正美
腾讯CDC
Recent Announcements
Recent Announcements
The Cloudflare Blog
B
Blog RSS Feed
GbyAI
GbyAI
T
Tailwind CSS Blog
雷峰网
雷峰网
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 三生石上(FineUI控件)
阮一峰的网络日志
阮一峰的网络日志

博客园 - 莫小龙

wps之使用宏修改全篇表格样式 geoserver之强制配置OnlineResource mysql之将shp转化为wkt,然后存储再geomerty字段内 cesium之用着色器添加建筑贴图 uniapp之plus.downloader.createDownload下载文件传参 谷歌之将网页保存为图片 elementui之table中相同数据的单元格合并 krpano之使用教程 threejs之将张纹理图片组成材质组 canvas之修改Base64图片中不透明部分的颜色 threejs之将PlaneGeometry转换为BufferGeometry threejs之利用shape通过线绘制面和体 threejs之添加渐变背景 threejs之创建发光墙体 paperjs之fitBounds适应区域前后屏幕坐标和输入坐标的转换 arcmap之通过点数据获取等值线 uniapp之安卓APP打开百度地图、高德地图APP openlayer之添加带箭头的线 geoserver之图片图标样式 SHP转WKT文件工具 openlayers之geoserver的wms图层mysql数据源数据修改后更新问题 通过日照时数计算每天RAD(太阳辐射)值 Uniapp之安卓签名证书(.keystore)生成
threejs之灯光不跟随OrbitControls控制器旋转
莫小龙 · 2025-08-08 · via 博客园 - 莫小龙

threejs之灯光不跟随OrbitControls控制器旋转

 场景:添加光效后,灯光相对物体静止,无法达到旋转物体展示的效果

方法:使用THREE.Group()将灯光打组,然后在animate中将灯光的四元数拷贝成相机的四元数即可

代码:(添加灯光并打组)

lightHolder = new THREE.Group();
scene.add(lightHolder);

directionalLight = new THREE.DirectionalLight(0xffffff, 0.1);
directionalLight.position.set(-24.75, 6.38, -0.44);
directionalLight.castShadow = true;
lightHolder.add(directionalLight)

// 灯光目标位置
const targetObject = new THREE.Object3D();
targetObject.position.set(0, 0, 0);
scene.add(targetObject);
directionalLight.target = targetObject;

代码:(更新四元数)

        function animate() {
            requestAnimationFrame(animate);
            
            lightHolder.quaternion.copy(camera.quaternion);
            controls.update();
            renderer.render(scene, camera);
        }

钻研不易,转载请注明出处。。。。。。