javascript - グラフィックが両面で消える THREE.js の y 軸でのオブジェクトの回転

Question

class Game extends backbone.View
    constructor: ->
        @scene = new THREE.Scene()
        @camera = new THREE.PerspectiveCamera 75, window.innerWidth/window.innerHeight, 1, 100000

        @camera.position.z = 300
        @scene.add @camera
        @imgText = imgText = THREE.ImageUtils.loadTexture "/images/health.png"
        imgText.wrapT = imgText.wrapS = THREE.RepeatWrapping
        sphereMat = new THREE.MeshBasicMaterial {map: imgText}
        @mesh = new THREE.Mesh new THREE.CylinderGeometry(100, 100, 200, 64, 1, true), sphereMat
        @mesh.doubleSided = @mesh.flipSided = true
        @mesh.frustumCulled = false
        @scene.add @mesh
        pl = new THREE.PointLight 0xFFFFFF
        [pl.position.x, pl.position.y, pl.position.z] = [10, 50, 130]
        @scene.add pl

        @el = $ "body"

    render: ->
        @renderer = new THREE.WebGLRenderer()
        @renderer.setSize window.innerWidth, window.innerHeight
        $(@el).append @renderer.domElement

        $(@el).mousewheel (event, delta) =>
            @camera.position.z += delta

    step: (delta) ->
        @mesh.rotation.y += 1*
        @renderer?.render @scene, @camera

テクスチャが消える/再表示されるという奇妙な問題が発生します。オブジェクト全体が少しの間消えて、どこからともなく戻ってくるようなものです。ユーチューブの動画を貼り付けました。

http://www.youtube.com/watch?v=aHh25O6I5Vs

Answer 1

mesh.flipSided = falseほとんどの場合、とを設定するだけですmesh.doubleSided = true。