THREEJSノート1最も基本的な項目

3998 ワード
threeJSの基礎プロジェクトには、上記のようなものがあります.https://www.zybuluo.com/mdeditor少なくとも正しいバージョンのthreeJSファイル、カメラ、シーン、ベースオブジェクト、ループレンダリング方法、ライトが存在します.
//html       

//   jquery，threejs   



//      ，                            ，                 ，              ，                   。


// css
body,
html {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
}

#container {
    border: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

// js
//    ，threejs         ，      requestAnimateFrame      
var renderer;

//    ，        ，                ，                  。             。
var camera;

//       ，                    。
var scene;

//   ，              ，      ，               。
var light;

//    ，             。
var controls;

//    three  
function initThree() {

    width = document.getElementById("container").clientWidth;
    height = document.getElementById("container").clientHeight;
    
    //      ，    WebGLRenderer      canvasRenderer  
    renderer = new THREE.WebGLRenderer({
    //      ：antialias
        antialias: true
    });
    
    //       
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    console.log(window.innerWidth, window.innerHeight)
    
    //       ，           ，         ，                 
    //renderer.shadowMapEnabled = false;
    //  renderer.setSize(width, height);
    document.getElementById('container').appendChild(renderer.domElement);
    
    //       
    renderer.setClearColor(0xFFFFFF, 1.0);
}

//       
function initCamera() {
    //            
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    
    //         
    camera.position.set(50, 50, 50);

    //      ，           ，             
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;
    //controls.minDistance = 50;
    controls.maxDistance = 100

    controls.minPolarAngle = Math.PI / 12;
    controls.maxPolarAngle = Math.PI / 2.5;
    //     
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5

    //controls.maxPolarAngle = Math.PI;
    
    //      ，   
    clock = new THREE.Clock();
}

//      
function initScene() {
    scene = new THREE.Scene();
    
    //          ，                
    scene.fog = new THREE.Fog(0xffffff, 200, 1300);
}

//     
var sun1;

function initLight() {
//      
    sun1 = new THREE.DirectionalLight(0xffffff);
    sun1.position.set(-1000, 500, -1000);
    
    //       2，             
    //sun1.castShadow = true;
    
    //       
    scene.add(sun1);

    sun2 = new THREE.DirectionalLight(0xffffff);
    sun2.position.set(1000, 500, 1000);
    //sun2.castShadow = true;
    scene.add(sun2);

}

function preload() {
    //    renderer
    initThree();
    
    //       （       ）
    initCamera();
    
    //      
    initScene();
    
    //      
    initLight();

}

function render() {
    
    //       
    var delta = clock.getDelta();
    controls.update(delta); //    
    
    // renderer    
    renderer.render(scene, camera);
    
    // renderer                 
    requestAnimationFrame(render);
}

$(document).ready(function() {
    //    three  
    preload();
    
    //   render，    
    render();
    
    //   render         ，       renderer
    renderer.render(scene, camera);
    
    //        ，   scene          
    scene.background = new THREE.CubeTextureLoader()
        .setPath("assets/img/skybox/")
        .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg', ])

})