我的用vue的灯光颜色改不了

//另一个文件
import { initControls } from ‘@/control/index’;

export function create1(){
// 创建一个场景

const scene = new THREE.Scene();

// 创建一个相机 视点 正射投影相机
// const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

// 6个参数 (left right top bottom near far)

			// 红色代表x轴，绿色代表y轴，蓝色代表z轴

// 设置相机的位置
camera.position.set(0,0,30);
// camera.rotation.z=-0.134 * Math.PI
// camera.rotation.y=-0.134 * Math.PI

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById(‘content’).appendChild(renderer.domElement);

// 添加一个立方体
// 定义了一个立方体的对象
const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);

// 创建材质
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000, wireframe: false });

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.z=10;
// 添加到场景里
scene.add(cube);

// 添加一个球体
const sphereGeometry = new THREE.SphereGeometry(1,10,10);
const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00, wireframe: false });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

sphere.position.x = 3;
sphere.position.y = 8;

scene.add(sphere);

// 添加一个平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20,30);
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.rotateZ(20);
// plane.position.z = -10;
// plane.position.x = 3;

scene.add(plane);

// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,10,90);
scene.add(spotLight);
initControls(spotLight);
// 让两个三维物体 产生阴影，球体立方体， 使用平面接收阴影
cube.castShadow = true;
sphere.castShadow = true;
// 使用平面接收阴影
plane.receiveShadow = true;
// 设置灯光开启阴影
spotLight.castShadow = true;
renderer.shadowMap.enabled = true;

renderer.shadowMapType=THREE.PCFSoftShadowMap;

{
//添加雾化效果
scene.fog = new THREE.Fog(0Xffffff,1,50)
// const planeGeometry =
}

let axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

// 渲染
renderer.render(scene, camera);

requestAnimationFrame(animation);

}
animation()
}
//控制器

import * as dat from 'dat.gui’
export function initControls(item){
const gui = new dat.GUI();
let controls = {
color : 0xffffff,
intensity : 1,
distance : 0,
angle : Math.PI / 3,
exponent:10
}
const key = ''
gui.addColor(controls, ‘color’ ).onChange((value)=>{
console.log(value);
controls.color = value
item.color.setStyle(value)
})
console.log(gui,‘gui’);
}