在THREE.js中,y轴上的双侧对象旋转图形消失

时间:2012-08-12 12:49:13

标签: javascript coffeescript webgl 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

纹理消失/再现时出现一些奇怪的问题。它就像整个物体消失了一段时间然后从没有地方回来。我附上了YouTube视频。

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

1 个答案:

答案 0 :(得分:1)

最有可能的是,您只需要设置mesh.flipSided = falsemesh.doubleSided = true