代码之家 › 专栏 › 技术社区 › duhaime

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

lighting three.js javascript

duhaime · 技术社区 · 6 年前

很抱歉问这么一个关于三的基本问题,但我看不出我遗漏了什么。我试着让圆环在平面上投射阴影,但是阴影没有出现。

有人能看到我遗漏了什么吗?任何指点都将不胜感激!

// 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>

1 回复 | 直到 6 年前

M - 6 年前

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>