Three JS 常用方法.

1. OBJ 文件转换为Three的 JS 文件:

python convert_obj_three.py -i aaa.obj -o aaa.js

python convert_obj_three.py -i OBJ文件 -o 转换后的JS文件

2. 给灯光添加显示位置的线条

scene.add( new THREE.PointLightHelper( pointlight3 ) );

3. 设置模型旋转(Rotation)

    obj.rotation.x = -10; obj.rotation.y = 10; obj.rotation.z = -10;

4. 设置模型位置(Position)

    obj.position.x = -10; obj.position.y = 10; obj.position.z = -10;

5. 下载进度和下载出错方法:

var onProgress = function ( xhr ) {
	if ( xhr.lengthComputable ) {
		var percentComplete = xhr.loaded / xhr.total * 100;
		console.log( Math.round(percentComplete, 2) + '% 已下载' );
	}
};
var onError = function ( xhr ) {
	console.log( "下载出错" );
};

6. 添加平行光:

var light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源位置
scene.add(light);

7.执行关键帧动画:

var loader = new THREE.ObjectLoader();  
loader.load( modelPath, function( model ) {  
    scene.add( model );  
    mixer = new THREE.AnimationMixer( model );  
    mixer.clipAction( model.animations[ 0 ] ).play();  
}, onProgress, onError ); 

8. 循环便利场景中所有的模型:

scene.traverse( function( object ) {
	if ( object.isMesh === true ) {
		object.rotation.x += 0.01;
	}
});

9. 开始抗锯齿:

renderer = new THREE.WebGLRenderer({
	antialias : true	//开启抗锯齿.
});

10. 场景设置背景颜色

scene.background = new THREE.Color( 0xaaccff );

11. 场景添加 雾 效果

scene.fog = new THREE.FogExp2( 0xaaccff, 0.007 );

12. 添加辅助线

var helper = new THREE.GridHelper( 160, 10 );
helper.rotation.x = Math.PI / 2;
scene.add( helper );

1.3 角度,弧度 互转

var angle = 30; //声明角度
var radian = THREE.Math.degToRad( angle );    //角度转弧度.
angle = THREE.Math.radToDeg( radian );    //弧度转角度.

1.4 Sprite 始终显示不受模型遮挡

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( '../ui/label/xxx.png' );
var spriteMaterial = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false });
var mesh = new THREE.Sprite( spriteMaterial );
mesh.center.x = 0.5;
mesh.center.y = 0;
mesh.scale.set(1, 1, 1);
//此属性让 Sprite 不受遮挡展示.
spriteMaterial.depthTest = false;

scene.add(mesh);

1.5 创建球体

//参数 1. 半径, 2.组成的面数 3.组成的面数
var sphereGeometry = new THREE.SphereGeometry(6, 25, 25);    
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);

1.6 本地保存截图

renderer = new THREE.WebGLRenderer( { 
    antialias: true,     //开启抗锯齿
    preserveDrawingBuffer: true     //开启后才能实现截图, 不然截出的图为全黑色
} );

function saveAsImage() {
        try {
            var timestamp = new Date().getTime();
            var imgData = renderer.domElement.toDataURL("image/jpeg");
            saveFile(imgData.replace("image/jpeg", "image/octet-stream"), timestamp + ".jpg");
        } catch (e) {
            console.log(e);
            return;
        }
    }

    function saveFile(strData, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link);
            link.download = filename;
            link.href = strData;
            link.click();
            document.body.removeChild(link);
        } else {
            location.replace(uri);
        }
    }

1.7 创建一块地面

var floorGeometry = new THREE.PlaneGeometry(12000, 12000);
floorGeometry.rotateX( - Math.PI / 2 );

var floorTexture = new THREE.TextureLoader().load("/obj/ground_floor.jpg");
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 300, 300 );

var floorMaterial = new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    map: floorTexture
});

var floor = new THREE.Mesh( floorGeometry, floorMaterial );
floor.receiveShadow = true;    //开启接受阴影
floor.castShadow = true;        //开启投射阴影. 地面其实可以不用开这个.
scene.add( floor );

1.8 场景中显示文字

var mesh = createText("hello world", 60, new THREE.Vector3(50, 50, 50));
mesh.position.x = 10;
mesh.position.y = 10;
mesh.position.z = 10;
scene.add(mesh);

function createText(text, size, scale) {
	var canvas = document.createElement("canvas");
	canvas.width = 1024;
	canvas.height = 512;
	var ctx = canvas.getContext("2d");
	ctx.font = 'bold ' + size + 'px Arial';
	ctx.fillStyle = "white";
	var text_length = ctx.measureText(text).width;
	ctx.fillText(text, (canvas.width - text_length) / 2, (canvas.height + 60) / 2);
	var texture = new THREE.Texture(canvas);
	texture.needsUpdate = true; //注意这句不能少
	var material = new THREE.SpriteMaterial({ map:texture });
	var mesh = new THREE.Sprite(material);
	mesh.scale.set(scale.x, scale.y, scale.z);
	return mesh;
}

1.9场景中显示 Label

var texture = new THREE.TextureLoader().load("/obj/label.png");
var spriteMaterial = new THREE.SpriteMaterial({
	map: texture,
	useScreenCoordinates: false
});
var labelMesh = new THREE.Sprite( spriteMaterial );

labelMesh.center.x = 0.5;	//设置以底部为中心
labelMesh.center.y = 0;		//设置以底部为中心
labelMesh.scale.set(14, 30, 1);	//设置缩放比例.
labelMesh.position.set(10, 10, 10);
scene.add(labelMesh);