那些遇到过的问题

为什么我无法在 Three.js 中投射或接收阴影

scy*_*120 5 three.js

我对此很陌生，我正在尝试在我刚刚制作的对象上创建闪电和阴影。正如您在下面的结果图片中看到的那样，它们实际上都没有投射或接收阴影。\n我已经为渲染器启用了阴影映射，并且还为我的所有对象启用了阴影投射和接收。我究竟做错了什么？

\n

在此输入图像描述

\n\n\n
<head>\n    <meta charset=utf-8>\n    <title>Three.js Object Tester</title>\n    <style>\n        body { margin: 0; overflow: hidden; }\n        canvas { width: 100%; height: 100% }\n    </style>\n</head>\n\n<body>\n\n<script type="module">\n    import * as THREE from \'./js-r119/build/three.module.js\';\n    import { TrackballControls } from \'./js-r119/examples/jsm/controls/TrackballControls.js\';\n\n    var WIDTH, HEIGHT, aspectRatio;\n    var renderer;\n    var scene, camera;\n    var controls;\n    var mesh;\n\n    init();\n    animate();\n    function init() {\n        HEIGHT = window.innerHeight;\n        WIDTH = window.innerWidth;\n        aspectRatio = WIDTH / HEIGHT;\n\n        renderer = new THREE.WebGLRenderer( { antialias: true } );\n        renderer.setSize( WIDTH, HEIGHT );\n        renderer.setClearColor( 0x000000 );\n        renderer.shadowMap.enabled = true;\n        document.body.appendChild( renderer.domElement );\n\n\n        scene = new THREE.Scene();\n\n        camera = new THREE.PerspectiveCamera( 75, aspectRatio, 0.1, 1000 );\n        camera.position.set( 0, 40, 80 );\n        camera.lookAt( scene.position );\n\n        var light = new THREE.AmbientLight( 0xF5F5F3 ); //ambiens f\xc3\xa9ny\n\n        scene.add( light );\n\n        var floorgeometry = new THREE.PlaneGeometry( 150, 150, 1, 1 );\n        var floormaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, wireframe: false } );\n        var floor = new THREE.Mesh( floorgeometry, floormaterial );\n        floor.material.side = THREE.DoubleSide;\n        floor.rotation.x = 1.57;\n        floor.position.z = 0;\n        floor.position.x = 0;\n        floor.position.y = -42.5;\n        floor.receiveShadow = true;\n        floor.castShadow = true;\n        scene.add( floor );\n\n\n        var vertgeometry = new THREE.BoxGeometry( 20, 45, 20);\n        var vertmaterial = new THREE.MeshLambertMaterial( { color: 0xD5D8DC, wireframe: false } );\n        var vert = new THREE.Mesh( vertgeometry, vertmaterial );\n        vert.castShadow = true;\n        vert.receiveShadow = true;\n        vert.rotation.z = 0;\n        vert.rotation.x = 0;\n        vert.rotation.y = 0;\n        vert.position.z = 0;\n        vert.position.x = 0;\n        vert.position.y = -20;\n\n\n        var horgeometry = new THREE.BoxGeometry( 20, 40, 20);\n        var hormaterial = new THREE.MeshLambertMaterial( { color: 0xD5D8DC, wireframe: false } );\n        var hor = new THREE.Mesh( horgeometry, hormaterial );\n        hor.castShadow = true;\n        hor.position.z = 0;\n        hor.position.y = -32.5;\n        hor.position.x = 30;\n        hor.rotation.z = 1.57;\n        hor.rotation.x = 0;\n        hor.rotation.y = 0;\n\n        scene.add( hor );\n\n        var roofgeometry = new THREE.ConeGeometry( 14.142, 40, 4);\n\n        var roofmaterial = new THREE.MeshLambertMaterial( { color: 0xF98E76, wireframe: false } );\n        var roof = new THREE.Mesh( roofgeometry, roofmaterial );\n        roof.castShadow = true;\n        roof.position.z = 0;\n        roof.position.y = 22.5;\n        roof.position.x = 0;\n        roof.rotation.z = 0;\n        roof.rotation.x = 0;\n        roof.rotation.y = 0.775;\n\n        scene.add( roof );\n\n        scene.add( vert );\n\n        var lampgeometry = new THREE.BoxGeometry( 2, 25, 2);\n        var lampmaterial = new THREE.MeshLambertMaterial( { color: 0x566573, wireframe: false } );\n        var lamp = new THREE.Mesh( lampgeometry, lampmaterial );\n        lamp.castShadow = true;\n        lamp.rotation.z = 0;\n        lamp.rotation.y = 0;\n        lamp.position.z = 0;\n        lamp.position.x = -60;\n        lamp.position.y = -30;\n\n        var spotgeometry = new THREE.BoxGeometry( 3, 3, 3);\n        var spotmaterial = new THREE.MeshLambertMaterial( { color: 0xF6F50B, wireframe: false } );\n        var spot = new THREE.Mesh( spotgeometry, spotmaterial );\n        spot.position.z = 0;\n        spot.position.y = -17.5;\n        spot.position.x = -60;\n\n        scene.add( lamp );\n        scene.add( spot );\n\n        var geometry = new THREE.SphereGeometry( 200, 20, 20);\n        var appearence = new THREE.MeshLambertMaterial ({\n            color: 0xa2a7a9,\n            wireframe: false\n        });\n\n        var objgeometry = new THREE.BoxGeometry(8,12,8);\n        var objmaterial = new THREE.MeshLambertMaterial({color: 0x1C1C03, wireframe: false});\n        var obj = new THREE.Mesh(objgeometry, objmaterial);\n        obj.castShadow = true;\n        obj.receiveShadow = true;\n        obj.position.z = 0;\n        obj.position.x = -40;\n        obj.position.y = -36.5;\n        scene.add(obj);\n\n\n\n        var sLight = new THREE.SpotLight( 0xF6F50B, 3 ); // spotf\xc3\xa9ny seg\xc3\xa9dgeometri\xc3\xa1val\n        sLight.position.set( -60, -17.5, 0 );\n        sLight.castShadow = true;\n        sLight.distance = 100;\n        sLight.target = obj;\n        sLight.castShadow = true;\n        sLight.shadow.mapSize.width = 2048;\n        sLight.shadow.mapSize.height = 2048;\n\n        scene.add( sLight );\n\n        var spotLightHelper = new THREE.SpotLightHelper( sLight );\n        scene.add( spotLightHelper );\n\n\n        window.addEventListener( \'resize\', handleWindowResize, false );\n\n\n\n        controls = new TrackballControls( camera, renderer.domElement );\n        controls.rotateSpeed = 5.0;\n        controls.panSpeed = 1.0;\n    }\n\n    function handleWindowResize() {\n        HEIGHT = window.innerHeight;\n        WIDTH = window.innerWidth;\n        console.log( \'WIDTH=\' + WIDTH + \'; HEIGHT=\' + HEIGHT );\n        renderer.setSize( WIDTH, HEIGHT );\n        aspectRatio = WIDTH / HEIGHT;\n        camera.aspect = aspectRatio;\n        camera.updateProjectionMatrix();\n\n        render();\n    }\n\n    function animate() {\n\n        requestAnimationFrame( animate );\n        controls.update();\n\n        render();\n    }\n\n    function render() {\n        renderer.render( scene, camera );\n    }\n\n</script>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

