1
나는 젖소에게서 collada 모델을 가지고 있으며, 그 모델을 마우스로 회전시키고 싶습니다. 솔루션에서 많이 찾았지만 내 코드로는 작동하지 않는 솔루션을 찾았습니다.회전 collada 모델
아래 코드가 있습니다.
내 문제는 : 내가 마우스로 모델을 회전 할 아니라 자동으로 당신이 http://threejs.org/examples/misc_controls_trackball.html 같은 것을 할 생각
<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>