Настройка анимации птиц

Question

Я пытаюсь создать сайт. Ссылка на сайт:

http://www.eclectika.org/test3

Я хочу птиц по следующей ссылке:

http://mrdoob.github.io/three.js/examples/canvas_geometry_birds.html

быть в моем фоне. Пожалуйста, кто-нибудь предложит мне путь. Я перепробовал много вещей. Все еще не могу понять это правильно.

Также, пожалуйста, предложите способ изменить цвет птиц.

Answer 1

Изучение Three.js демонстративно помогает.

Renderer Функция просто создает новый элемент DOM и рисует Scene в теме.

Таким образом, самый простой способ достичь своей цели - это установить z-index Свойство css любого другого элемента пользовательского интерфейса выше, чем этот DOM-элемент Three.js.

Это на самом деле, как Stats Element (тот, который показывает текущий FPS) помещается поверх элемента webGL.

Обновление 1:

Если вы посмотрите на DOM или на реализацию trijs WebGLRenderer, то обнаружите, что он создает элемент canvas, если не находит его. так что в вашем CSS вы можете установить свойство z-index этого элемента как отрицательное для достижения желаемого результата

Обновление 2: изменение цвета материала:

Вы можете инициализировать цвет в тройках как это.

var desiredColor= new THREE.Color( 0xff0000 );

или же

var desiredColor= new THREE.Color("rgb(255,0,0)");

официальная документация здесь

тогда вам просто нужно установить этот цвет в свойстве color материала, просто удалив следующие строки кода из render функция

color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

и добавив эти строки вместо.

bird.material.color= desiredColor; // in this case it will change all bird's color to red

Answer 2

Его довольно легко изменить цвета на материал... В функции визуализации просто удалите нижеупомянутую строку... вы можете просматривать случайные цвета птиц..

color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

Приведенная ниже строковая кодировка делает материал случайной окраской... {color:Math.random() *0xffffff} дает случайный цвет для всех птиц... просто измените его на цвет:0x000000... вы можете просмотреть цвет птицы в черном цвете....

bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:Math.random() * 0xffffff, side: THREE.DoubleSide } ) );

это сделает свое дело...