上一节讲了摄像机, 这一节来讲一下场景,和渲染器.
场景
简单来说场景是一个大容器, 所有的物体都被包含在其中, 我们使用 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);