DirectioanlLight 在 Three.js 中不起作用

Question

我尝试在 Three.js 中添加灯光，但是当我更新显示时，灯光不会影响我的 cilinder 我从字面上复制粘贴了 Three.js 文档 Three.js 的源代码 但它不起作用，

这是我的代码

import * as THREE from "https://cdn.skypack.dev/three@0.126.1";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js";
//scene and camera set up
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement);
//Orbitcontrols
new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;

//setting up cilinder 
const geometry = new THREE.CylinderGeometry( 1.4, 2, .6, 10 )
const material = new THREE.MeshBasicMaterial( {color: 0x327322} )
const cylinder = new THREE.Mesh( geometry, material )
scene.add( cylinder )

//Light Part
const light = new THREE.DirectionalLight(0xffffff, 0.1);
light.position.set(0, 0, 1)
scene.add(light)

const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate()

您还可以在 codepen 上查看它的工作原理CODEPEN

Answer 1

我在代码中发现了问题，我使用MeshBasicMaterial()，它不会对光线产生反应，我应该使用MeshPhongMaterial()