Ответы пользователя по тегу three.js
  • 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());
    Ответ написан
    Комментировать
  • Почему нет света в 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
    Для этого нужно создать еще одну камеру которую мы не будем двигать:
    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 комментарий
  • Как 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));
    Ответ написан