1
J'ai un modèle collada d'une vache, et je veux tourner autour de ce modèle avec ma souris. J'ai cherché des solutions trouvées beaucoup mais pas de ceux qui travaillent avec mon code.rotation collada modèle
dessous est le code.
Mon problème est: que je veux tourner le modèle avec la souris et non rotation automatique
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=2.0, maximum-scale=2.0">
<style>
body {
font-family: Monospace;
background-color: #676578;
margin: 0px;
overflow: hidden;
}
#info {
color: #000000;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
a { color: skyblue }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script>
//als de browser geen open gl ondersteunt, geeft ie een message
if (! Detector.webgl) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae, skin;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('./models/collada/monster/monster.dae', function (collada) {
dae = collada.scene;
skin = collada.skins[ 0 ];
//scale van de koe, scaled de x y en z as gelijk
dae.scale.x = dae.scale.y = dae.scale.z = 0.006;
dae.updateMatrix();
init();
animate();
});
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000);
camera.position.set(0, 0, 3);
scene = new THREE.Scene();
// Grid
/*/
//grid grote
var size = 0, step = 1;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ color: 0xcccccc, opacity: 0.2 });
for (var i = - size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(- size, - 0.04, i));
geometry.vertices.push(new THREE.Vector3( size, - 0.04, i));
geometry.vertices.push(new THREE.Vector3(i, - 0.04, - size));
geometry.vertices.push(new THREE.Vector3(i, - 0.04, size));
}
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);/*/
// Add the COLLADA
scene.add(dae);
particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff }));
scene.add(particleLight);
// Lights
scene.add(new THREE.AmbientLight(0xcccccc));
//hoeveelheid licht
var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xe5e5e4);
directionalLight.position.x = Math.random() - 10;
directionalLight.position.y = Math.random() - 10;
directionalLight.position.z = Math.random() - 10;
directionalLight.position.normalize();
scene.add(directionalLight);
pointLight = new THREE.PointLight(0xffffff, 4);
pointLight.position = particleLight.position;
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
var t = 0;
var clock = new THREE.Clock();
function animate() {
var delta = clock.getDelta();
requestAnimationFrame(animate);
if (t > 0) t = 0;
if (skin) {
// guess this can be done smarter...
// (Indeed, there are way more frames than needed and interpolation is not used at all
// could be something like - one morph per each skinning pose keyframe, or even less,
// animation could be resampled, morphing interpolation handles sparse keyframes quite well.
// Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
for (var i = 0; i < skin.morphTargetInfluences.length; i++) {
skin.morphTargetInfluences[ i ] = 10;
}
}
render();
stats.update();
}
function render() {
//snelheid van het draaien
var timer = Date.now() * 0.0005;
//camera positie op x
camera.position.x = Math.cos(timer) * 15;
camera.position.y = 2;
// camera positie op z
camera.position.z = Math.sin(timer) * 10;
camera.lookAt(scene.position);
// light positie
particleLight.position.x = Math.sin(timer * 0) * 3009;
particleLight.position.y = Math.cos(timer * 0) * 4000;
particleLight.position.z = Math.cos(timer * 0) * 3009;
renderer.render(scene, camera);
}
//nieuw
</script>
</body>