Three.js 添加灯光时平面颜色较深

Question

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


const renderer = new THREE.WebGL1Renderer();

renderer.shadowMap.enabled = true

renderer.setSize(window.innerWidth,window.innerHeight)

document.body.appendChild(renderer.domElement)

const scene  = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    0.1,
    1000

)

const orbit = new OrbitControls(camera,renderer.domElement)

const axeHelper = new THREE.AxesHelper(5);
scene.add(axeHelper)

// scene.background = new THREE.Color(0XFFFFFF)

camera.position.set(-10,30,30)
orbit.update();

// Box
const boxGeometry =new THREE.BoxGeometry();
const boxMeterial = new THREE.MeshBasicMaterial({color:0x00FF00});
const box = new THREE.Mesh(boxGeometry,boxMeterial);
scene.add(box)

// paper
const planeGeometry = new THREE.PlaneGeometry(30,30);
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF,side: THREE.DoubleSide});
const plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane); 
plane.rotation.x = -0.5 * Math.PI
plane.receiveShadow = true 

// Grid helper
const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);

// Sphere
const sphereGeometry = new THREE.SphereGeometry(4,50,50);
const sphereMeterial = new THREE.MeshStandardMaterial({color:0x0000FF });
const sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);
sphere.castShadow = true
scene.add(sphere);

sphere.position.set(-10,10,0);

// // Ambient Light
const ambientLight = new THREE.AmbientLight(0x222222 );
scene.add(ambientLight);

// // Direction Lights
const directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 0.8 );
directionalLight.position.set(-30,50,0)
directionalLight.castShadow = true;
directionalLight.shadow.camera.bottom =-12
scene.add( directionalLight ) ;


//  Direction Light Helper
const dLightHelper = new THREE.DirectionalLightHelper(directionalLight,5);
scene.add(dLightHelper)

//  Direction Light Shadow Helper
const dLightShadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(dLightShadowHelper)





// Controller
const gui = new dat.GUI();
const options = {
    sphereColor: '#ffea00',
    wireframe:false,
    speed:0.01,
}

gui.addColor(options,'sphereColor').onChange(function(e){
    sphere.material.color.set(e);
})

gui.add(options,'wireframe').onChange(function(e){
    sphere.material.wireframe = e;
})

gui.add(options,'speed',0,0.1)



// box.rotation.x = 5;
// box.rotation.y = 5;

let step = 0;
let speed  = 0.1;
// Box animation
function animate(time) {
    box.rotation.x = time/1000;
    box.rotation.y = time/1000;
    renderer.render(scene,camera);

    step += options.speed;
    sphere.position.y = 10 * Math.abs(Math.sin(step))
}

renderer.render(scene,camera);


renderer.setAnimationLoop(animate);

我使用的是MacBook M1，这些天我正在关注

three.js

教程，我已经像该教程一样重写了代码，但是我的

three.js

渲染的屏幕在添加灯光后变暗了很多，我找不到解决方案。

我想向平面材质添加更多颜色，因为在添加灯光之前它看起来是白色的，但现在看起来是灰色的，因此阴影不清晰，我正在按照教程来执行此操作，但在该教程中平面颜色是白色

Answer 1

我看不出有任何错误的行为。结果正如预期的那样。

DirectionalLight

的能量取决于光相对于表面法向量的方向（双向反射分布函数）和强度。当强度较低时，一切都是黑暗的，就像自然界的夜晚一样。如果强度高，则一切都明亮。因此，如果您想要更明亮的表面，则必须增加强度或使用多个光源。当然，你也可以增加环境光的强度。