Question

所以我尝试添加代码来用鼠标移动对象，但是没有用：s。我已经环顾四周了，但在我看的每个地方，这段代码都适用于他们？

另外，我想，如果按下按钮，相机会“飞”到该位置，现在它只是碰到它！

谢谢你的帮助！真的很感激！

HTML（仅标准）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<link rel="stylesheet" href="ap.css" type="text/css" />
<script src="../lib/Three_r49.js"></script>
<script src="ColladaLoader.js"></script>
<script src="orbitcontrols.js"></script>
<script src="app.js"></script>

</head>
<body>
<div id="tekst">
<h1>De tweede slag op ieper</h1>
<p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus Pag</p>
<button><a href="#" id="testButton">TEST</a></button>
</div>
</body>
</html>

Javascript：

window.addEventListener('DOMContentLoaded', (function(){

    //controls
    var controls;

    var width  = window.innerWidth;
    var height = window.innerHeight;

    //move variables
    controls = new THREE.TrackballControls( camera );
    controls.target.set( 0, 0, 0 );

    // renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );

    // scene
    var scene = new THREE.Scene();

    // camera
    // set a camera

    //camera variables - for easy acces
    var viewAngle = 60;
    var width  = window.innerWidth;
    var height = window.innerHeight;
    var near   = 0.01;
    var far    = 1000;

    var aspect = width / height;
    var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far );
    camera.position.z = 10;
    scene.add( camera );


    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
    light.position.set( 1, 1, 1 ).normalize();
    scene.add( light );

    var light2 = new THREE.DirectionalLight( 0xffffff );
    light2.position.set( -1, -1, -1 ).normalize();
    scene.add( light2 );

    //collada
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( '../map/mapoorlog.dae', function colladaReady( collada ) {
        var dae = collada.scene;
        scene.add( dae );   
    });

    // renderer
    function render() {
      requestAnimationFrame(arguments.callee);
      renderer.render( scene, camera );
    };

    //buttonInteractin
    var testButton = document.getElementById('testButton');
    testButton.onclick = function ()
    {
      camera.lookAt(new THREE.Vector3(10, 0, 0));
    };

    //animate
    function animate() {
    controls.update();
    }

    //init
    function init() {
    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );
    }

    render();
    animate();
    init();

}), false);

用相机移动dae

0 个答案: