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

随机推荐

javascript exec方法
题目取出 "[大哭][尴尬][发怒][发怒][调皮][调皮][呲牙]" 串中[]里面的东西思路正则匹配,/\[(.+?)\]/ig; exec方法循环 exec() 方法的功 ...
mysql 参数read_rnd_buffer_size的真正含义
http://dev.mysql.com/doc/refman/5.7/en/order-by-optimization.html http://dev.mysql.com/doc/refman/ ...
BigDecimal带精度的运算的两篇文章
转自:http://guoliangqi.iteye.com/blog/670908 之前提到过在商业运算中要使用BigDecimal来进行相关的钱的运算(java中关于浮点运算需要注意的 ),可是实 ...
Eclipse目录
1. 解决Ubuntu下的Eclipse打开Windows编写的java代码的中文乱码 2. Eclipse常用快捷键
Nop关键技术点概述
数据访问层 Nop.Data项目包含用于与数据库及其它数据存储交互的类和功能.Nop.Data类库帮助将数据访问逻辑和业务对象分离.Nop使用的是Entity Framework Code First ...
实例源码--IOS高仿微信打飞机游戏(完整功能)
下载源码技术要点: 1. IOS游戏开发基础框架 2. 高仿打飞机游戏 3. 游戏背景音频技术 4.源码详细的中文注释 ……. 详细介绍: 1. IOS游戏开发基础框架此套源码为涉及IOS游戏开发 ...
项目源码--Android视频MV类网站客户端
下载源码技术要点: 1.视频MV类网站客户端框架 2.底部TAB功能模块 3.用户管理模块 4.结合优质动画技术,良好的用户体验 5.用户设置模块 6.sqlite数据库灵活的应用 7.源码带有非常 ...
Spring MVC 中 HandlerInterceptorAdapter的使用--转载
原文地址:http://blog.csdn.net/liuwenbo0920/article/details/7283757 一般情况下,对来自浏览器的请求的拦截,是利用Filter实现的,这种方式可 ...
JS Math算数
Math.ceil()ceil() 方法可对一个数进行上舍入. ceil英译天花板参数必须是一个数值.返回值大于等于 x,并且与它最接近的整数. Math.floor()floor() 方法可对一 ...
velocity 随笔
资源网站: http://wiki.apache.org/velocity/ http://velocity.apache.org/engine/releases/velocity-1.7/user- ...

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

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

随机推荐

热门专题