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

推荐订阅源

Engineering at Meta
Engineering at Meta
博客园_首页
H
Help Net Security
WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
B
Blog
I
InfoQ
SecWiki News
SecWiki News
T
Tailwind CSS Blog
Spread Privacy
Spread Privacy
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
Vulnerabilities – Threatpost
N
Netflix TechBlog - Medium
P
Palo Alto Networks Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Vercel News
Vercel News
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
K
Kaspersky official blog
M
MIT News - Artificial intelligence
S
Schneier on Security
T
Threat Research - Cisco Blogs
F
Fortinet All Blogs
Cyberwarzone
Cyberwarzone
Scott Helme
Scott Helme
aimingoo的专栏
aimingoo的专栏
Martin Fowler
Martin Fowler
MyScale Blog
MyScale Blog
The Cloudflare Blog
Recent Announcements
Recent Announcements
Security Latest
Security Latest
G
GRAHAM CLULEY
IT之家
IT之家
Y
Y Combinator Blog
The Last Watchdog
The Last Watchdog
腾讯CDC
Google DeepMind News
Google DeepMind News
V
V2EX
S
Securelist
TaoSecurity Blog
TaoSecurity Blog
B
Blog RSS Feed
S
SegmentFault 最新的问题
博客园 - 叶小钗
P
Proofpoint News Feed
云风的 BLOG
云风的 BLOG
Project Zero
Project Zero
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
F
Full Disclosure

博客园 - 莫小龙

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);
        }

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