three.js版本不同,效果会有些差异,我的这个版本中粒子贴图有问题,边缘没有透明,会互相遮挡。也许可以通过修改代码来弥补吧。
在材质中添加一个属性即可: depthTest:false
depthTesh深度测试,该参数可以打开或关闭GL_DEPTH_TEST参数。该参数决定像素深度是否用来计算新的像素值。
var renderer;
var scene;
var camera, cubeCamera;
var orbit;
var sceneCube;
var cameraCube;
function init() {
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
cameraCube = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.x = 0;
camera.position.y = 5;
camera.position.z = 33;
camera.lookAt(scene.position);
orbit = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
var textureCube = createCubeMap();
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var material = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.DoubleSide
});
cubeMesh1 = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), material);
cubeMesh1.position.set(10,0,0);
scene.add(cubeMesh1);
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40,60,40);
scene.add(spotlight);
var spotlight1 = new THREE.SpotLight(0xffffff);
spotlight1.position.set(40,-60,-40);
scene.add(spotlight1);
var cube1 = creatcube(0,0,0,6);
var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
scene.add(skybox);
cubeCamera = new THREE.CubeCamera(0.1, 20000, 256);
scene.add(cubeCamera);
document.body.appendChild(renderer.domElement);
render();
}
function createCubeMap() {
var path = "textures/parliament/";
var format = '.jpg';
var urls = [
path + 'posx' + format, path + 'negx' + format,
path + 'posy' + format, path + 'negy' + format,
path + 'posz' + format, path + 'negz' + format
];
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
//var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
return textureCube;
}
function creatcube(x,y,z,len) {
var cubeme = new THREE.BoxGeometry(len,len,len);
var cubemer = new THREE.MeshPhongMaterial();
var texture = new THREE.ImageUtils.loadTexture("textures/223.jpg");
cubemer.map = texture; //纹理贴图
cubemer.bumpMap = texture; //凹凸贴图
cubemer.bumpScale = 0.2;
var cube = new THREE.Mesh(cubeme,cubemer);
cube.position.set(x,y,z);
scene.add(cube);
return cube;
}
function render() {
orbit.update();
cubeCamera.updateCubeMap(renderer, scene);
renderer.render(scene, camera);
//renderer.render(sceneCube,cameraCube);
requestAnimationFrame(render);
}
window.onload = init;
演示地址:粒子系统