DirectioanlLight 在 Three.js 中不起作用

问题描述

我尝试在 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,1)
scene.add(light)

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

animate()

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

解决方法

我在代码中发现了问题，我使用了 MeshPhongMaterial()，它没有反应，我应该使用 find_elements