i have problem with three js loader all path is true and works in last day but now i cant run three js
console log return this error
options.manager.getHandler is not a function
var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;
var mixer, clock; // declare variables globally
var animations;
// var action;
var isMouseDown = false;
function execFA() {
//シーンを作成
scene = new THREE.Scene();
clock = new THREE.Clock(); // create clock
//カメラを作成
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 7;
//レンダラーを作成
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
//背景色を設定
renderer.setClearColor(0x00ffff, 1);
renderer.gammaOutput = true;
//光源を作成
var light = new THREE.DirectionalLight("#c1582d", 1);
var ambient = new THREE.AmbientLight("#85b2cd");
light.position.set(0, -70, 100).normalize();
scene.add(light);
scene.add(ambient);
var texture = new THREE.Texture();
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {};
var onProgress = function(xhr) {};
var onError = function(xhr) {};
// 3Dモデル用テクスチャ画像の読込
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'./models/carboard.gld',
// called when the resource is loaded
function(gltf) {
model = gltf;
mesh = gltf.scene;
mesh.scale.set(3, 3, 3);
animations = gltf.animations;
// gltf.scene.position.x = 0; //Position (x = right+ left-)
// gltf.scene.position.y = 0; //Position (y = up+, down-)
// gltf.scene.position.z = 0; //Position (z = front +, back-)
//scene.add( gltf.scene );
console.log(gltf.animations);
console.log(gltf.scenes);
var clip = THREE.AnimationClip.findByName(gltf.animations, "Intro");
mixer = new THREE.AnimationMixer(mesh);
console.log(clip);
// mixer.addEventListener('finished', function(e) {
// var c = THREE.AnimationClip.findByName(gltf.animations, "Static");
// mixer = new THREE.AnimationMixer(mesh);
// var action = mixer.clipAction(c);
// action.setLoop(THREE.LoopOnce);
// action.play();
// console.log(action);
// animate();
// render();
// });
var action = mixer.clipAction(clip);
action.clampWhenFinished = true;
action.enable = true;
// action.setLoop(THREE.LoopOnce);
action.play();
console.log(action);
scene.add(mesh);
animate();
render();
// action.play();
// action.play();
//gltf.animations; // Array<THREE.AnimationClip>
//gltf.scene; // THREE.Scene
//gltf.scenes; // Array<THREE.Scene>
//gltf.cameras; // Array<THREE.Camera>
//gltf.asset; // Object
},
// called when loading is in progresses
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// called when loading has errors
function(error) {
console.log('An error happened', error);
}
);
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("touchstart", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("touchend", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onMouseMove);
render();
}
function animate() {
// render();
requestAnimationFrame(animate);
}
function render() {
if (model) {
if (isMouseDown) {
mixer = new THREE.AnimationMixer(mesh);
var clip = THREE.AnimationClip.findByName(animations, 'Rotate');
var action = mixer.clipAction(clip);
action.setLoop(THREE.LoopOnce);
action.play();
}
requestAnimationFrame(render);
var delta = clock.getDelta();
mixer.update(delta); // update animation mixer
renderer.render(scene, camera);
// mesh.rotation.z += 0.01;
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
}
}
// マウスを押したとき
function onMouseDown(event) {
isMouseDown = true;
}
// マウスを動かした時
function onMouseMove(event) {
if (isMouseDown) {
// 3DモデルをX軸とY軸方向に回転させます
if (mesh) {
// mesh.rotation.y = getMouseX(event) / 50;
// mesh.rotation.x = getMouseY(event) / 50;
}
}
}
// マウスを離したとき
function onMouseUp(event) {
isMouseDown = false;
}
function getMouseX(event) {
if (event.type.indexOf("touch") == -1)
return event.clientX;
else
return event.touches[0].clientX;
}
function getMouseY(event) {
if (event.type.indexOf("touch") == -1)
return event.clientY;
else
return event.touches[0].clientY;
}
window.addEventListener('DOMContentLoaded', execFA());
