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

<!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、按键、鼠标控制的更多相关文章

c#调用js，以及js调用C#里的函数, c#自己生成js代码，实现对web的控制
using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...
THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...
THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...
THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
THREE.js代码备份——canvas_lines(随机点、画线)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...
THREE.js代码备份——canvas - geometry - earth(球体贴纹理)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...
THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

随机推荐

TCP/IP数据包结构具体解释
[关键词] TCP IP 数据包结构具体解释网络协议一般来说,网络编程我们仅仅须要调用一些封装好的函数或者组件就能完毕大部分的工作,可是一些特殊的情况下,就须要深入的理解网络数据包的结构, ...
php对比辨析之 mysql_escape_string & mysql_real_escape_string & addsalshes
概述: addslashes和mysql_real_escape_string.都是为了使数据安全的插入到数据库中而进行过滤. addslashes 转义的字符是单引号(').双引号("). ...
main方法无法编译
main方法无法编译,可能是没有括号的原因
C++字符串处理封装类String
概述 C++在处理字符串时相对于python等脚本语言并没有什么优势,下面将常用的字符串处理函数封装成一个String工具类,方便以后使用,后期还会对该类进行扩充,下面是具体的实现: // Strin ...
LeetCode10 Regular Expression Matching
题意: Implement regular expression matching with support for '.' and '*'. '.' Matches any single chara ...
C# 创建线程的简单方式：异步委托 .
定义一个委托调用的方法:TakesAWhile //定义委托要引用的方法 private static int TakesAWhile(int data, int ms) { Console.Writ ...
RegisterStartupScript和RegisterClientScriptBlock的用法
RegisterStartupScript和RegisterClientScriptBlock的用法 RegisterStartupScript(key, script) RegisterClient ...
vim 实现 go to definition的功能
如:go to definition的功能,使用ctags配置步骤:1.创建vim ~/.vimrc2.配置vim属性 set number filetype plugin indent on ...
iOS部分其他知识
1.界面切换传值 (1)使用button进行界面切换 //当页面跳转时系统自动调用,segue连线 - (void)prepareForSegue:(UIStoryboardSegue *)segue ...
Liunx下全局安装 Composer
我把它放在系统的PATH目录中,这样就能在全局访问它. curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/l ...

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

THREE.js代码备份——线框cube、按键、鼠标控制的更多相关文章

随机推荐

热门专题