与three.js的透明背景
代码的工作，但我有一个问题，设置与three.jscanvas的透明背景。 我用：
Background.renderer.setClearColor(0xffffff, 0); 但是背景变黑了。 我如何改变它是透明的？
代码：
var camera, scene, renderer; var mouseX = 0, mouseY = 0; var p; var windowHalfX = site.Width / 2; var windowHalfY = site.Height / 2; Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 ); Background.camera.position.z = 300; //camera.position.y = 200; // scene Background.scene = new THREE.Scene(); // texture var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log('webgl, twice??'); //console.log( item, loaded, total ); }; // particles var p_geom = new THREE.Geometry(); var p_material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 1 }); // model var loader = new THREE.OBJLoader( manager ); loader.load( site.base_url + '/assets/models/head.obj', function ( object ) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { // child.material.map = texture; var scale = 6; $(child.geometry.vertices).each(function() { p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale)); }) } }); Background.scene.add(p) }); p = new THREE.ParticleSystem( p_geom, p_material ); Background.renderer = new THREE.WebGLRenderer(); Background.renderer.setSize( site.Width, site.Height ); Background.renderer.setClearColor(0xffffff, 0); $('.particlehead').append(Background.renderer.domElement); $('#content').on('mousemove', onDocumentMouseMove); site.window.on('resize', onWindowResize); function onWindowResize() { windowHalfX = site.Width / 2; windowHalfY = site.Height / 2; //console.log(windowHalfX); Background.camera.aspect = site.Width / site.Height; Background.camera.updateProjectionMatrix(); Background.renderer.setSize( site.Width, site.Height ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) / 2; mouseY = ( event.clientY - windowHalfY ) / 2; //console.log(mouseX) } Background.animate = function() { //console.log('animate2'); Background.ticker = TweenMax.ticker; Background.ticker.addEventListener("tick", Background.animate); render(); } function render() { Background.camera.position.x += ( (mouseX * .5) - Background.camera.position.x ) * .05; Background.camera.position.y += ( -(mouseY * .5) - Background.camera.position.y ) * .05; Background.camera.lookAt( Background.scene.position ); Background.renderer.render( Background.scene, Background.camera ); } render();
如果你想在three.js中使用透明背景，你需要把alphaparameter passing给WebGLRenderer构造函数。
var renderer = new THREE.WebGLRenderer( { alpha: true } );
您可以将清除颜色保留为默认值。
renderer.setClearColor( 0x000000, 0 ); // the default
three.js r.71
