添加依赖:
<script type="text/javascript" src="asset/js/three.js"></script>
<script type="text/javascript" src="asset/js/MTLLoader.js"></script>
<script type="text/javascript" src="asset/js/OBJLoader.js"></script>
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias: true, //开启抗锯齿
alpha: true //开启背景透明
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);//这个开启 HIDPI 可以考虑留着。
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
document.body.appendChild(renderer.domElement);
//init camera
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(0, 0, 10);
camera.lookAt(new THREE.Vector3(0,0,0));
// init scene
var scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff,0.6);
light.position.set(0,10,20);
light.castShadow = true; // 启用阴影选项
scene.add(light);
var ambilight = new THREE.AmbientLight(0xffffff,0.5); //环境光设置
scene.add(ambilight);
scene.add(camera);
//load obj
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/' );
mtlLoader.load( "aaa.mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/' );
objLoader.load( "aaa.obj", function ( object) {
object.traverse(function(child) {
if(child instanceof THREE.Mesh) {
var material = new THREE.MeshPhongMaterial({
color:0xdfdfdf
});
material.shininess = 20;
child.material = material;
}
});
scene.add( object );
object.position.set(0,1.1,0);
object.scale.set(0.16,0.16,0.16);
renderer.render( scene, camera );
}, onProgress, onError );
});
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };