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);