THREEJS 笔记1 最基本的项目

一个threeJS基础项目里面有的东西上文已经介绍：
https://www.zybuluo.com/mdeditor
至少存在正确版本的threeJS文件，摄像机，场景，基础物体，循环渲染方法，灯光——

//html 一个基础容器
<div id="container"></div>
// 引入jquery，threejs库文件
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script src="js/three-indomo.js"></script>

// 引入控制器，可以通过键盘或者鼠标手指的点击拖动达到环视场景内容的效果，每个控制器需要引入不同的控制器文件，这个控制器的效果是设定一个点，拖拽场景会使镜头以这个点为中心环绕显示。
<script type="text/javascript" src="js/OrbitControls.js"></script>

// 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', ])

})