Stack Exchange
THREE.JS не работает (не рендерит сцену и выдает ошибку)
Написал код, который создает простую сцену:
__INIT = function () {

    that = this;

    this.editor_place = document.getElementById("editor_place");
    this.cW = editor_place.clientWidth;
    this.cH = editor_place.clientHeight;

    load = new Loader;
    autoload = new AutoLoader;

    this.renderer = new THREE.WebGLRenderer({
        alpha: 1,
        precision: "lowp",
        devicePixelRatio: 1,
        antialias: true
    })
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.setClearColor(16777215, 0);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(this.cW, this.cH);

    this.scene = new THREE.Scene;

    this.camera = new THREE.PerspectiveCamera(45, this.cW / this.cH, 0.1, 2E4);
    this.camera.position.set(0, 150, 300);
    this.camera.lookAt(this.scene.position);
    this.scene.add(this.camera);

    //this.controls = new THREE.EditorControls(this.camera, this.renderer.domElement);

    var grid = new THREE.GridHelper(500, 10, 0xBDC3C7, 0x6C7A89);
    grid.position = new THREE.Vector3(0, 0, 0);
    grid.rotation = new THREE.Euler(0, Math.PI / 2, 0);
    this.scene.add(grid);

    light = new THREE.DirectionalLight;
    light.position.set(20, 50, 30);
    this.scene.add(light);
    light = new THREE.DirectionalLight;
    light.position.set(-25, 50, -15);
    this.scene.add(light);

    this.cubes = new THREE.Object3D
    this.scene.add(this.cubes);

    //this.control = new THREE.TransformControls(this.camera, this.renderer.domElement);
    //this.control.addEventListener("change", this.render);
    //this.control.setTranslationSnap(1);
    //this.scene.add(this.control);

    this.scene.jqContainer = $("#editor_place");

    this.animate = function () {
        requestAnimationFrame(that.animate);
        //that.control.update();
        that.renderer.render(that.scene, that.camera)
    }
}

window.onload = function () {
    editor = new __INIT();
    editor.animate();
};

И он не заработал:

Комментарии в коде неспроста, без них ошибка:
THREE.EditorControls(или TransformControls) is not a constructor
И, даже при выводе в консоль "THREE.WebGLRenderer 77", ничего не показывает

Все перерыл, не знаю куда копать :(

Список изменений:

Убрал this из кода (чтобы запускался)
Изменил блок с добавлением куба (добавил назначение геометрии и материала)
Добавил var где не было
Добавил круглые скобки после new Class, где не было
Добавил вставку canvas в DOM, в который рендерится сцена.

Классы THREE.EditorControls и THREE.TransformControls не являются частью библиотеки и подключаются отдельно. Вот ссылка на Github, где лежат нужные файлы (нужно проверить были ли в них изменения с r77, т.к. текущая версия r82).


var cW = window.innerWidth; // поменял значение
var cH = window.innerHeight; // поменял значение

var renderer = new THREE.WebGLRenderer({
  alpha: 1,
  precision: "lowp",
  devicePixelRatio: 1,
  antialias: true
});

renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setClearColor(16777215, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(cW, cH);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, cW / cH, 0.1, 2E4);
camera.position.set(0, 150, 300);
camera.lookAt(scene.position);
scene.add(camera);

var controls = new THREE.EditorControls(camera, renderer.domElement);

var grid = new THREE.GridHelper(500, 10, 0xBDC3C7, 0x6C7A89);
grid.position = new THREE.Vector3(0, 0, 0);
grid.rotation = new THREE.Euler(0, Math.PI / 2, 0);
scene.add(grid);

var light = new THREE.DirectionalLight();
light.position.set(20, 50, 30);
scene.add(light);
var light2 = new THREE.DirectionalLight();
light2.position.set(-25, 50, -15);
scene.add(light2);

// изменил блок с кубом
var cubesGeom = new THREE.BoxGeometry(50, 50, 50);
var cubesMaterial = new THREE.MeshBasicMaterial({
  color: 0x444444
});
var cubes = new THREE.Mesh(cubesGeom, cubesMaterial);
cubes.position.set(0, 0, 0);
scene.add(cubes);

var control = new THREE.TransformControls(camera, renderer.domElement);
control.addEventListener("change", renderer);
control.setTranslationSnap(1);
scene.add(control);

//scene.jqContainer = $("#editor_place");
document.body.appendChild(renderer.domElement); // добавил вставку canvas в DOM

animate = function() {
  requestAnimationFrame(animate);
  control.update();
  renderer.render(scene, camera);
}

animate();
body {
  margin: 0;
  width: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/EditorControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TransformControls.js"></script>




Какие именно js Вы подключаете? Есть подозрение, что Вы забыли подключить как раз-таки EditorControls.js и TransformControls.js. 
Можете посмотреть в каких файлах они объявляются здесь:
https://github.com/mrdoob/three.js/search?q=editorControls
https://github.com/mrdoob/three.js/search?q=transformControls

Да, я их просто подключил перед  js-ником, поэтому ничего и не работало
