为什么我的点光源只能作用于cube和plane上，而sphere和octahedron对点光源毫无反应

来源：11-4 点光源

慕哥7265293

2023-01-15

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="lib/three/three.js"></script>
</head>
<body>
<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 0, 20);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, wireframe: false});
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    scene.add(cube);

    const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
    const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00, wireframe: true});
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(3, 1, 0)
    scene.add(sphere);

    const octahedronGeometry = new THREE.OctahedronGeometry(1, 0);
    const octahedronMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00, wireframe: false});
    const octahedron = new THREE.Mesh(octahedronGeometry, octahedronMaterial);
    octahedron.position.set(-3, 0, 0)
    scene.add(octahedron);

    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 ambientLight = new THREE.AmbientLight(0xffff00, 0.1);
    scene.add(ambientLight);

    // PointLight(color, intensity, distance, decay)
    // 参数1：颜色
    // 参数2：光照强度
    // 参数3：光源到光源结束的距离
    // 参数4：衰减程度
    const pointLight = new THREE.PointLight(0xff0000, 1, 1000, 2);
    pointLight.position.set(0, 0, 10);
    scene.add(pointLight)
    
    const animation = ()=>{
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        sphere.rotation.x += 0.01
        octahedron.rotation.x += 0.01
        renderer.render(scene, camera);
        requestAnimationFrame(animation)
    }
    animation()
</script>
</body>
</html>