logarithmicDepthBuffer + sprite bug
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
CSS
body {
overflow: hidden;
}
JavaScript
var camera, renderer, controls;
var floor, box;
var scene, sprites = [];
var i;
init();
render();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(150, 450, 450);
scene = new THREE.Scene();
box = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial({
color: 0xff0000
}));
box.translateY(50.001);
for (i = 0; i < 4; ++i) {
sprites[i] = new THREE.Sprite(new THREE.SpriteMaterial({
color: 0xffffff * Math.random()
}));
sprites[i].scale.set(50, 50, 1);
sprites[i].translateY(50);
scene.add(sprites[i]);
}
sprites[0].translateX(75);
sprites[1].translateX(-75);
sprites[2].translateZ(75);
sprites[3].translateZ(-75);
scene.add(box);
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x5f5f5f);
controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}