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 ...

随机推荐

汉化Eclipse+配色方法(官方语言包)
一. 汉化方法: 1.Eclipse版本查询:安装目录readme,查版本号;参照查代号如下表: 代号平台版本项目主要版本发行日期 SR1发行日期 SR2发行日期 N/A 3.0 [1] N/A ...
0c-33-@class,循环retain
2个对象互相有着引用,A中有B,B中有A. // 对于循环retain的情况,对象不能够释放,此时只能让一方使用assign一方使用retain,retain用于对象assign用于基本类型,assi ...
表ADT
表一般不用简单数组来实现,通常将其实现为链表.在链表中要不要使用表头则属于个人兴趣问题.在下面的例程中我们都使用表头. 按照C的约定,作为类型的List(表)和Position(位置)以及函数的原型都 ...
[Android开发]- MVC的架构实现登录模块-1
本系列博客主要展示一下,在C-S(Client - Server)系统开发当中,如何使用MVC的架构来实现安卓端的一个登录验证的模块.如果你能有基本的数据库开发,WEB开发,和安卓开发的知识,那么理解 ...
跨平台轻量级redis、ssdb代理服务器(C++ 11编写）
dbproxy 是我业余采用C++11编写的跨平台代理服务器(并使用lua和自己的网络库),以扩展系统负载,同时使用多个后端数据库,后端数据库支持redis和ssdb. 需要由用户自己编写lua脚本控 ...
收藏一部山地车教学视频，Fabien Barel主讲及动作示范
视频是由曾多次获得UCI速降赛的冠军车手Fabien Barel主讲及动作示范,讲解山地车越野的装备以及基本动作.视频中的要点说明我已经手录为文本,如果视频中没有看清的地方,也可以看文字. 骑行装备 ...
【Python千问 1】Python核心编程（第二版）导读
第一章欢迎来到Python世界什么是Python Python的起源 Python的特点下载Python 安装Python 运行Python Python文档比较Python(与其它语言的比较 ...
iOS - 导航控制器
1.导航控制器 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.bac ...
Umbraco（4）-Outputting the Document Type Properties（翻译文档）
翻译原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco4outputting-the-document-typ ...
Python_使用smtplib和email模块发送邮件
[http://blog.csdn.net/menglei8625/article/details/7721746] SMTP (Simple Mail Transfer Protocol) 邮件传送 ...

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

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

随机推荐

热门专题