PLM之家PLMHome-国产软件践行者

[前端框架] Threejs 增加阴影的方法

[复制链接]

2020-2-5 14:27:14 1946 0

admin 发表于 2020-2-5 14:27:14 |阅读模式

admin 楼主

2020-2-5 14:27:14

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x

$ Q* j# x2 M, F4 i: S6 n+ I
, D* r1 D4 \% l5 ^" y) {* \官方提供的实例如下 0 e( U% i) F7 f. f9 M' t" n

- {9 o) g' B( a3 H& h$ w& j8 ~& T1。 首先在Scene里面激活 渲染 ShadowMap- A- W9 C: F7 O, z% H
//Create a WebGLRenderer and turn on shadows in the renderervar renderer = new THREE.WebGLRenderer();renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
7 F7 a7 R* |8 G  l
0 e: X/ A6 p& a6 m3 a( G
2。 创建平行光,并可以投射Shadow//Create a DirectionalLight and turn on shadows for the lightvar light = new THREE.DirectionalLight( 0xffffff, 1, 100 );light.position.set( 0, 1, 0 );                         //default; light shining from toplight.castShadow = true;            // default falsescene.add( light );
& S3 |) |4 A( C$ \% ~1 `

, I+ o- Y! m0 o/ u& W//Set up shadow properties for the lightlight.shadow.mapSize.width = 512;  // defaultlight.shadow.mapSize.height = 512; // defaultlight.shadow.camera.near = 0.5;    // defaultlight.shadow.camera.far = 500;     // default$ N; h: ~1 L" T0 ]# ?
/ M/ z) v) m0 Y1 k( S/ T* W! @- U
3. 创建接受shadow的物体 //Create a sphere that cast shadows (but does not receive them)var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );sphere.castShadow = true; //default is falsesphere.receiveShadow = false; //defaultscene.add( sphere );
" A$ }6 P" h# b1 ~( A

7 h( `7 k0 U! v, C- ]0 g5 w4. 创建获取投影的平面 //Create a plane that receives shadows (but does not cast them)var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )var plane = new THREE.Mesh( planeGeometry, planeMaterial );plane.receiveShadow = true;scene.add( plane );//Create a helper for the shadow camera (optional)var helper = new THREE.CameraHelper( light.shadow.camera );scene.add( helper );
2 W  {. f) `0 j" H1 E6 Y+ K5 R* S1 r5 e! j! s9 {4 ?

- Z7 S; f3 s" T2 ^$ |% h3 _" f
9 ~- I2 f( n: r. c; ?' Z

2 W0 _: t: K2 }6 Y5 Q" Q7 J+ c1 o  {5 ~效果如下!
5 ~8 S/ Q2 L/ a# W# V9 q0 ~/ z: Q3 [5 u1 ]0 S; Q- X1 d
4 Q) [$ u- V+ {
Xnip2020-02-05_14-24-56.jpg
: v( t3 I6 {6 {2 i' V; }/ d
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了