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

随机推荐

as3.0 interface接口使用方法
[转]as3.0 interface接口使用方法 AS在2.0的时候就支持接口了接口能够让你的程序更具扩展性和灵活性,打个例如比方你定义了一个方法代码: public function aMet ...
GIT GUI的使用(转)
前段时间跟着Ruby On Rails的toturial玩了一把Git,今天再回过头来,觉得这个版本控制工具真的很不错.下面来讲一下,在windows下如何通过git gui来管理代码. 首先,要在h ...
CSS3实现自定义Checkbox和Radiobox
我们知道浏览器自带的Checkbox复选框不怎么美观(这或许是我们看习惯了的缘故),而且复选框在不同的浏览器上显示的样式又有很大的差异,由于目前越来越多的人开始接受支持CSS3的现代浏览器,所以今天就 ...
大型JavaScript应用程序架构模式
11月中旬在伦敦举行的jQuery Summit顶级大会上有个session讲的是大型JavaScript应用程序架构,看完PPT以后觉得甚是不错,于是整理一下发给大家共勉. PDF版的PPT下载地址 ...
判断浏览器是否IE10
项目中做打印预览时,在IE10中出现兼容性问题,需要针对IE10做特殊处理. 在网上搜了一下,有三种方法可以实现一.特性检测:@cc_on  ...
KFC数据测试hbase结果
两个field,一个是KFC数据一个列放的内容是“same” 每条数据都flush SLF4J: Failed to load class "org.slf4j.impl.Static ...
一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...
Golang学习 - errors 包
------------------------------------------------------------ Go 语言使用 error 类型来返回函数执行过程中遇到的错误,如果返回的 e ...
1.4.6 其他Schema元素
这里描述了schema.xml中的其他几个重要的元素. 唯一主键-Unique Key uniqueKey元素一篇文档的唯一标记,它几乎总是保证您的应用程序设计,例如,如果你更新索引中的文档,需要用到 ...
小小的封装了一个pie的echarts
function showData(ele,arr1,arr2){ var myChart2 = echarts.init(document.getElementById(ele)); var opt ...

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

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

随机推荐

热门专题