Three.js Плавное вращение с tween.js
Я пытаюсь повернуть плоскость 2 лица с именем slice_one на 160 градусов плавным способом.
Я пробовал это
new TWEEN.Tween(slice_one.rotation).to({ y: slice_one.rotation.y + Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();и tween.update(); в функции анимации;
Этот метод возвращает ошибку three.min.js >> l не является функцией <<
Есть ли другой способ плавного поворота плоскости, как THREE.Quaternion.setEuler?
Вот весь мой код
<html>
<head>
<title>My first Three.js app</title>
<style>
body {
background-color: #fff;
margin: 0px;
overflow: hidden;
}
container {
background-color: #ffffff;
}
</style>
</head>
<body>
<img id="pic" />
<canvas id="Canvas" style="display:none"></canvas>
<button id="Folding"></button>
<div id="container"></div>
<script src="three.min.js"></script>
<script src="Tween.js"></script>
<script src="tween.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="stats.min.js"></script>
<script>
var front = new Image();
front.src = '1.jpg';
var back = new Image();
back.src = '1.jpg';
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
//Slice one front face
function convert_f1() {
canvas.width = front.width / 2;
canvas.height = front.height;
var sourceX = 0;
var sourceY = 0;
var sourceWidth = front.width / 2;
var sourceHeight = front.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(front, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice one back face
function convert_b1() {
canvas.width = back.width / 2;
canvas.height = back.height;
var sourceX = back.width / 2;
var sourceY = 0;
var sourceWidth = back.width / 2;
var sourceHeight = back.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(back, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice two front face
function convert_f2() {
canvas.width = front.width / 2;
canvas.height = front.height;
var sourceX = front.width / 2;
var sourceY = 0;
var sourceWidth = front.width / 2;
var sourceHeight = front.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(front, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
//Slice two back face
function convert_b2() {
canvas.width = back.width / 2;
canvas.height = back.height;
var sourceX = 0;
var sourceY = 0;
var sourceWidth = back.width / 2;
var sourceHeight = back.height
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;
context.drawImage(back, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
dataURL = canvas.toDataURL();
console.log(dataURL);
return dataURL;
}
window.onload = function () {
f1 = convert_f1();
b1 = convert_b1();
f2 = convert_f2();
b2 = convert_b2();
//document.getElementById("container").style.backgroundImage = "url('" + f1 + "')";
var frontWidth = front.width/2;
var frontHeight = front.height;
var backWidth = back.width/2;
var backHeight = back.height;
var renderer, scene, camera, slice_one;
var container, stats;
init();
animate();
function init() {
container = document.getElementById('container');
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth/2, window.innerHeight/2);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = frontHeight*2;
controls = new THREE.OrbitControls(camera, container);
camera.lookAt(scene.position);
// geometry
var geometry1 = new THREE.PlaneGeometry(frontWidth, frontHeight, 1, 1);
var geometry2 = new THREE.PlaneGeometry(backWidth, backHeight, 1, 1);
geometry2.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));
var geometry3 = new THREE.PlaneGeometry(frontWidth , frontHeight , 1, 1);
var geometry4 = new THREE.PlaneGeometry(backWidth , backHeight , 1, 1);
geometry4.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));
// textures slice_one
var texture_f1 = new THREE.ImageUtils.loadTexture(f1);
var texture_b1 = new THREE.ImageUtils.loadTexture(b1);
// textures slice_Two
var texture_f2 = new THREE.ImageUtils.loadTexture(f2);
var texture_b2 = new THREE.ImageUtils.loadTexture(b2);
// material slice_one
var material_f1 = new THREE.MeshBasicMaterial({ map: texture_f1, color: 0xffffff, transparent: true });
var material_b1 = new THREE.MeshBasicMaterial({ map: texture_b1, color: 0xffffff, transparent: true });
// material slice_two
var material_f2 = new THREE.MeshBasicMaterial({ map: texture_f2, color: 0xffffff, transparent: true });
var material_b2 = new THREE.MeshBasicMaterial({ map: texture_b2, color: 0xffffff, transparent: true });
// slice_one
slice_one = new THREE.Object3D();
scene.add(slice_one);
// positiion slice_one
geometry1.applyMatrix(new THREE.Matrix4().makeTranslation(-frontWidth / 2, 0, 0));
geometry2.applyMatrix(new THREE.Matrix4().makeTranslation(-frontWidth / 2, 0, 0));
// mesh slice_one
var mesh1 = new THREE.Mesh(geometry1, material_f1);
slice_one.add(mesh1);
var mesh2 = new THREE.Mesh(geometry2, material_b1);
slice_one.add(mesh2);
// slice_two
slice_two = new THREE.Object3D();
scene.add(slice_two);
// position slice_two
slice_two.position.x = frontWidth/2;
slice_two.position.y = 0;
slice_two.position.z = 0;
// mesh slice_one
var mesh3 = new THREE.Mesh(geometry3, material_f2);
slice_two.add(mesh3);
var mesh4 = new THREE.Mesh(geometry4, material_b2);
slice_two.add(mesh4);
//var grad = Math.PI / 2;
//tween = new TWEEN.Tween(slice_one.rotation).to({ y: grad }, 1000);
//tween.easing(TWEEN.Easing.Quadratic.InOut);
//tween.onComplete();
//tween.start();+
//function onDocumentMouseDown(event) {
// event.preventDefault();
// new TWEEN.Tween(slice_one.rotation).to({ y: slice_one.rotation.y + Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
// //new TWEEN.Tween(plane.rotation).to({ z: plane.rotation.z + rad90 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
// console.log("click");
//}
//document.addEventListener('mousedown', onDocumentMouseDown, false);
//new TWEEN.Tween(slice_one.rotation).to({ y: Math.PI / 2 }, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
}
function animate() {
requestAnimationFrame(animate);
slice_one.rotation.y += Math.PI / 60;
//TWEEN.update();
stats.update();
renderer.render(scene, camera);
}
}
</script>
</body>
</html>