版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyh930929/article/details/81635064
下面是一个通过threejs加载一个obj模型的例子。后面将介绍每个变量都是什么意思。
<body>
<div id="info">
</div>
<script src="../build/three.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script>
var container;//盛放画布的容器
var camera, scene, renderer; //相机，场景，渲染器
init();//将上面声明的变量进行初始化
render();//调用渲染模型
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 250;
//场景
scene = new THREE.Scene();
//环境光
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
//点光源
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//加载贴图
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );
//加载obj模型
var loader = new THREE.OBJLoader();
loader.load( 'models/obj/male02/male02.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = - 95;
scene.add( object );
});
//初始化渲染器
renderer = new THREE.WebGLRenderer();
//设置像素值
renderer.setPixelRatio( window.devicePixelRatio );
//设置渲染范围为屏幕的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将画布放入dom的div中
container.appendChild( renderer.domElement );
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
</script>
</body>渲染效果：
