SOURCE

$(function() {
    var renderer, scene, camera
    function init() {
        renderer = new THREE.WebGLRenderer()
        scene = new THREE.Scene()
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000)

        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.setClearColor('#eee')
        document.body.appendChild(renderer.domElement)

        camera.position.x = -30
        camera.position.y = 40
        camera.position.z = 30
        camera.lookAt(0, 0, 0)
    }
    
    function addMesh() {
        // 添加正方体
        var boxGeometry = new THREE.BoxGeometry(10, 10, 10)
        var boxMaterial = new THREE.MeshBasicMaterial({
            color: 'red'
        })
        var box = new THREE.Mesh(boxGeometry, boxMaterial)
        scene.add(box)

        // 添加平面
        var planeGeometry = new THREE.PlaneGeometry(60, 20)
        var planeMaterial = new THREE.MeshBasicMaterial({
            color: '#39f'
        })
        var plane = new THREE.Mesh(planeGeometry, planeMaterial)
        scene.add(plane)
    }

    function render() {
        renderer.render(scene, camera)
    }
    
    init()
    addMesh()
    render()
})

body {
    overflow: hidden;
}