Javascript 通过单击three.js中的链接旋转球体_Javascript_Three.js

Javascript 通过单击three.js中的链接旋转球体

javascript three.js

Javascript 通过单击three.js中的链接旋转球体,javascript,three.js,Javascript,Three.js,我已经创建了一个球体和一组链接。我想通过单击任何链接来更改球体的位置或旋转球体。我尝试了很多搜索，但找不到任何类似的例子。只需创建一个HTML元素并将JS函数与其“onclick”事件关联即可。下面是一个基本场景的快速实现，使用一个按钮（您可以用链接或任何您喜欢的东西替换它）： HTML <!DOCTYPE html> <html lang="en"> <head> <title>Rotate Mesh On Button

我已经创建了一个球体和一组链接。我想通过单击任何链接来更改球体的位置或旋转球体。我尝试了很多搜索，但找不到任何类似的例子。

只需创建一个HTML元素并将JS函数与其“onclick”事件关联即可。下面是一个基本场景的快速实现，使用一个按钮（您可以用链接或任何您喜欢的东西替换它）：

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rotate Mesh On Button Clicked</title>
    </head>

    <body>

        <button onclick="myFunction()">Rotate</button>


        <script type="text/javascript" src="three.min.js"></script>
        <script type="text/javascript" src="OrbitControls.js"></script>

        <script type="text/javascript" src="scene.js"></script>

    </body>

</html>

正如您所见，单击按钮时，它会调用“myFunction”，将网格旋转90°，非常简单。

友好提示。为用户编写代码不是一个好主意，尤其是当它是一个任务时。他们应该先展示他们尝试过的东西。然后帮助他们。当然，我已经准备好了一个基本的场景设置，所以我想发布所有的东西，给他一个更好的概述。

 var container, camera, scene, renderer;
 var geometry, material, mesh;

 var cameraControls;

init();
animate();

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    // renderer

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xdbdbdb );
    container.appendChild( renderer.domElement );

    // scene

    scene = new THREE.Scene();

    // camera

    camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 3, 0.5, 40 );
    scene.add( camera ); 

    // controls
    cameraControls = new THREE.OrbitControls( camera, renderer.domElement );

    // lights

    scene.add( new THREE.AmbientLight( 0x222222 ) );

    var light = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( light );

    // objects

    geometry = new THREE.CylinderGeometry( 5, 5, 5, 5 );

    material = new THREE.MeshPhongMaterial(  {color: 0x00aafa} );

    mesh = new THREE.Mesh( geometry, material );



    scene.add( mesh );

    window.addEventListener( 'resize', onWindowResize, false );

}

function myFunction() {

    mesh.rotateX(90);
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    render();

    cameraControls.update();

}

function render() {

    camera.lookAt( scene.position );

    renderer.render( scene, camera );

}