blocks|key|984935|text|非常感谢你的回答。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|984936|我正在通过实践学习A-Frame，Three.js，Javascript和html。|984937|你用A-Frame做的事情真是太棒了。|984938|执行以下操作后，它不是完美的，但目前它可以工作：|984939|在函数初始化中:+registerComponent+()|984940|在网格中投射阴影：|984941|el.getObject3D('mesh').castShadow+=+data.shadow；//data.shadow+=+true|984942|在要接收阴影的网格中：|984943|el.getObject3D('mesh').receiveShadow+=+data.shadow；//data.shadow+=+true|984944|聚光灯下：|984945|this.spotlight+=+new+THREE.SpotLight(data.colorm);
++++++++++++++++el.setObject3D('spotlight',+this.spotlight);
++++++++++++++++el.getObject3D('spotlight').castShadow+=+data.shadow;
++++++++++++++++el.getObject3D('spotlight').shadow.camera.near+=+data.shadowcameranear;
++++++++++++++++el.getObject3D('spotlight').shadow.camera.far+=+data.shadowcamerafar;
++++++++++++++++el.sceneEl.systems.light.registerLight(el);|code-block|syntax|javascript|984946|然后使用场景已加载事件：|984947|function+setShadows()
++++{
++++++++aframeRenderer.shadowMap.enabled+=+true;
++++++++aframeRenderer.shadowMap.type+=+THREE.PCFSoftShadowMap;
++++++++aframeRenderer.setClearColor(0x000000,+1.0);
++++++++aframeRenderer.setSize(window.innerWidth,+window.innerHeight);
++++++++aframeRenderer.shadowMap.enabled+=+true;

++++++++threeSpotLight.shadowCameraNear+=+0.01;

++++++++threeSpotLight.castShadow+=+true;
++++++++threeCube.castShadow+=+true;
++++++++threeCube.receiveShadow+=+false;
++++++++threePlane.castShadow+=+false;
++++++++threePlane.receiveShadow+=+true;

++++++++threeSpotLight.visible+=+true;
++++}|984948|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1B|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1C|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1D|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1E|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|V|7|1G|8|@]|9|@]|A|$W|X]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

many thanks for your answers.

I am learning A-Frame, Three.js, Javascript, and html just by doing. 

It is awesome what you are doing with A-Frame.

Done the following, it is not perfect, but for now it works:

In the registerComponent init:function()

In the meshes to cast shadows:

el.getObject3D('mesh').castShadow = data.shadow; //data.shadow = true

In the meshes to receive shadows:

el.getObject3D('mesh').receiveShadow = data.shadow; //data.shadow = true

In the spotlight:

<pre><code>this.spotlight = new THREE.SpotLight(data.colorm);
 el.setObject3D('spotlight', this.spotlight);
 el.getObject3D('spotlight').castShadow = data.shadow;
 el.getObject3D('spotlight').shadow.camera.near = data.shadowcameranear;
 el.getObject3D('spotlight').shadow.camera.far = data.shadowcamerafar;
 el.sceneEl.systems.light.registerLight(el);
</code></pre>

And then using the scene has loaded event:

<pre><code>function setShadows()
 {
 aframeRenderer.shadowMap.enabled = true;
 aframeRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
 aframeRenderer.setClearColor(0x000000, 1.0);
 aframeRenderer.setSize(window.innerWidth, window.innerHeight);
 aframeRenderer.shadowMap.enabled = true;

 threeSpotLight.shadowCameraNear = 0.01;

 threeSpotLight.castShadow = true;
 threeCube.castShadow = true;
 threeCube.receiveShadow = false;
 threePlane.castShadow = false;
 threePlane.receiveShadow = true;

 threeSpotLight.visible = true;
 }
</code></pre>

blocks|key|1305261|text|自那以后，阴影已添加到A帧：https://github.com/aframevr/aframe/pull/2350|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1305262|https://aframe.io/docs/master/components/light.html#configuring-shadows|1305263|<a-scene+shadow>
++<a-entity+light="type:+directional;+castShadows:+true"></a-entity>
++<a-box+shadow="cast:+true;+receive:+true"></a-box>
</a-scene>|code-block|syntax|javascript|1305264|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/aframevr/aframe/pull/2350|1^0|E|18|0|0|0|1Z|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|E]]]]

Shadows have since been added to A-Frame: <a href="https://github.com/aframevr/aframe/pull/2350" rel="nofollow noreferrer">https://github.com/aframevr/aframe/pull/2350</a>

<a href="https://aframe.io/docs/master/components/light.html#configuring-shadows" rel="nofollow noreferrer">https://aframe.io/docs/master/components/light.html#configuring-shadows</a>

<pre><code>&lt;a-scene shadow&gt;
 &lt;a-entity light="type: directional; castShadows: true"&gt;&lt;/a-entity&gt;
 &lt;a-box shadow="cast: true; receive: true"&gt;&lt;/a-box&gt;
&lt;/a-scene&gt;
</code></pre>

Using AFrame and three. Have made an AFrame simple scene, a camera, a renderer, a spotlight, a plane and a cube.

I want the cube to cast shadow into the plane.

I have set, using the reference cube.object3D and spotlight.object3D, the .castShadow in the spotlight, in the cube.

I have set, using the reference plane.object3D, the receiveShadow in the plane.

Have also set the renderer.shadowMapEnabled.

But can not see any shadow casted into the plane.

Any hint ?

Thanks a lot.

A-Frame and Three.js how to set castShadow and receiveShadow

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

使用AFrame和three。制作了一个简单的AFrame场景，一个相机，一个渲染器，一个聚光灯，一个平面和一个立方体。我想让这个立方体在平面上投下阴影。我已经使用引用cube.object3D和spotlight.object3D在立方体中设置了聚光灯下的.castShadow。我已经使用reference plan...

问A-Frame和Three.js如何设置castShadow和receiveShadow
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问A-Frame和Three.js如何设置castShadow和receiveShadowEN