threejs 入门教程1

最近在看threejs开发指南，总结一下制作最基础的3d场景的8步：

1. 设置场景大小

2. 创建WebGl渲染器

3. 指定根节点元素

4. 初始化场景

5. 添加相机到场景

6. 创建物体到场景

7. 添加光源到场景

8. 渲染

 

下面给出代码：

1. 设置场景大小

var WIDTH = 400, HEIGHT = 300;

 

2. 创建WebGl渲染器

var renderer = new THREE.WebGLRenderer({

     antialias:true    //抗锯齿

});

renderer.setClearColor(0xFFFFFF, 1.0);//设置canvas背景色

renderer.setSize(WIDTH, HEIGHT); // 启动渲染器

 

3. 指定根节点元素

var $container = $('#container');

$container.append(renderer.domElement);

 

4. 初始化场景

var scene = new THREE.Scene();

 

5. 添加相机到场景

// 设置相机属性

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

var camera = new THREE.PerspectiveCamera(VIEW_ANGLE ,ASPECT ,NEAR ,FAR );

scene.add(camera);

camera.position.z = 300;

 

6. 创建物体到场景

// 设置球体参数

var radius = 50,segments = 16,rings = 16;

//球体材质 

var sphereMaterial = new THREE.MeshLambertMaterial({  color: 0xCC0000 }); 

// 创建球体 

var geometry = new THREE.SphereGeometry( radius, segments, rings);

var sphere = new THREE.Mesh(geometry , sphereMaterial);

scene.add(sphere);

 

7. 添加光源到场景

var light = new THREE.DirectionalLight(0xffffff, 1.0, 0);//设置平行光源

light.position.set( 200, 200, 200 );//设置光源向量

scene.add(light);// 追加光源到场景

 

8. 渲染

renderer.render(scene, camera);