谢凡社区_C4D&Ae设计交流社区

 找回密码
 立即注册
查看: 278|回复: 0

[攻略] three js设置背景颜色的方案

[复制链接]

351

主题

351

帖子

10万

金币

管理员

Rank: 9Rank: 9Rank: 9

积分
207890
发表于 2022-6-23 17:30:24 | 显示全部楼层 |阅读模式
1.png

https://www.xiefansq.com/threejs/bowuguan/shouzhuo/

现在使用three做个建筑展示,需要把背景改为透明

1、使用html的body属性设置背景图片,即:
这种方法要设置渲染器的透明度,即:
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setClearAlpha(0.2);
alpha: true 这个属性是关键,不然背景会被renderer遮住。
这里还有一个关键点,就是不要对scene设置背景色,即:
scene.background = new THREE.Color( 0x000000 );
如果设置了,也会遮住html的背景图。

2、使用 THREE.PlaneBufferGeometry 设置背景,就相当于创建一个大的平面来充当背景
这种方式的优点是,可以设置倾斜度,设置场景的雾化效果,展示出一个带深度的3D效果。
缺点是,要设置足够的距离,不要让你的其它对象物体跑到这个背景的后面去,跑到后面就看不到了。






回复

使用道具 举报

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

本版积分规则

谢凡社区_C4D&Ae设计交流社区 ( 苏ICP备15030673号-2 )

GMT+8, 2022-9-28 07:31 , Processed in 0.139663 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表