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

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

 

 

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