|
加载模型需要本地服务器才行 外行。。没弄过 搞了好半天
如何使用nodejs快速搭建本地服务器 - 洪丽丹 - 博客园 https://www.cnblogs.com/hld88/p/7259780.html
cd进去项目目录再anywhere 我是先anywhere然后把东西都拿到这个路径下面，再运行。
下面是使用FBX骨骼动画的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>111</title>
<script type="text/javascript" src="libs/three.js"> </script>
<script type="text/javascript" src="loaders/FBXLoader.js"> </script>
<script src="libs/inflate.min.js"></script>
<script src="controls/OrbitControls.js"></script>
</head>
<body>
<script>
var scene= new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight,
0.1,1000);
camera.position.set(100, 200, 200);
camera.lookAt(new THREE.Vector3(0,80,0));
var renderer =new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.domElement.style.position = "relative";
document.body.appendChild( renderer.domElement );
var axes=new THREE.AxesHelper(20);
// scene.add(axes);
//light
scene.add(new THREE.AmbientLight(0x666666));
var p=new THREE.PlaneGeometry(220,220);
var pM=new THREE.MeshLambertMaterial({color:0xff00ff});
var plane=new THREE.Mesh(p,pM);
scene.add(plane);
plane.rotation.x-=0.7;
plane.position.z=-30;
plane.castShadow = true;
plane.receiveShadow=true;
var light=new THREE.SpotLight(0xffffff);
light.position.set(10,0,20);
light.castShadow=true;
light.target=plane;
//scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xff00ff);
directionalLight.position.set(0, 10, 150);
directionalLight.castShadow = true;
directionalLight.target = plane
directionalLight.shadow.camera.near = 2;
directionalLight.shadow.camera.far = 400;
directionalLight.shadow.camera.left = -200;
directionalLight.shadow.camera.right = 200;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -200;
scene.add(directionalLight);
//显示光照区域
var helper = new THREE.CameraHelper(directionalLight.shadow.camera );
//scene.add(helper);
// scene.fog=new THREE.Fog(0x34525f,0.01,200);
//scene.overideMaterial = new THREE.MeshLambertMaterial({}); all scene
//$("#out").append(renderer.domElement);
var meshHelper;
var clock = new THREE.Clock();
var mixer;
var loader=new THREE.FBXLoader();
loader.load('http://172.16.8.171:8000/asset/fbx/Samba Dancing.fbx',function(mesh)
{
console.log(mesh);
meshHelper=new THREE.SkeletonHelper(mesh);
// scene.add(meshHelper);
mesh.traverse(function(child){
if(child.isMesh){
child.castShadow=true;
child.receiveShadow=true;
console.log("isMesh");
}
});
//可以控制动画的AnimationAction对象
mixer=mesh.mixer=new THREE.AnimationMixer(mesh);
var action=mixer.clipAction(mesh.animations[0]);
// action.setDuration(10);
action.play();
scene.add(mesh);
//
});
var render=function(){
requestAnimationFrame(render);
renderer.render(scene,camera);
var time = clock.getDelta();
if (mixer) {
mixer.update(time);
}
//THREE.AnimationHandler.update(delta);
}
render();
</script>
</body>
</html> | 
转播
