Здраствуйте, мне нужно сразу запустить три функции.
JSONLoader - загрузка объекта
OrbitControls - поворот камеры
AnimationAction - запуск анимации.
Проблема заключается в том что библиотеки все разные и найти перечисленные выше функции в одной библиотеке сложно. Если получается загрузить объект и запустить анимацию, то там отсутствует OrbitControls. Мне все же удалось загрузить объект и сделать поворот камеры но при запуске нет анимации, однако при другой библиотеке отсутствует возможность поворачивать камеру (OrbitControls), но зато можно делать анимацию. Вот такая вот проблемка. Какую библиотеку использовать, чтобы была возможность и файл загрузить (JSONLoader) и повернуть камеру (OrbitControls) и запустить анимацию (AnimationAction)? Вот мои исходники:
Ошибка соответствующая в консоли: Uncaught TypeError: THREE.AnimationAction is not a constructor
<!DOCTYPE html> <!--"-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Skelet Animation</title>
<style>
body {
margin: 0;
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
</style>
</head>
<body translate="no" >
<div id="webGL-container"></div>
//https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src="threejs/resources/threejs/r98/three.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="threejs/resources/threejs/r98/js/controls/OrbitControls.js"></script>
<canvas></canvas>
<script id="rendered-js" >
$(function () {
//document.getElementById('move').checked = false;
//Последнии четыре цифры в json отвечают за поворот объекта вверх
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.querySelector('canvas'),
});
renderer.setClearColor(new THREE.Color(0xCCCCCC));
renderer.setSize(window.innerHTML, window.innerHeight);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(7, 35, 15);
camera.lookAt(new THREE.Vector3(18,0,0));
const orbit = new THREE.OrbitControls(camera, renderer.domElement);
var ambientLight,grid, mesh, action = {}, mixer, fadeAction;
var bool1 = false;
var directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position.set(-2,10,15);
directionalLight.lookAt(new THREE.Vector3(10,0,0));
scene.add(directionalLight);
const loader = new THREE.JSONLoader();
var finger;
var material;
loader.load("./models/Marine.json", (geometry) =>
{
material = new THREE.MeshLambertMaterial ({
color: 0xFE9A2E,
wireframe: false,
skinning: true
});
mesh = new THREE.SkinnedMesh(geometry, material);
scene.add(mesh);
//*****************
//Анимация
//*****************
action.run = new THREE.AnimationAction( geometry.animations[ 0 ] );
action.run.weight = 1;
mixer = new THREE.AnimationMixer( mesh );
mixer.addAction( action.run );
//*****************
//Конец анимации
//*****************
redraw();
});
function showWireframe( visibility ) {
material.wireframe = visibility;
}
var redraw = function() {
requestAnimationFrame(function(){
renderer.render(scene,camera)
})
};
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
}
renderer.render(scene, camera);
requestAnimationFrame(render);
};
requestAnimationFrame(render);
});
</script>
</body>
</html>
Я использовала библиотеку three.min.js r98, даже папки создала, чтобы путь был такой же как на официальном сайте.
Также прикрепляю исходный файл с кодами.
https://disk.yandex.ru/d/F5tFUGc0VrQ61w
P.S. Если все же удастся запустить анимацию, попрошу сильно не смеятся. Модель получилась в ходе конвертации из Блендер, соотвественно про Блендер я буду искать информацию в другом месте.
При перемещении Джилл Валентайн, больше похоже на монстра, с которыми она обычно сражается в Обителе Зла.