CODEWITHSUNDEEP
javascriptcoffeescriptwebglthree.js
Pykedout
Pykedout

Reputation: 71

Graphic disappears on two sided Object rotation on y axis in THREE.js

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

Getting some weird issues with the texture disappearing/reappearing. Its like the entire object disappears for a bit then comes back out of no where. I've attached a youtube video.

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

Upvotes: 1

Views: 916

Answers (1)

WestLangley
WestLangley

Reputation: 104843

Most likely, you just need to set mesh.flipSided = false and mesh.doubleSided = true.

Upvotes: 1

Related Questions