Threejs创建几何体并贴材质

目录

一 创建球体

二 创建正方体

三 创建圆柱体

四 创建管道

更多内容见小白gis

threejs如何创建比如球体，正方体，圆柱体，并贴材质；

一 创建球体

纯色纹理和图片纹理的两种球体

 代码:

    var geometry0 = new THREE.SphereGeometry(50, 40, 40);
    var material0 = new THREE.MeshBasicMaterial( {color: 0x00ff00 } );
    var sphere0= new THREE.Mesh(geometry0, material0);
    scene.add(sphere0);


    var geometry = new THREE.SphereGeometry(50, 40, 40);
    var texture=new THREE.TextureLoader().load('./statics/imgs/earthMap.jpg');
    var material = new THREE.MeshBasicMaterial({map:texture,side:THREE.FrontSide});
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(200, 0, 0 );
    scene.add(sphere);

二 创建正方体

 代码:

    var geometry = new THREE.BoxGeometry( 30,30, 30 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
    var cube0 = new THREE.Mesh( geometry, material );
    scene.add(cube0);

    var geometry = new THREE.BoxGeometry( 30,30, 30 );
    let cubeMaterials=[
        new THREE.MeshBasicMaterial({color:'red',side:THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:'green',side:THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('./statics/imgs/floor.jpg'),side:THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0Xffffff,side:THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0Xffffff,side:THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0Xffffff,side:THREE.DoubleSide})
    ]

    var cube = new THREE.Mesh( geometry, cubeMaterials );
    cube.position.set(60, 0, 0 );
    scene.add(cube);

三 创建圆柱体

 代码

    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,side:THREE.DoubleSide} );
	let geometry0 = new THREE.CylinderBufferGeometry( 10, 10, 30, 30, 1 );
    let mesh = new THREE.Mesh( geometry0, material );
    mesh.position.x = 122;
    scene.add(mesh);

    let imgWidth=1024,height=683;
    let scale=1/100;
    var geometry = new THREE.CylinderGeometry(10, 10, 30, 30, 1, false )
    let cubeMaterials=[ 
    //side
    new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('./statics/imgs/well_wall.jpg'),side:THREE.FrontSide}),
    //top
    new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('./statics/imgs/well_cover.jpg'),side:THREE.DoubleSide}),
    //bottom
    new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('./statics/imgs/well_cover.jpg'),side:THREE.DoubleSide})
    ]
    var cylinder = new THREE.Mesh( geometry, cubeMaterials );
    cylinder.position.set(160, 0, 0 );
    scene.add(cylinder);

四 创建管道

    let arr=[
        new THREE.Vector3(100,20,10),
        new THREE.Vector3(120,20,30),
        new THREE.Vector3(150,20,40),
        new THREE.Vector3(190,20,60),
        new THREE.Vector3(210,20,0),
        new THREE.Vector3(320,20,0)
    ];
    var curve = new THREE.CatmullRomCurve3(arr);
    var geometry = new THREE.TubeGeometry(curve, 20,10, 20, false );
    var material =new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('./statics/imgs/gd.jpg'),side:THREE.DoubleSide})
    let mesh = new THREE.Mesh( geometry, material );
    scene.add(mesh);