Wrote code that creates a simple scene:

__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(); };

And he did not earn:

  1. Comments in the code for good reason, without them the error: THREE.EditorControls (or TransformControls) is not a constructor
  2. And, even when outputting “THREE.WebGLRenderer 77” to the console, it shows nothing

I rummaged everything, I do not know where to dig: (

    2 answers 2

    List of changes:

    • Removed this from code (to run)
    • Changed the block with the addition of a cube (added the appointment of geometry and material)
    • Added var where there was not
    • Added parentheses after new Class , where there wasn’t
    • Added a canvas insert to the DOM in which the scene is rendered.

    The THREE.EditorControls and THREE.TransformControls classes are not part of the library and are connected separately. Here is a link to Github , where the necessary files are located (you need to check if there were any changes in them with r77, since the current version is 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>

      What kind of js do you connect? There is a suspicion that you forgot to connect EditorControls.js and TransformControls.js .

      You can see in which files they are declared here: https://github.com/mrdoob/three.js/search?q=editorControls https://github.com/mrdoob/three.js/search?q=transformControls

      • Yes, I just connected them before js-nick, so nothing worked - nk2