three.js 如何设置背景图片？

最新推荐文章于 2024-06-06 14:06:22 发布

芸轩

最新推荐文章于 2024-06-06 14:06:22 发布

阅读量1.3w

点赞数 5

分类专栏： Three.js 文章标签： three.js 背景显示不出 body背景 three.js背景图不显示

本文链接：https://blog.csdn.net/flame_007/article/details/98961247

版权

9 篇文章 1 订阅

订阅专栏

有两种方式：

1、使用html的body属性设置背景图片，即：

body {
    margin: 0;
    overflow: hidden;
    background: url("background/background.png") center no-repeat;
    background-size:cover;
}

这种方法要设置渲染器的透明度，即：

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效果。

缺点是，要设置足够的距离，不要让你的其它对象物体跑到这个背景的后面去，跑到后面就看不到了。

关注

专栏目录