为什么three.js点光源添加后不起作用?-灵析社区

// 引入threejs import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 1.创建一个三维场景scene const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(100, 100, 100); // * 添加光照 // ! MeshBasicMaterial 不受光材质 // ! MeshLambertMaterial 漫反射 受光材质 const material = new THREE.MeshLambertMaterial({color: 0x0000ff}); // 2。创建网格模型 const mesh = new THREE.Mesh(geometry, material); // mesh.position.set(0, 0, 0); // * 集合体的位置 默认原点 scene.add(mesh); // * 创建一个三维坐标轴 const axesHelper = new THREE.AxesHelper(250); scene.add(axesHelper); // * 创建一个光源 const light = new THREE.PointLight(0xffffff, 1); light.position.set(100, 100, 30); // * 设置光源位置 scene.add(light); // * 添加光源 const pointLightHelper = new THREE.PointLightHelper(light, 10); scene.add(pointLightHelper); // 3.用来设置canvas的宽高 const sizes = { width: 1200, height: 800, }; // 4.透视相机设置 const camera = new THREE.PerspectiveCamera( 45, sizes.width / sizes.height, 1, 30000, ); // * 改变相机位置 camera.position.set(400, 400, 400); // * 斜对角位置 camera.lookAt(0, 0, 0); // 5.创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(sizes.width, sizes.height); // 设置渲染区域尺寸 renderer.render(scene, camera); // 把结果canvas画布添加到网页上 document.getElementById('main').appendChild(renderer.domElement); const orbitControls = new OrbitControls(camera, renderer.domElement); orbitControls.addEventListener('change', () => { renderer.render(scene, camera); }); Document { "imports": { "three": "../../build/three.module.js", "three/addons/": "../../jsm/" } } .mainCanvas { width: 100%; height: 100%; }  把PointLight改成平行光就可以显示出来。