有两种方式:
1、使用html的body属性设置背景图片,即:
body { margin: 0; overflow: hidden; /* 溢出隐藏 */ background: url("BJ/BJ01.jpg") center no-repeat; -webkit-background-size: cover; 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效果。
替换颜色setClearColor
// var renderer = new THREE.WebGLRenderer();//渲染器构建 // renderer.setClearColor(0x121A39);