Mug*_*n87 2

如果您在场景中放置聚光灯，则必须确保没有阴影投射网格阻挡灯光的发射。这种情况发生在您的应用程序中，因为灯光位于网lamp格“内部”。更新代码：

\n

\r\n
\r\n
var WIDTH, HEIGHT, aspectRatio;\nvar renderer;\nvar scene, camera;\nvar controls;\nvar mesh, spotLightHelper;\n\ninit();\nanimate();\n\nfunction init() {\n  HEIGHT = window.innerHeight;\n  WIDTH = window.innerWidth;\n  aspectRatio = WIDTH / HEIGHT;\n\n  renderer = new THREE.WebGLRenderer({\n    antialias: true\n  });\n  renderer.setSize(WIDTH, HEIGHT);\n  renderer.setClearColor(0x000000);\n  renderer.shadowMap.enabled = true;\n  document.body.appendChild(renderer.domElement);\n\n\n  scene = new THREE.Scene();\n\n  camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);\n  camera.position.set(0, 40, 80);\n  camera.lookAt(scene.position);\n\n  var light = new THREE.AmbientLight(0xF5F5F3, 0.4); //ambiens f\xc3\xa9ny\n\n  scene.add(light);\n\n  var floorgeometry = new THREE.PlaneGeometry(150, 150, 1, 1);\n  var floormaterial = new THREE.MeshPhongMaterial({\n    color: 0xFFFFFF,\n    wireframe: false\n  });\n  var floor = new THREE.Mesh(floorgeometry, floormaterial);\n  //floor.material.side = THREE.DoubleSide;\n  floor.rotation.x = -Math.PI * 0.5;\n  floor.position.z = 0;\n  floor.position.x = 0;\n  floor.position.y = -42.5;\n  floor.receiveShadow = true;\n  scene.add(floor);\n\n\n  var vertgeometry = new THREE.BoxGeometry(20, 45, 20);\n  var vertmaterial = new THREE.MeshPhongMaterial({\n    color: 0xD5D8DC,\n    wireframe: false\n  });\n  var vert = new THREE.Mesh(vertgeometry, vertmaterial);\n  vert.castShadow = true;\n  vert.receiveShadow = true;\n  vert.rotation.z = 0;\n  vert.rotation.x = 0;\n  vert.rotation.y = 0;\n  vert.position.z = 0;\n  vert.position.x = 0;\n  vert.position.y = -20;\n\n\n  var horgeometry = new THREE.BoxGeometry(20, 40, 20);\n  var hormaterial = new THREE.MeshPhongMaterial({\n    color: 0xD5D8DC,\n    wireframe: false\n  });\n  var hor = new THREE.Mesh(horgeometry, hormaterial);\n  hor.castShadow = true;\n  hor.position.z = 0;\n  hor.position.y = -32.5;\n  hor.position.x = 30;\n  hor.rotation.z = 1.57;\n  hor.rotation.x = 0;\n  hor.rotation.y = 0;\n\n  scene.add(hor);\n\n  var roofgeometry = new THREE.ConeGeometry(14.142, 40, 4);\n\n  var roofmaterial = new THREE.MeshPhongMaterial({\n    color: 0xF98E76,\n    wireframe: false\n  });\n  var roof = new THREE.Mesh(roofgeometry, roofmaterial);\n  roof.castShadow = true;\n  roof.position.z = 0;\n  roof.position.y = 22.5;\n  roof.position.x = 0;\n  roof.rotation.z = 0;\n  roof.rotation.x = 0;\n  roof.rotation.y = 0.775;\n\n  scene.add(roof);\n\n  scene.add(vert);\n\n  var lampgeometry = new THREE.BoxGeometry(2, 25, 2);\n  var lampmaterial = new THREE.MeshPhongMaterial({\n    color: 0x566573,\n    wireframe: false\n  });\n  var lamp = new THREE.Mesh(lampgeometry, lampmaterial);\n  lamp.rotation.z = 0;\n  lamp.rotation.y = 0;\n  lamp.position.z = 0;\n  lamp.position.x = -60;\n  lamp.position.y = -30;\n\n  var spotgeometry = new THREE.BoxGeometry(3, 3, 3);\n  var spotmaterial = new THREE.MeshPhongMaterial({\n    color: 0xF6F50B,\n    wireframe: false\n  });\n  var spot = new THREE.Mesh(spotgeometry, spotmaterial);\n  spot.position.z = 0;\n  spot.position.y = -17.5;\n  spot.position.x = -60;\n\n  scene.add(lamp);\n  scene.add(spot);\n\n  var geometry = new THREE.SphereGeometry(200, 20, 20);\n  var appearence = new THREE.MeshPhongMaterial({\n    color: 0xa2a7a9,\n    wireframe: false\n  });\n\n  var objgeometry = new THREE.BoxGeometry(8, 12, 8);\n  var objmaterial = new THREE.MeshPhongMaterial({\n    color: 0x1C1C03,\n    wireframe: false\n  });\n  var obj = new THREE.Mesh(objgeometry, objmaterial);\n  obj.castShadow = true;\n  obj.receiveShadow = true;\n  obj.position.z = 0;\n  obj.position.x = -40;\n  obj.position.y = -36.5;\n  scene.add(obj);\n\n\n\n  var sLight = new THREE.SpotLight(0xF6F50B, 1); // spotf\xc3\xa9ny seg\xc3\xa9dgeometri\xc3\xa1val\n  sLight.position.set(-60, -17.5, 0);\n  sLight.castShadow = true;\n  sLight.distance = 100;\n  sLight.target = obj;\n  sLight.angle = Math.PI * 0.2;\n  sLight.shadow.camera.near = 0.1;\n  sLight.shadow.camera.far = 100;\n  sLight.shadow.mapSize.width = 2048;\n  sLight.shadow.mapSize.height = 2048;\n\n  scene.add(sLight);\n\n  spotLightHelper = new THREE.SpotLightHelper(sLight);\n  scene.add(spotLightHelper);\n\n  var cameraHelper = new THREE.CameraHelper(sLight.shadow.camera);\n  scene.add(cameraHelper)\n\n\n  window.addEventListener(\'resize\', handleWindowResize, false);\n\n}\n\nfunction handleWindowResize() {\n  HEIGHT = window.innerHeight;\n  WIDTH = window.innerWidth;\n  renderer.setSize(WIDTH, HEIGHT);\n  aspectRatio = WIDTH / HEIGHT;\n  camera.aspect = aspectRatio;\n  camera.updateProjectionMatrix();\n\n  render();\n}\n\nfunction animate() {\n\n  requestAnimationFrame(animate);\n  spotLightHelper.update();\n\n  render();\n}\n\nfunction render() {\n  renderer.render(scene, camera);\n}
Run Code Online (Sandbox Code Playgroud)\r\n
body {\n  margin: 0;\n}\ncanvas {\n  display: block;\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.js"></script>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

顺便说一句：使用时SpotLightHelper，请确保在动画循环中更新此助手。此外，CameraHelper对于调试阴影视锥体很有用。

\n

归档时间：

查看次数：

4617 次

最近记录：

5 年，1 月 前
相关归档
三个js正确从场景中删除对象(仍然在HEAP中保留) 15
three.js r72不再支持THREE.LinePieces,如何将多个断开的行与THREE.LineSegments合并？ 7
使用矩阵转换Three.js场景图 5
THREE.js:2xMeshes使用相同的向量作为位置 5
Three.js - 如何等待图像加载？ 5
Three.JS - 冲突Camera控件与场景中的文本框 4
飞机上的顶点没有位置？ 3
如何在three.js中修复圆角平面上的纹理 3
如何在三个js坐标系中正确定位html元素？ 3
在glsl和三个js中将粒子从鼠标位置推开 2
难疑归档
正则表达式匹配不包含单词的行？ 4121
循环内的JavaScript闭包 - 简单实用的例子 2689
我应该在MySQL中使用日期时间或时间戳数据类型吗？ 2598
如何在TextView中水平和垂直居中文本？ 1932
Git拒绝合并关于rebase的无关历史 1862
在不应用它的情况下查看存储中的内容 1650
漂亮的git分支图 1290
在Python中使用大写字母和数字生成随机字符串 1247
为什么我们需要C++中的虚函数？ 1223
HTML中"role"属性的目的是什么？ 1122