three.js прозрачный шар сбой

Question

У меня есть прозрачная сфера и свет пятна, и это все. Моя сфера отображает визуальные сбои, такие как страты.

см: http://jsfiddle.net/blwoodley/tvcogqkg/3/

(Обратите внимание, что сетка не является необходимым, чтобы проявить эту ошибку я просто положить его туда, чтобы показать, что прозрачность работает иначе штраф.).

Любые мысли о том, как избавиться от этих сбоев? Они, похоже, зависят от относительного положения камеры и точечного света.

Использование three.js, r71.

Вот код из скрипки, так как SO, кажется, хочет его:

var SCREEN_WIDTH = window.innerWidth - 100; 
var SCREEN_HEIGHT = window.innerHeight - 100; 

var camera, scene, _planeMesh; 
var canvasRenderer, webglRenderer; 

var container, mesh, geometry, plane; 

container = document.createElement('div'); 
document.body.appendChild(container); 
scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 100000); 
camera.position.set(380, 80, 100); 
var spotLight = new THREE.SpotLight(0xffffff); 
spotLight.position.set(180, 160, 0); 
var grid = new THREE.GridHelper(400, 40); 
grid.position.y = -20; 
scene.add(grid);  

scene.add(spotLight); 

camera.lookAt(scene.position); 
var material = new THREE.MeshPhongMaterial({ 
    color: 0xaaaa00, 
    emissive: 0xaa0000, 
    specular: 0xaa00aa, 
    shininess: 10, 
    side: THREE.DoubleSide, 
    shading: THREE.SmoothShading, 
    opacity: .8, transparent: true }); 
var size = 16.0; 
var sphereGeo = new THREE.SphereGeometry(size, 32, 16); 
var mesh = new THREE.Mesh(sphereGeo, material); 
scene.add(mesh); 

var mesh = new THREE.Mesh(sphereGeo, material); 
mesh.position.y = 40; 
scene.add(mesh); 

var mesh = new THREE.Mesh(sphereGeo, material); 
mesh.position.x = 60; 
scene.add(mesh); 

// RENDERER 
webglRenderer = new THREE.WebGLRenderer(); 
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
webglRenderer.domElement.style.position = "relative"; 

container.appendChild(webglRenderer.domElement); 
animate(); 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    webglRenderer.render(scene, camera); 
} 

Answer 1

Удалить атрибут side: THREE.DoubleSide. Поскольку вы рисуете сферы, вам это не нужно.