threejs 第三天加载一个静态模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="threejsBuild/build/three.js"></script>
<script src="threejsBuild/examples/js/controls/OrbitControls.js"></script>
<script src="threejsBuild/examples/js/libs/inflate.min.js"></script>
<script src="threejsBuild/examples/js/WebGL.js"></script>
<script src="threejsBuild/examples/js/libs/stats.min.js"></script>
<script src="threejsBuild/examples/js/loaders/FBXLoader.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 100, 200, 300 );
var controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 100, 0 );
controls.update();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = - 100;
light.shadow.camera.left = - 120;
light.shadow.camera.right = 120;
scene.add( light );
var loader = new THREE.FBXLoader();
loader.load( 'threejsBuild/examples/models/fbx/Samba Dancing.fbx', function ( object ) {
mixer = new THREE.AnimationMixer(object);
var action = mixer.clipAction(object.animations[0]);
action.play();
object.traverse(function (child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
scene.add( object );
} );
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
结果