three加载360全景场景躺着坐着的人三维模型fbx说话动画效果代码

代码语言:html

所属分类:三维

代码描述:three加载360全景场景躺着坐着的人三维模型fbx说话动画效果代码

代码标签: three 360 全景 人物 模型 三维 动画 fbx

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
	margin: 0px;
	overflow: hidden;
}
#c {
  width: 100vw;
  height: 100vh;
  display: block;
}
</style>




</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.115.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inflate.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FBXLoader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script>



var container, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var xMixer, yMixer;

init();
animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(100, 200, 300);

    scene = new THREE.Scene();
    //scene.background = new THREE.Color(0xa0a0a0);
    //scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
  
    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);

    // ground
  var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 0.2;

    var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), planeMaterial); 
  
  var planeMaterial2 = new THREE.MeshPhongMaterial({
        color: 0x999999,
        depthWrite: false
    });
  
    mesh.rotation.x = -Math.PI / 2;
    mesh.receiveShadow = true;
    
    scene.add(mesh);

    var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
    grid.material.opacity = 0.2;
    grid.material.transparent = true;
    //scene.add(grid);
  
    
    // models
    var xLoader = new THREE.FBXLoader();
xLoader.load('//repo.bfw.wiki/bfwrepo/threemodel/Laying_Mild_Cough_cfow0f.fbx', function(xBot) {

        xMixer = new THREE.AnimationMixer(xBot);
        var xAction = xMixer.clipAction(xBot.animations[0]);
        xAction.play();
        xBot.traverse(function(child) {
            if (child.isMesh) {
                child.castShadow = true;
                child.receiveShadow = true;
            }
        });
        xBot.position.set(40,-60,-100); // x,y,z
        xBot.rotation.set(0,-.2,0); // x,y,z
        scene.add(xBot);
    });
  
    var yLoader = new THREE.FBXLoader();
yLoader.load('//repo.bfw.wiki/bfwrepo/threemodel/Sitting_Talking_1_obdtz4.fbx', function(yBot) {

        yMixer = new THREE.AnimationMixer(yBot);
        var yAction = yMixer.clipAction(yBot.animations[0]);
        yAction.play();
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0