0

Написал код, который создает простую сцену:

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

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

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

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

2 ответа 2

2

Какие именно js Вы подключаете? Есть подозрение, что Вы забыли подключить как раз-таки EditorControls.js и TransformControls.js.

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

1
  • Да, я их просто подключил перед js-ником, поэтому ничего и не работало
    – nk2
    31 окт 2016 в 18:11
1

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

  • Убрал 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.