Threejs：光影

 环境光

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
scene.add(light);

创建地面

　const planeSize = 40;

const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
  map: texture,
  side: THREE.DoubleSide,
});
const mesh3 = new THREE.Mesh(planeGeo, planeMat);
mesh.rotation.x = Math.PI * -.5;
scene.add(mesh3)

 

完整代码

import * as THREE from "three"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    Mesh,
    BoxGeometry,
    PlaneGeometry, 
    MeshBasicMaterial, 
    MeshStandardMaterial,
    Raycaster, Vector2,
    MeshPhongMaterial,
    DirectionalLight,
  } from 'three';


// 创建一个场景
const scene = new THREE.Scene();
// 设置摄像机
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(0,10,5)
scene.add(camera)
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 渲染尺寸
renderer.setSize( window.innerWidth, window.innerHeight );
// 给渲染器开启阴影的计算
renderer.shadowMap.enabled = true;

// 将其添加到body节点
document.body.appendChild( renderer.domElement );


// 设置轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 设置观测点
controls.target.set(0, 0, 0);
controls.update();
camera.position.z = 5;

// 设置动画
function animate() {

    // 渲染场景
    renderer.render( scene, camera );
    requestAnimationFrame( animate );
}
animate();
// 创建几何体
const geometry = new THREE.SphereGeometry( 1, 20, 20 );
const material = new THREE.MeshStandardMaterial( { color: 0xffffff } );
const sphere = new THREE.Mesh( geometry, material );
// scene.add( sphere );
//投射阴影
sphere.castShadow = true;

scene.add(sphere);

// 创建平面
// const geometry = new THREE.PlaneGeometry( 1, 1 );
// const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
// const plane = new THREE.Mesh( geometry, material );

const planeGeometry = new THREE.PlaneGeometry(10,10);
const plane = new THREE.Mesh(planeGeometry,material);
plane.position.set(0,-1,0);
plane.rotation.x = -Math.PI / 2;
//可以接收阴影
plane.receiveShadow = true; 
scene.add( plane );

// 环境光
const color = 0xFFFfff;
const intensity = 0.5;
const light = new THREE.AmbientLight(color, intensity);
scene.add(light);

// 方向光（直线光源）
const color2 = 0xFFFFFF;
const intensity2 = 0.3;
const light2 = new THREE.DirectionalLight(color2, intensity2);
light2.position.set(10, 10, 10);
light2.castShadow = true;
light2.target.position.set(-5, 0, 0);

scene.add(light2);
scene.add(light2.target);


//改变光源分析不同

// 点光源
// const color3 = 0xFFFFFF;
// const intensity3 = 1;
// const light3 = new THREE.PointLight(color3, intensity3);
// light3.position.set(0, 10, 0);
// light3.castShadow = true;
// scene.add(light3);

// // 聚光灯
// const color4 = 0xFFFFFF;
// const intensity4 = 1;
// const light4 = new THREE.SpotLight(color4, intensity4);
// scene.add(light4);
// scene.add(light4.target);
// // 光源的位置是圆锥的顶点，目标点处于圆锥的中轴线上。
// const helper = new THREE.SpotLightHelper(light4);
// scene.add(helper);

// const gui = new dat.GUI();
// gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);