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

【问题标题】：Rotate sphere by clicking on link in three.js通过单击three.js中的链接旋转球体
【发布时间】：2016-04-15 00:28:43
【问题描述】：

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

【问题讨论】：

【解决方案1】：

这只是创建一个 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>

JavaScript

 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 );

}

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

【讨论】：

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