three.js 实现物体贴图

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

物体贴图

实现以上效果，主要代码：

var Orcamera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2,  0.1, 1000 ); //正交
var Orscene =  new THREE.Scene();

var geometry = new THREE.BoxBufferGeometry( 80, 80,80 );
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
    x.width = x.height = 128;
    xc.fillStyle = "#eee";
    xc.fillRect( 0, 0, 128, 128 );
    xc.fillStyle = "#999";
    xc.fillRect( 0, 0, 64, 64 );
    xc.fillStyle = "#aaa";
    xc.fillRect( 32, 32, 32, 32 );
    xc.fillStyle = "#999";
    xc.fillRect( 64, 64, 64, 64 );
    xc.fillStyle = "#bbb";
    xc.fillRect( 96, 96, 32, 32 ); 

var maps = new THREE.Texture(x)             
    maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
    maps.repeat.set( 4, 4);
    maps.needsUpdate = true
           
var material = new THREE.MeshBasicMaterial( { map: maps,transparent:true,opactiy:0, needUpdate:true,fog:false, } );
    mesh = new THREE.Mesh( geometry, material );
    mesh.rotation.x = 0.5;
    mesh.rotation.y  = 1;
    mesh.position.x = 10;
    mesh.position.y = 100;
    mesh.position.z = -100;
Orscene.add( mesh );