Three.js：无法投射基本阴影

Question

很抱歉问这样一个关于三的基本问题，但我看不出我错过了什么。我试图让圆环体在平面上投射阴影，但没有出现阴影。

谁能看到我错过了什么？任何指针将不胜感激！

// generate a scene object
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 1, -150);

// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);

// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);
// create light that casts shadows
var light = new THREE.PointLight(0xffffff);
light.position.set(0, 0, -100);
light.castShadow = true;
scene.add(light);

// render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
};

// draw some geometries
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
torus.position.set(0, 0, -10);
torus.castShadow = true;
scene.add( torus );

var geometry = new THREE.PlaneGeometry( 200, 200, 32 );
var material = new THREE.MeshBasicMaterial(
  {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
scene.add( plane );

render();

html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }

<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
  <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
</body>

Answer 1

MeshBasicMaterial 对光没有反应。您分配给它的任何颜色基本上都表现为发光颜色。也许你打算使用 MeshStandardMaterial?

// generate a scene object
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 1, -150);

// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);

// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
// scene.add(ambientLight);
// create light that casts shadows
var light = new THREE.PointLight(0xffffff);
light.position.set(0, 0, -100);
light.castShadow = true;
scene.add(light);

// render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
};

// draw some geometries
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
torus.position.set(0, 0, -10);
torus.castShadow = true;
scene.add( torus );

var geometry = new THREE.PlaneGeometry( 200, 200, 32 );
var material = new THREE.MeshStandardMaterial(
  {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
scene.add( plane );

render();

html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }

<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
  <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
</body>

Three.js：无法投射基本阴影

Three.js: Trouble Casting Basic Shadow

javascript

lighting

three.js