This code is working on BoxGeometry，
but when I try to rorate my GLTF model it doesn’t work
var container, stats;
var camera, scene, renderer;
var model;
var targetRotationX = 0.5;
var targetRotationOnMouseDownX = 0;
var targetRotationY = 0.2;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var slowingFactor = 0.25;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene.add( camera );
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}
const Loader = new GLTFLoader();
Loader.load('../static/model/monkey.glb', function ( gltf ) {
const Material = new THREE.MeshStandardMaterial({
color:'white'
});
let model = gltf.scene;
model.traverse((child, i) => {
if (child.isMesh) {
child.material = Material;
child.material.side = THREE.DoubleSide;
}
});
scene.add( model );
}, undefined, function ( error ) {
console.error( error );
});
/* cube = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ) , new THREE.MeshFaceMaterial(materials) );
cube.position.y = 150;
cube.overdraw = true;
scene.add( cube ); */
/* cube = new THREE.BoxGeometry(); */
renderer = new THREE.WebGLRenderer({
alpha:true
});
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDownX = targetRotationX;
mouseYOnMouseDown = event.clientY - windowHalfY;
targetRotationOnMouseDownY = targetRotationY;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotationX = ( mouseX - mouseXOnMouseDown ) * 0.00025;
mouseY = event.clientY - windowHalfY;
targetRotationY = ( mouseY - mouseYOnMouseDown ) * 0.00025;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
rotateAroundWorldAxis(model, new THREE.Vector3(0, 1, 0), targetRotationX);
rotateAroundWorldAxis(model, new THREE.Vector3(1, 0, 0), targetRotationY);
targetRotationY = targetRotationY * (1 - slowingFactor);
targetRotationX = targetRotationX * (1 - slowingFactor);
renderer.render( scene, camera );
}
function rotateAroundWorldAxis( object, axis, radians ) {
var rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationAxis( axis.normalize(), radians );
rotationMatrix.multiply( object.matrix ); // pre-multiply
object.matrix = rotationMatrix;
object.rotation.setFromRotationMatrix( object.matrix );
}
