Point Light 似乎无法在 Three.js 中工作

Question

当我在与太阳相同的位置添加点光源时，它似乎不起作用。

我已经阅读了

three.js

的许多文档，他们建议我使用相同的线路来使用 ponit light。

当我添加

,

时，它就像带有我提供的纹理的简单球体。

但是当我使用

MeshStandardMaterial

时，它就像黑暗的球体，并且点光源似乎不起作用。

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; 

import starTexture from '../assets/stars.jpg';
import sunTexture from '../assets/sun.jpeg';
import mercuryTexture from '../assets/mercury.jpg';
import venusTexture from '../assets/venus.jpg';
import earthTexture from '../assets/earth.jpg';
import marsTexture from '../assets/mars.jpg';
import jupiterTexture from '../assets/jupiter.png';
import saturnTexture from '../assets/saturn.jpg';
import saturnRingTexture from '../assets/saturnring.png';
import uranusTexture from '../assets/uranus.webp';
import uranusRingTexture from '../assets/ring.webp';
import neptuneTexture from '../assets/neptune.jpg';
import plutoTexture from '../assets/pluto.jpeg';

const renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth / window.innerHeight,
    0.1, 
    1000 
);
const orbit = new OrbitControls(camera, renderer.domElement) 
camera.position.set(-90, 140, 140);

orbit.update() 

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load([
    starTexture,
    starTexture,
    starTexture,
    starTexture,
    starTexture,
    starTexture
]);

const textureLoader = new THREE.TextureLoader();

const sunGeo = new THREE.SphereGeometry(16, 30, 30);
const sunMat = new THREE.MeshBasicMaterial({
    map: textureLoader.load(sunTexture),
})
const sun = new THREE.Mesh(sunGeo, sunMat);
scene.add(sun);

const sunLight = new THREE.PointLight(0xFFFFFF, 2, 500);
sunLight.position.set(0, 0, 0); // Position the light at the sun
scene.add(sunLight);

const createPlanet = (size, texture, position, ring) => {
    const geo = new THREE.SphereGeometry(size, 30, 30);
    const mat = new THREE.MeshStandardMaterial({
        map: textureLoader.load(texture)
    })
    const mesh = new THREE.Mesh(geo, mat);
    const obj = new THREE.Object3D();
    obj.add(mesh);
    if(ring){
        const ringGeo = new THREE.RingGeometry(
            ring.innerRadius,
            ring.outerRadius,
            32
        )
        ringMat = new THREE.MeshBasicMaterial({
            map: textureLoader.load(ring.texture),
            side : THREE.DoubleSide
        })
        const ringMesh = new THREE.Mesh(ringGeo, ringMat);
        obj.add(ringMesh);
        ringMesh.position.x = position;
        ringMesh.rotation.x = -0.5 * Math.PI;

    }
    scene.add(obj);
    mesh.position.x = position;
    return {mesh, obj};
}

const mercury = createPlanet(3.2, mercuryTexture, 28);
const venus = createPlanet(5.8, venusTexture, 44);
const earth = createPlanet(6, earthTexture, 62);
const mars = createPlanet(4, marsTexture, 78);
const jupiter = createPlanet(12, jupiterTexture, 100);
const saturn = createPlanet(10, saturnTexture, 138, {
    innerRadius: 10,
    outerRadius: 20,
    texture: saturnRingTexture
});
const uranus = createPlanet(7, uranusTexture, 176, {
    innerRadius: 7,
    outerRadius: 12,
    texture: uranusRingTexture
});
const neptune = createPlanet(7, neptuneTexture, 200);
const pluto = createPlanet(2.8, plutoTexture, 216);

const pointLight = new THREE.PointLight(0xFFFFFF, 2, 300);
scene.add(pointLight);

