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

随机推荐

Swift中的问号?和感叹号!
Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化.如果在使用变量之前不进行初始化就会报错: var ...
JSAPI用户手册
本文档主要涵盖如何嵌入SpiderMonkey javascript引擎到你自己的c++程序中. JavaScript在浏览器端已经被广泛使用了.但是,Mozilla的javascript引擎可以被嵌 ...
LeetCode34 Search for a Range
题目: Given a sorted array of integers, find the starting and ending position of a given target value. ...
JAVA基础之正则表达式
加 ^$ 整个字符串满足要求不加部分字符串满足要求即可通过 ======================================================== \:转义字符 \d:任 ...
Override Inline Styles with CSS
inline style: <div style="background: red;"> The inline styles for this div should m ...
IOS webView快照
这个功能就是对网页的存储,存储成png格式的图片且不失真很棒的一个小方法.具体实现如下: - (void)webViewDidFinishLoad:(UIWebView *)webView1 { ...
[iOS Xcode8]上传AppStore无法添加构建版本
最近升级到xcode8了,也遇到了一些问题.最近产品需要更新版本,按照以前的流程,我觉得so easy啊,万万没想到啊,这次更新版本差点让我吐血,来来回回不下七次. 首先问题是版本通过xcode上传到 ...
Visual Studio 扩展包(.vsix)制作
前言:上篇介绍了 Visual Studio扩展工具添加与卸载,本编要介绍的是Visual Studio 扩展包(.vsix)的制作. 方法: ①.下载并安装Visual Studio 2010 SD ...
mysql 重命名表名
先创建一张表: -- 创建用户表 CREATE TABLE user10( id SMALLINT UNSIGNED KEY AUTO_INCREMENT, username ) NOT NULL U ...
ionic中input框禁止输入问题
其实这个问题在之后沥青思路之后觉得还是挺好实现的,没有思路的时候真是找不到头绪~ 功能的描述为:当输入框中没有内容时,允许用户编辑:当其中有内容时不允许用户编辑,只有当用户点击编辑按钮后,才可允许编辑 ...

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

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

随机推荐

热门专题