用three.js实现3D模型的展示（2）

    在这个展示平台上，除了上次说的比要的场景、摄影机、渲染器与模型外，我还加了这么几个为了美观的东西：光（一个环境光与几个点光源，此外，要注意光只有在模型的材料是对光有反应的材料时光才有意义）、一个衬托模型的灰色平面以及附着在平面上做参考的网格。代码如下：

var ambiColor = "#0c0c0c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(30 ,30 ,30);
spotLight.castShadow = true;
scene.add(spotLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-30, -30, -30);
spotLight.castShadow = true;
scene.add(spotLight);

planceGeometry = new THREE.PlaneGeometry(200, 200);
var planeMaterial = new THREE.MeshLambertMaterial({ color: "#CCC" });
var plane = new THREE.Mesh(planceGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5*Math.PI;
plane.position.y = -10;
plane.position.z = 0;
scene.add(plane);

var size = 200;
var step = 10;
gridHelper = new THREE.GridHelper( size, step );
gridHelper.position.y=-10;
scene.add( gridHelper );

    到现在，基本的内容已经具备了。我在此说明一下我到现在为止展示出的代码之间的关系。（先抛除模型只说整个环境）

    首先，我在html里面引入了另一个自己命名为“function.js”的js文件用于存放我写的函数。然后在html的script中将要用到的变量声明一下(在这里声明的原因是让人能更直观地理解整个程序的结构)，然后运行了两个函数，init（）跟 animate（）。这是很重要的两个函数，一个负责初始化整个场景等，另一个负责时时让渲染器刷新场景（要理解，我们所有肉眼看到的图像都是经过渲染器渲染出来的，举例，three.js官网上那个最初的让立方体旋转，如果仅仅渲染一次，那么即使不断循环cube.rotation.x += 0.1这种语句，我们也只会看到一个静止的立方体，因为在这种情况下，通俗地说，计算机认为它是旋转的，但是不通过再次渲染这一刷新过程，使用者是无法得知第一次渲染后立方体的新位置的。）

    下面是有着最基础功能的animate（）的代码。（第一行相当是是在告诉编译器这是一个需要时时不断执行的函数）

function animate()
{
	requestAnimationFrame( animate );
	renderer.render(scene, camera);
}

    这是我的index.html中的scripts：

<script>
var scene,camera,renderer;
var plane,gridHelper;
init();
animate();
</script>

    然后之前提到的初始化就要在init（）执行了：

function init()
{
scene = new THREE.Scene();
    
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(15,15,15);

renderer = new THREE.WebGLRenderer();
renderer.setSize(1000,500);
renderer.shadowMapEnabled = true;
document.getElementById("scene").append(renderer.domElement);

var ambiColor = "#0c0c0c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(30 ,30 ,30);
spotLight.castShadow = true;
scene.add(spotLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-30, -30, -30);
spotLight.castShadow = true;
scene.add(spotLight);

planceGeometry = new THREE.PlaneGeometry(200, 200);
var planeMaterial = new THREE.MeshLambertMaterial({ color: "#CCC" });
var plane = new THREE.Mesh(planceGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5*Math.PI;
plane.position.y = -10;
plane.position.z = 0;
scene.add(plane);

var size = 200;
var step = 10;
gridHelper = new THREE.GridHelper( size, step );
gridHelper.position.y=-10;
scene.add( gridHelper );
}

    到此，我们的展示平台的大体雏形就已经具备了。接下来我们只要在此基础上写写对于模型的载入以及使用插件实现对模型摄像机的简单操作（比如说，按住左键拖动鼠标可以调整摄像机观察模型的角度）等等一些细节就好。