码迷,mamicode.com
首页 > Web开发 > 详细

THREE.js代码备份——线框cube、按键、鼠标控制

时间:2016-08-03 22:10:51      阅读:753      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../build/three.js"></script>

<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>

    var container, stats;

    var camera, scene, renderer;

    var cube, plane;

    var fy=0.0;
    var fx=0.0;
    var zoom=20;
    var targetRotation = 0;
    var targetUp = 0;
    var targetRotationOnMouseDown = 0;
    var targetUpOnMouseDown = 0;
    var mouseX = 0;
    var mouseY=0;
    var mouseXOnMouseDown = 0;
    var mouseYOnMouseDown = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {

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

        var info = document.createElement( div );
        info.style.position = absolute;
        info.style.top = 10px;
        info.style.width = 100%;
        info.style.textAlign = center;
        info.innerHTML = Drag to spin the cube;
        container.appendChild( info );

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.maxDistance=7500;
        camera.position.y = 150;
        camera.position.z = 500;

        scene = new THREE.Scene();

        // Cube

        var geometry = new THREE.CubeGeometry(200, 200,200, 2, 2, 3 );


//        for ( var i = 0; i < geometry.faces.length; i += 2 ) {
//
//            var hex = Math.random() * 0xffffff;
//            geometry.faces[ i ].color.setHex( hex );
//            geometry.faces[ i + 1 ].color.setHex( hex );
//
//        }

        //var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
          var material = new THREE.MeshBasicMaterial({
              color: 0xff0000,
              wireframe: true
          });
        cube = new THREE.Mesh( geometry, material );
        cube.position.y = 150;
        scene.add( cube );

        // Plane

        var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
        geometry.rotateX( - Math.PI / 2 );

        var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );

        plane = new THREE.Mesh( geometry, material );
        scene.add( plane );

        renderer = new THREE.CanvasRenderer();
        renderer.setClearColor( 0xf0f0f0 );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        container.appendChild( stats.dom );

        document.addEventListener( mousedown, onDocumentMouseDown, false );
        document.addEventListener( touchstart, onDocumentTouchStart, false );
        document.addEventListener( touchmove, onDocumentTouchMove, false );
        document.addEventListener(keydown,onDocumentKeyDown,false);
        document.addEventListener( mousewheel, onMouseWheel, false);

        window.addEventListener( resize, onWindowResize, false );

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

    }

    //

    function onDocumentMouseDown( event ) {

        event.preventDefault();

        document.addEventListener( mousemove, onDocumentMouseMove, false );
        document.addEventListener( mouseup, onDocumentMouseUp, false );
        document.addEventListener( mouseout, onDocumentMouseOut, false );

        mouseXOnMouseDown = event.clientX - windowHalfX;
        mouseYOnMouseDown = event.clientY - windowHalfY;
        targetRotationOnMouseDown = targetRotation;
        targetUpOnMouseDown = targetUp;

    }

    function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
        targetUp = targetUpOnMouseDown + (mouseY - mouseYOnMouseDown)*0.02;
    }

    function onDocumentMouseUp( event ) {

        document.removeEventListener( mousemove, onDocumentMouseMove, false );
        document.removeEventListener( mouseup, onDocumentMouseUp, false );
        document.removeEventListener( mouseout, onDocumentMouseOut, false );

    }

    function onDocumentMouseOut( event ) {

        document.removeEventListener( mousemove, onDocumentMouseMove, false );
        document.removeEventListener( mouseup, onDocumentMouseUp, false );
        document.removeEventListener( mouseout, onDocumentMouseOut, false );

    }

    function onDocumentTouchStart( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
            mouseYOnMouseDown =  event.touches[ 0 ].pageY - windowHalfY;
            targetRotationOnMouseDown = targetRotation;
            targetUpOnMouseDown = targetup;

        }

    }

    function onDocumentTouchMove( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
            targetup = targetUpOnMouseDown + ( mouseY - mouseYOnMouseDown)*0.05;

        }

    }

    function onMouseWheel(event){
        if(event.wheelDelta > 0){ //前滚
         cube.position.z-=zoom;
         plane.position.z-=zoom;

        }else
        {
            cube.position.z+=zoom;
            plane.position.z+=zoom;
        }
    }

    function onDocumentKeyDown(event){
        switch(event.keyCode){
            case 37: //
                fy -= 0.1;
                break;
            case 39: //
                fy += 0.1;
                break;
            case 38: //
                //fx -= 0.1;
                cube.position.z-=10;

                break;
            case 40: //
                //fx += 0.1;
                cube.position.z+=10;
                break;
            default:
                break;
        }
    }

    //

    function animate() {

        requestAnimationFrame( animate );

        stats.begin();
        render();
        stats.end();

    }

    function render() {

        cube.rotation.x +=( targetUp - cube.rotation.x ) * 0.05;  //鼠标控制上下旋转
        cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
        //cube.rotation.x+=0.1;

        //cube.rotation.y+=fy;
       // cube.rotation.x+=fx;

        plane.rotation.y = cube.rotation.y;
        renderer.render( scene, camera );

    }

</script>

ript>

</body>
</html>

 

THREE.js代码备份——线框cube、按键、鼠标控制

标签:

原文地址:http://www.cnblogs.com/ForRickHuan/p/5734334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!