Bird 애니메이션 사용자 정의

Question

웹 사이트를 만들려고합니다. 웹 사이트에 대한 링크는 다음과 같습니다

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

내 배경에있을 :

http://www.eclectika.org/test3

나는 다음과 같은 링크에서 조류합니다. 누군가 제게 길을 제안하십시오. 나는 많은 것을 시도했다. 아직도 그것을 기울이지 않는다.

또한 조류의 색상을 변경하는 방법을 제안하십시오.

Answer 1

학습 three.js는 도전적으로 도움이됩니다.

Renderer 함수는 새 DOM 요소를 만들고 그 위에 Scene을 그립니다.

목표를 달성하는 가장 쉬운 방법은이 Three.js DOM 요소보다 높은 ui에있는 다른 모든 요소의 z-index CSS 속성을 설정하는 것입니다.

이것이 현재 Stats Element (현재 FPS를 보여주는 것)이 webGL 요소 위에 어떻게 위치하는지입니다.

업데이트 1 : 그것은 하나를 발견하지 않는 경우

당신이 DOM 또는 찾을 수 WebGLRenderer의 threejs 구현 보면, 그것은 캔버스 요소를 만듭니다. 변경 소재 색상 :

이 같은 threejs의 색상을 초기화 할 수 있으므로 CSS에 당신은 당신의 원하는 결과

업데이트 2를 달성하기 위해 부정적이 요소의 z-index 속성을 설정할 수 있습니다.

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

또는

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

공식 문서

는 다음 방금 단지 render 함수에서 다음 코드 줄을 제거하여 재료의 색상 속성이 색상을 설정할 필요가 here

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

및 addin g 대신에이 줄을 써라. 그 재료로 색을 변경하는 것이 아주 쉽게 ... 에서 렌더링 함수를 그냥 ... 당신이 새의 임의의 색상을 볼 수 아래에 언급 된 줄을 제거

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 ... u .. 검은 색으로 새의 색상을 볼 수 있습니다. ..이 트릭을 할 것입니다

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

...