深入浅出 three.js (四)|吃代码的兔子窝

上一节讲了摄像机, 这一节来讲一下场景,和渲染器.

场景

简单来说场景是一个大容器, 所有的物体都被包含在其中, 我们使用 new Three.Scene() 来创建一个场景.

var scene = new THREE.Scene();

这样我们便得到了一个场景对象. 场景包含了一下几个常用的方法

属性/方法名	描述
scene.add(object)	往场景中添加对象或对象组
scene.remove(object)	场景中去除对象
scene.children	场景中包含的所有子对象
scene.getChildByName()	通过子对象的name属性来找出某一对象
scene.traverse(function)	遍历children function为回调类似 $.each(callBack)
scene.overrideMaterial	重置场景下所有对象的材质

渲染器

简单来说,渲染器决定画面最后将以一种什么形式展现在显示器上, 在web中,绘图方式有很多种, 比如 canvas2D API ,webgl, svg ,dom 等等. 但为了更好地使用gpu加速我们的绘图速度一般我们只选择 WebGLRenderer .

WebGLRenderer可以用参数实例化.

//声明全局变量  
var renderer;  
function init(){  
    //声明渲染器对象：WebGLRenderer  
    renderer=new THREE.WebGLRenderer({  
        canvas : myCanvas //如果想使用已有的canvas引用来渲染,则可配置此处
        antialias:true,       //反锯齿  
        precision:"highp",    //精度范围
        alpha:true,           //是否可以设置背景色透明  
        premultipliedAlpha:true,  //默认true ,canvas与canvas的背景或者整个页面的背景是否融合.
        stencil:false,  //是否支持模板缓冲
        preserveDrawingBuffer:true, //是否保存绘图缓冲  
        });  

    //渲染器的高宽
    renderer.setSize(width, height );  
    //将canvas元素到body元素中。  
    document.body.appendChild(renderer.domElement);  
    //设置canvas背景色和背景色透明度  
    renderer.setClearColor(0x000000,0.5);  
}

摄像机 + 场景 + 渲染器

结合上面一节的摄像机,我们将这3部分组合起来.完成一个完整的场景.

var camera, scene, renderer;

//创建透视摄像机,视角70度.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
//蒋健
scene = new THREE.Scene();
camera.lookAt(scene.position);

var sphereGeometry = new THREE.SphereGeometry(40, 60, 60);
var sphereMaterial = new THREE.MeshLambertMaterial({ "color": "#fff" });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.name = "sphere1"

scene.add(plane);
renderer.render(scene, camera);