Three.js学习笔记(一)---------起步-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

Three.js学习笔记(一)---------起步
效果图：

利用three.js在浏览器上画一个球体。
首先明白用three.js建立3D模型必备的组成部分是：
	1）scene             	（场景）
	2）renderer		（渲染器）
	3）camera		（相机，投影用的，其中包括灯光）
	4）objects		（用户自己定义的尸体）

首先，得定义一些常量，包括场景的大小，以及相机的投影角度，方向，和投影前表面和后表面。
var WIDTH = 400,
      HEIGHT = 300;

    var VIEW_ANGLE = 45,
        ASPECT = WIDTH/HEIGHT,
        NEAR = 0.1,
        FAR = 10000;

之后，就可以定义场景，渲染器，和相机等
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
        var scene = new THREE.Scene();

对渲染器设置大小：
	renderer.setSize(WIDTH,HEIGHT);
相机的位置设置：
	camera.position.z = 300;

为了将生成出来的场景，嵌入到网页中，必须用jquery或者js取得元素：
	var $container = $('#container');
然后将场景导入：
	$container.append(renderer.domElement);

现在场景就设置完了，但是这个场景还没有任何的物体，最简单的，我们添加一个球体：
	var radius = 50,segments = 50,rings = 16;
	var sphere = new THREE.Mesh(
		new THREE.SphereGeometry(radius,segments,rings),sphereMaterial);

其中sphereMaterial我们没有定义，它可以是简单的颜色，也可以是图片导入的材质，这里我们简单的设置单一颜色：
	var sphereMaterial = new THREE.MeshLambertMaterial({color:0x00cc00});

之后就是将相机，球体添加到这个场景中：
	scene.add(sphere);
	scene.add(camera);。
这样在浏览器显示出来是全黑的，因为我们还没有打灯光
var pointLight = new THREE.PointLight(0xFFFFFF);
	pointLight.position.x = 100;
	pointLight.position.y = 100;
	pointLight.position.z = 150;

最后将灯光加入到场景中，scene.add(pointLight);
最后的最后，就是将它画出来了：
	renderer.render(scene,camera);
这样我们第一个用three.js做的很简单的例子就弄好了！

转载于:https://my.oschina.net/u/171154/blog/57652