使用Three.js加载dae动画模型 T台走秀

模拟一名女性在T台走秀的动作。

three, blender, female

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3338
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* 模型约有4M大小，所以要加载一会儿 */
if (!Detector.webgl) Detector.addGetWebGLMessage();

var container, stats;

var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae;

var clock = new THREE.Clock();
var mixer;

// Collada model

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('/uploads/160701/walk/walk.dae', function(collada) {

dae = collada.scene;

dae.traverse(function(child) {

if (child instanceof THREE.SkinnedMesh) {

var animation = new THREE.Animation(child, child.geometry.animation);
            animation.play();

}

});

dae.scale.x = dae.scale.y = dae.scale.z = 0.2;
    dae.position.x = -1;
    dae.updateMatrix();

init();
    animate();

});

function init() {

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

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(2, 4, 5);

scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.035);
    mixer = new THREE.AnimationMixer(scene);

// Add the COLLADA

scene.add(dae);

// Lights

scene.add(new THREE.AmbientLight(0xcccccc));

pointLight = new THREE.PointLight(0xff4400, 5, 30);
    pointLight.position.set(5, 0, 0);
    scene.add(pointLight);

// Renderer

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

// Stats

stats = new Stats();
    container.appendChild(stats.dom);

// Events

window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {

renderer.setSize(window.innerWidth, window.innerHeight);

camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

}

function animate() {

requestAnimationFrame(animate);

var delta = clock.getDelta();

// animate Collada model

THREE.AnimationHandler.update(delta);

mixer.update(delta);

render();
    stats.update();

}

function render() {

var timer = Date.now() * 0.0005;

camera.position.x = Math.cos(timer) * 10;
    camera.position.y = 4;
    camera.position.z = Math.sin(timer) * 10;

camera.lookAt(scene.position);

renderer.render(scene, camera);

}

编译

CSS

HTML

模拟一名女性在T台走秀的动作。

three, blender, female

编辑器支持Emmet

快捷键

模拟一名女性在T台走秀的动作。

three, blender, female

使用Three.js加载dae动画模型 奔跑的女人

Three.js 鼠标点击选中加载的Collada模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用Three.js加载dae动画模型奔跑的女人