Question

I’m trying to reimplement this example in CoffeeScript. My code looks like this:

class Example
    width: 640
    height: 480

    constructor: ->
        @camera = new THREE.PerspectiveCamera 45, @width/@height, 10000
        @camera.position.z = 300

        @scene = new THREE.Scene
        cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50), new THREE.MeshBasicMaterial ({color: 0x000000}))
        
        @scene.add cube

        @renderer = new THREE.WebGLRenderer { antialias: true }
        @renderer.setSize @width, @height
        @renderer.setClearColorHex 0xEEEEEE, 1.0
        @renderer.clear()

        @element = $(@renderer.domElement).appendTo $('div#display')

        @renderer.render(@scene, @camera)

However, this only shows a grey background and not a cube in Chrome and Firefox. In Chrome, this grey background also appears to blink once upon loading. What’s wrong?

Context: this is included in its own class using instance variables because this is meant to be expanded upon later.

Answer 1

Your near plane appears to be at a distance of 10000. Change to the following:

@camera = new THREE.PerspectiveCamera 45, @width/@height, 1, 10000