ThreeJS 02 의 가장 쉬 운 데모 배우 기

1441 단어
가장 간단 한 데모 만 들 기
  • 빈 페이지 만 들 기
  • body 뒤에 엔진 인터페이스 추가
  • 
    
  • 웹 페이지 에 있 거나 js 를 새로 만들어 모듈 개발 에 사용 합 니 다. 여기 서 저 는 확장 js 방식 으로 개발 확장 개발 의 장점 을 사 용 했 습 니 다.
  • 유연 하 게 확장 가능
  • 압축 이 편리 하 다
  • 현재 웹 페이지 자체 에 국한 되 지 않 음
  • 
    
  • major. js 중 코드
  • 
    
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight, false );
    document.body.appendChild( renderer.domElement );
    
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    
    camera.position.z = 5;
    
    function animate() {
        requestAnimationFrame( animate );
        cube.geometry.rotateX(.01);
        cube.geometry.rotateZ(.02);
        cube.geometry.rotateY(-.015);
        renderer.render( scene, camera );
    }
    animate();
    

    위의 몇 마디 는 웹 페이지 에서 회전 하 는 사각형 animate 업데이트 방식 을 볼 수 있 습 니 다. 이것 은 타이머 가 제어 하 는 것 이 아니 라 요청 엔진 을 통 해 다시 순환 할 수 있 는 지, 배경 에서 전환 할 때 최적화 할 수 있 는 것 같 습 니 다.
    여기에 request Animation Frame 에 대한 상세 한 설명 이 있 습 니 다.https://www.jianshu.com/p/98e32000b0c9

    좋은 웹페이지 즐겨찾기