要创建一个场景，需要以下几个要素：
1、物体
首先得有一个物体。物体不仅包括几何体本身，还有材质和纹理。
比如有一个圆柱体，这个圆柱体是什么颜色？是木头的？石头的？还是塑料的？
2、光源
黑夜伸手不见五指，白天才能看得到东西。光源可以理解为太阳，有光才能看到物体。
3、相机
我们需要一台相机将场景拍摄下来，所以相机的摆放位置、角度等都很重要。
4、位置
物体和相机应该如何摆放呢？我们不妨先做个练习。
制作一个长宽高均为1米的立方体，放在正前方10米，然后让相机从世界坐标原点处来观察它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
//场景
var scene = new THREE.Scene();
//相机设置为世界坐标原点
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
scene.add(camera);//添加相机
var geometry = new THREE.BoxGeometry(1,1,1);//几何体
var material = new THREE.MeshBasicMaterial({color:0xffff00});//材质
var cube = new THREE.Mesh(geometry,material);//渲染管线
cube.position.set(0,0,10);//设置物体的位置,正前方10米
scene.add(cube);//添加物体
var renderer = new THREE.WebGLRenderer();//画布
renderer.render(scene, camera);//开始渲染
//将渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
</script>
运行这段代码发现，我们的场景漆黑一团，啥都没有。什么原因？是没有打光吗？
注意，基础材质的物体是不需要打光就可以看到的。
那是什么问题呢？
我把物体放在了正前方10米远，而相机却放在原点(0,0,0)，这时相机放眼能看到的，其实是z轴负方向的位置。因此，我们可以把物体放在(0,0,-10)的位置，或者相机放在大于10米远的位置，比如(0, 0, 20)，均可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
//场景
var scene = new THREE.Scene();
//相机设置为世界坐标原点
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// camera.position.set(0, 0, 20);
camera.position.set(0, 0, 0);
scene.add(camera);//添加相机
var geometry = new THREE.BoxGeometry(1,1,1);//几何体
var material = new THREE.MeshBasicMaterial({color:0xffff00});//材质
var cube = new THREE.Mesh(geometry,material);//渲染管线
cube.position.set(0,0,-10);//设置物体的位置,正前方10米
scene.add(cube);//添加物体
var renderer = new THREE.WebGLRenderer();//画布
renderer.render(scene, camera);//开始渲染
//将渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
</script>
1.png
