Задать вопрос
  • ThreeJs движение объекта вокруг своей оси?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    я делал как то так к сожалению не помню всех тонкостей
    этот пример был сделан для реализации костей но методы которые в нем использовались возможно помогут.
    // получаем мировую матрицу родительского объекта
                var m = E.uid[obj.eparent].mWorld.clone();
    
    // делаем параллельный перенос
                m.multiply(new THREE.Matrix4().setPosition(obj.pos));
    // поворачиваем
                m.multiply(new THREE.Matrix4().makeRotationFromQuaternion(obj.ang));
    // устанавливаем опорную точку
                m.multiply(new THREE.Matrix4().setPosition(obj.basis));
    
    // сохраняем трансформированную матрицу объекта для потомка
                obj.mWorld = m.clone();
    // масштабируем
                m.scale(obj.escale);
    // сбрасываем
                obj.matrix.identity();
    // применяем трансформированную матрицу к объекту
                obj.applyMatrix(m.clone());
    Ответ написан
    Комментировать
  • JS как вставить элемент в середину типизированного массива?

    sozercanie_kosmosa
    @sozercanie_kosmosa Автор вопроса
    вопрос решен.
    normalArray = Array.apply( [], typedArray );
    Ответ написан
    1 комментарий
  • Какие существуют движки для 3D игр?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Three.js - это для браузера
    Ответ написан
    Комментировать
  • JS таймер для сайта с отсчетом с нуля?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Это более менее точный таймер.

    var sw = 0;
    var ms = new Date().getTime();
    var mslast = new Date().getTime();
    var mscnt = 0;
    var dt = new  Date(mscnt);
    
    timeLoop();
    function timeLoop(){
    												
    	if(sw){		
    		dt = new  Date(mscnt);
    
    		ms = new Date().getTime();
    		mscnt += (ms - mslast);
    		mslast = ms;
    		
    		console.log(getDateTimer() ); // для примера	
    	}
    		
    	setTimeout(timeLoop, 1000);
    }
    
    function getDateTimer(){ // получить текущее время с момента запуска
    	return dt.getUTCHours() + ':' + dt.getUTCMinutes()  + ':' + dt.getSeconds() ;
    }
    
    function playTimer( beginSec){ // запустить (параметр с какой секунды)
    	if(beginSec !== undefined)  mscnt =  beginSec*1000;
    	sw = 1;
    }
    
    function pauseTimer(){ // приостановить
    	sw = 0;
    }
    
    // запускаем таймер со 150 секунды (2:30) ------------------------------------------
    playTimer(150);
    Ответ написан
    Комментировать
  • Почему нет света в three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    очень распространенная ошибка - необходимо изменить параметры
    строки:
    pointlight.position.set( 10, 10, 10 );
    хотя бы на:
    pointlight.position.set( 100, 100, 100 );
    Ответ написан
    Комментировать
  • Где найти больше текстовой информации по three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    из исходников https://github.com/mrdoob/three.js
    можно расписать структуру, её особенности, ведь эта библиотека-абстракция над WebGL тем и хороша, что достаточна проста для освоения, а спектр задач которые она способна решить просто поражает, ведь создавая приложения по средствам three.js мы используем аппаратные своего компьютера, а это в свою очередь открывает большие вычислительные возможности(шейдерные программы)

    threejs.org
    threejs.org/docs
    threejs.org/examples
    stemkoski.github.io/Three.js
    Ответ написан
    2 комментария
  • Как убрать меридианы и параллели в сфере на three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    уважаемый Fraideron, я осознал вашу проблему, в полном объеме, и настоятельно рекомендую, ...sicMaterial({map:texture_earth, overdrav:tru... исправить на overdraw и будет все, как просили, исчезнет wireframe - эффект. Так же можно отказаться от CanvasRenderer в пользу WebGLRenderer
    Ответ написан
    3 комментария
  • Как убрать меридианы и параллели в сфере на three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    если вы имеете ввиду, что ребра этой сферы точат, как кости анорексички)), то, как вариант можно увеличить количество полигонов, как то так:
    new THREE.SphereGeometry( 200, 50, 50);
    Ответ написан
  • Как в Three.js отрисовать изображение по верх всего?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Для этого нужно создать еще одну камеру которую мы не будем двигать:
    otherCamera = new THREE.PerspectiveCamera( fov, width / height, near, far );
    её необходимо направить прямо на объект.
    Создаем еще одну сцену:
    var otherScene = new THREE.Scene();
    добавить на эту сцену объект, который должен быть всегда сверху:
    otherScene.add(objAlwaysOnTop);
    на объект можно натянуть текстуру с картинкой.
    Далее необходимо вставить в место, где происходит рендеринг это:
    enderer.clear();  // отчищаем все буферы
    renderer.render(mainScene, camera); // рендерим главную сцену
    renderer.clear(false, true, false); // отчищаем только буфер глубины
    renderer.render(otherScene, otherCamera);// рендерим статичную сцену
    Все!

    Есть еще способ который гораздо проще:
    var texture = new THREE.ImageUtils.loadTexture( 'images/pic.jpg' );
    	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    	texture.repeat.set( 0.5, 0.5 );
    	var spriteMaterial = new THREE.SpriteMaterial( {map: texture, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft } );
    	sprite = new THREE.Sprite( spriteMaterial );
    	sprite.scale.set(100,100,1.0);
    	sprite.position.set( 0, 0, -1 );
    	mainScene.add( sprite );


    от 30.08.2014 последний способ для последних версий Three.js к сожалению уже не актуален.
    Ответ написан
    Комментировать
  • Как сделать видимый конус света из прожектора (по типу того, которым вызывают Бетмена)?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    А что если конус использовать вместе с источником света таким образом ты получишь свет ведущий себя, как свет, только с эффектом прожектора, как в "Batman")).
    Также возможен вариант применения к конусу шейдерного эффекта "glow" который сделает поток света более интересным, к сожалению не что не спасет этоти способы от сквозного проникновения через стены, так как что кое что придется рассчитывать самому.
    Если данные реализации будут не по душе - нужно изучать шейдеры и рассчитывать все саму.

    Вот несколько ссылок которые могут в этом помочь:
    pixelshaders.com
    www.airtightinteractive.com/2013/02/intro-to-pixel...

    тут куча примеров:
    glsl.heroku.com

    так же есть хороший ресурс на котором можно спросить.

    PS вообще есть реализации не через конус а через 2, 3, ... и более плоских объекта скрещенных между собой, дело остается за малым реализовать "клипинг" луч-поверхность
    Ответ написан
    Комментировать
  • Как сделать видимый конус света из прожектора (по типу того, которым вызывают Бетмена)?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Elfrey,
    тут как раз используется то

    в этом примере по полной используются шейдеры, если я вас правильно понял,
    то в самом простом варианте будет достаточно нарисовать конус света выходящего из прожектора по средствам заранее созданного объекта типа конус с наложенным на него материалом желтого цвета с полупрозрачностью, без всяких шейдеров например так:

    geomLightCone = new THREE.CylinderGeometry( 0, 30, 100, 20, 4 );
    material = new THREE.MeshBasicMaterial( {
    				color: 0xFFFF00, 
    				opacity: 0.5, 
    				visible: true} );
    
    meshLight = new THREE.Mesh(geomLightCone, material);
    scene.add(meshLight);


    ...так же необходимо постоянно отслеживать положение луча в зависимости от положения прожектора.

    ps возможно я ошибаюсь, но отслеживать положение луча не обязательно, достаточно лишь в момент инициализации объектов на сцене поместить его в нужное место, а затем
    вместо:
    scene.add(meshLight);
    добавить к объекту "прожектор", объекта "луч света" так:
    projectorMesh.add(meshLight);
    Ответ написан
    1 комментарий
  • Работа с изображением за канвасом при помощи WebGL

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Если я не ошибаюсь, то это позволяет сделать скрин окна браузера.
    Ответ написан
    Комментировать
  • Как Zoom`ить объекты на сцене, а не Gizmo (как в 3DS Max) в Three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa Автор вопроса
    Помог с решением проблемы - @trushka

    решение от @trushka:
    делать таки с одной камерой и скалить Gizmo в зависимости от расстояния до неё. Ну вот, допустим
    var base=1000 - расстояние до камеры, при котором Gizmo не скалится
    Тогда при движении камеры если s - расстояние до точки просмотра:
    Gizmo.scale.x=Gizmo.scale.y=Gizmo.scale.z=s/base;

    var v1 = this.camera.position.clone();
        var v2 = Gizmo.position.clone();
        var len  = v1.sub(v2).length();
            
        var v = new THREE.Vector3(1,1,1);
        v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
        Gizmo.applyMatrix(obj.mLocal.clone().scale(v));


    .....
    спустя какое то время пришло понимание что этот код работает несколько не правильно
    так как при большом отдалении начинали высыпать баги фишки артефакты неизвестного характера, разбираться сними честно не хотелось. Собрав информацию с других ресурсов стало понятно, как решить данный вопрос.
    собственно код:
    var cameraPos = this.world.camera.position.clone();
    var gizmoPos = E.select.mLocal.getPosition().clone();
    cameraPos.sub( ( cameraPos.clone().sub( gizmoPos ) ).normalize().multiplyScalar( 1000 ) );


    немного прокомментирую, находим направление камеры на Gizmo
    так:
    ( cameraPos.clone().sub( gizmoPos ) ).normalize()
    увеличиваем результат в 1000 раз
    так:
    .multiplyScalar( 1000 ) // это кстати удаление Gizmo от камеры

    и вычитаем результат из позиции камеры.
    cameraPos.sub( ... );
    суть метода заключается в банальном удерживании камеры на равном расстоянии(1000) от камеры.

    У меня все, благодарю за помощь.
    Ответ написан
    Комментировать
  • Как Zoom`ить объекты на сцене, а не Gizmo (как в 3DS Max) в Three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa Автор вопроса
    @trushka, все вроде бы как хорошо
    выделяем объект, появляется Gizmo:
    0_d02b4_eccd5ac5_L
    делаю Zoom, все замечательно:
    0_d02b5_7a1b857_L
    но теперь при переносе точки просмотра возникают искажения:
    0_d02b6_f25a7649_L
    так же искажения возникают при Zoom'ировании из определенных положении камеры:
    0_d02bb_797fb9ae_L
    не получилось ((( может быть я что то не так сделал?

    делал так:

    var v1 = this.camera.position.clone();
    	var v2 = this.orbitControl.target.clone();
    	var len  = v1.sub(v2).length();
    		
    	var v = new THREE.Vector3(1,1,1);
    	v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
    	Gizmo.applyMatrix(obj.mLocal.clone().scale(v));
    Ответ написан
  • Что почитать на тему шейдеров в WebGL?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Ответ написан
    Комментировать
  • Что изучать? Си или JavaScript?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Смотря для чего, обычно выбор языка программирования обусловлен задачей.
    По мне так С++ интереснее, но JavaScript проще.
    Ответ написан