function animate() {
    //Self-rotation
    sun.rotateY(0.004);
    mercury.mesh.rotateY(0.004);
    venus.mesh.rotateY(0.002);
    earth.mesh.rotateY(0.02);
    mars.mesh.rotateY(0.018);
    jupiter.mesh.rotateY(0.04);
    saturn.mesh.rotateY(0.038);
    uranus.mesh.rotateY(0.03);
    neptune.mesh.rotateY(0.032);
    pluto.mesh.rotateY(0.008);

    //Around-sun-rotation
    mercury.obj.rotateY(0.04);
    venus.obj.rotateY(0.015);
    earth.obj.rotateY(0.01);
    mars.obj.rotateY(0.008);
    jupiter.obj.rotateY(0.002);
    saturn.obj.rotateY(0.0009);
    uranus.obj.rotateY(0.0004);
    neptune.obj.rotateY(0.0001);
    pluto.obj.rotateY(0.00007);

    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate)

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
})

我希望太阳能够将光照射到行星上。

Answer 1

PointLight

的参数太低了。

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js",
            "three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
        }
    }
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; 

const renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth / window.innerHeight,
    0.1, 
    1000 
);
const orbit = new OrbitControls(camera, renderer.domElement) 
camera.position.set(-90, 140, 140);

orbit.update() 

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);


const loader = new THREE.TextureLoader();
const texture = loader.load('https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp');
const sunGeo = new THREE.SphereGeometry(16, 30, 30);
const sunMat = new THREE.MeshBasicMaterial({
    map: texture,
})
const sun = new THREE.Mesh(sunGeo, sunMat);
scene.add(sun);

const sunLight = new THREE.PointLight(0xFFFFFF, 2, 500);
sunLight.position.set(0, 0, 0); // Position the light at the sun
scene.add(sunLight);

const createPlanet = (size, texture, position, ring) => {
    const geo = new THREE.SphereGeometry(size, 30, 30);
    const mat = new THREE.MeshStandardMaterial({
        map: texture,
    })
    const mesh = new THREE.Mesh(geo, mat);
    const obj = new THREE.Object3D();
    obj.add(mesh);
    if(ring){
        const ringGeo = new THREE.RingGeometry(
            ring.innerRadius,
            ring.outerRadius,
            32
        )
        const ringMat = new THREE.MeshBasicMaterial({
            map: texture,
            side : THREE.DoubleSide
        })
        const ringMesh = new THREE.Mesh(ringGeo, ringMat);
        obj.add(ringMesh);
        ringMesh.position.x = position;
        ringMesh.rotation.x = -0.5 * Math.PI;

    }
    scene.add(obj);
    mesh.position.x = position;
    return {mesh, obj};
}

const mercury = createPlanet(3.2, texture, 28);
const venus = createPlanet(5.8, texture, 44);
const earth = createPlanet(6, texture, 62);
const mars = createPlanet(4, texture, 78);
const jupiter = createPlanet(12, texture, 100);
const saturn = createPlanet(10, texture, 138, {
    innerRadius: 10,
    outerRadius: 20,
    texture: texture
});
const uranus = createPlanet(7, texture, 176, {
    innerRadius: 7,
    outerRadius: 12,
    texture: texture
});
const neptune = createPlanet(7, texture, 200);
const pluto = createPlanet(2.8, texture, 216);

const pointLight = new THREE.PointLight(0xFFFFFF, 400, 300, 1);
scene.add(pointLight);

function animate() {
    //Self-rotation
    sun.rotateY(0.004);
    mercury.mesh.rotateY(0.004);
    venus.mesh.rotateY(0.002);
    earth.mesh.rotateY(0.02);
    mars.mesh.rotateY(0.018);
    jupiter.mesh.rotateY(0.04);
    saturn.mesh.rotateY(0.038);
    uranus.mesh.rotateY(0.03);
    neptune.mesh.rotateY(0.032);
    pluto.mesh.rotateY(0.008);

    //Around-sun-rotation
    mercury.obj.rotateY(0.04);
    venus.obj.rotateY(0.015);
    earth.obj.rotateY(0.01);
    mars.obj.rotateY(0.008);
    jupiter.obj.rotateY(0.002);
    saturn.obj.rotateY(0.0009);
    uranus.obj.rotateY(0.0004);
    neptune.obj.rotateY(0.0001);
    pluto.obj.rotateY(0.00007);

    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate)

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
})

    </script>