02.ThreeJs开发指南-第二章-场景

第二章

创建中的基本组件:
1.相机
2.光源
3.物体

创建渲染的时候,相机会自动加载到场景中。当然啦,你也可以手动添加。

相机,光源等,只要添加到场景中都算是物体。
scene.add(obj);
scene.children 数组,元素是obj
obj instanceof THREE.MESH 当然还有光源和相机
Scene.getChildByName(name)
scene.remove(obj);

物体的属性:
name 唯一标识物体

遍历场景中的物体:

scene.traverse(function(e){
    if(e instanceof THREE.MESH && e!=plane){
        ...
    }
});

雾:

//颜色  near  far
scene.fog = new THREE.Fog(0xffffff,0.015,100);

//颜色   雾的浓度
scene.fog = new THREE.FogExp2(0xffffff, 0.015);

材质覆盖:

scene.overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff});

添加到场景中的物体都会使用当前的材质。

几何对象

手动创建几何对象:

var vertices = [
    new THREE.Vector3(1,3,1),
    new THREE.Vector3(1,3,-1),
    new THREE.Vector3(1,-1,1),
    new THREE.Vector3(1,-1,-1)
    ...
];

var faces = [
    new THREE.Face3(0,2,1),
    new THREE.Face3(2,3,1),
    new THREE.Face3(4,6,5),
    new THREE.Face3(6,7,5)
    ...
];

var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeCentroids;
geom.mergeVertices();

出于性能的考虑,Three.js库假设一个网格的几何体在其声明周期内不会改变。但是,如果我们希望实时修改场景中渲染的物体,我们需要在renderer循环中额外设置:

mesh.geometry.vertices = vertices;
mesh.geometry.verticesNeedUpdate = true;//告知Three.js顶点需要更新
mesh.geometry.computeFaceNormals();//重新计算侧面的法线

使用多重材质:

var materials = [

    new THREE.MeshLMaterial({opacity:0.6,color:0x44ff44,transparent:true}),

    new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})
];

var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom,materials);

这行代码,不是场景一个mesh对象,而是创建了包含两个mesh对象(一个使用了MeshLambertMaterial材质,一个使用了MeshBasicMaterial材质)的组。这个组的使用方法,和mesh的使用方法类似。

mesh.children.forEach(function(e){
    e.castShaow  = true;
});

clone函数:

this.clone = function(){

    var cloned = mesh.children[0].geometry.clone();

    var materials = [

        new THREE.MeshLMaterial({opacity:0.6,color:0x44ff44,transparent:true}),

        new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})
    ];

    var mesh2 = THREE.SceneUtils.createMultiMaterialObject(cloned,materials);

    mesh2.children.forEach(function(e){e.castShaow = true;});

    mesh.translateX(5);
    mesh.translateZ(5);

    mesh2.name = "clone";
    //移除之前的name叫 clone 的 物体。
    scene.remove(scene.getChildByName('clone'));

    scene.add(mesh2);

}

Mesh对象属性和函数:

一个Mesh对象的位置和是相对于其父对象来讲的。

定位:

cube.position.x =10;
cube.position.y =10;
cube.position.z =10;

cube.position.set(10,10,10);

cube.position = new THREE.Vector3(10,10,10);

旋转:

cube.rotation.x = 0.5*Math.PI;

cube.rotation.set(0.5*Math.PI,0,0);

cube.rotation = new THREE.Vector3(0.5*Math.PI,0,0);

平移:

cube.translateX(10);//相对当前位置沿x轴平移10个单位长度

相机:

PerspectiveCamera(fov,aspect,near,far);
OrthographicCamera(left,right,top,bottom,near,far);


camera.lookAt(new THREE.Vector3(x,y,z));

camera.lookAt(scene.position);
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页