three.js旋转的方块canvas_geometry_cube

最新推荐文章于 2023-11-27 16:06:41 发布

人工智能-肥鹅

最新推荐文章于 2023-11-27 16:06:41 发布

阅读量439

点赞数

分类专栏： three.js 文章标签： three.js旋转

本文链接：https://blog.csdn.net/kfyzjd2008/article/details/79358954

版权

three.js 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

官方示例 canvas_geometry_cube.html

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转的方块</title>
    <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>
    <style>
        body{
            font-family: monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body onload="threeStart();">

    <div id="canvas_frame"></div>

    <script>

        var container,stats;

        var camera,scene,renderer;

        var cube,plane;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        
        function initThree(){

            container = document.getElementById('canvas_frame');

            stats = new Stats();
            container.appendChild(stats.domElement);

            document.addEventListener('mousedown',onDocumentMouseDown);
            document.addEventListener('touchstart',onDocumentTouchStart);
            document.addEventListener('touchmove',onDocumentTouchMove);

        }

        function onDocumentMouseDown(event){

            event.preventDefault();

            document.addEventListener('mousemove',onDocumentMouseMove);
            document.addEventListener('mouseup',onDocumentMouseUp);
            document.addEventListener('mouseout',onDocumentMouseOut);

            mouseXOnMouseDown = event.clientX - windowHalfX;

            targetRotationOnMouseDown = targetRotation;//记录当前方块的旋转位置

        }

        function onDocumentMouseMove(event){

            mouseX = event.clientX - windowHalfX;

            targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; //方块当前旋转位置 + 鼠标移动距离 * 0.02

        }

        function onDocumentMouseUp(event){

			document.removeEventListener( 'mousemove', onDocumentMouseMove );
			document.removeEventListener( 'mouseup', onDocumentMouseUp );
			document.removeEventListener( 'mouseout', onDocumentMouseOut );

        }

        function onDocumentMouseOut(event){

            document.removeEventListener( 'mousemove', onDocumentMouseMove );
			document.removeEventListener( 'mouseup', onDocumentMouseUp );
			document.removeEventListener( 'mouseout', onDocumentMouseOut ); 

        }

        function onDocumentTouchStart(event){
            if ( event.touches.length === 1 ) {

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;
            }
        }

        function onDocumentTouchMove(event){

            if ( event.touches.length === 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

            }
        }

        function initRender(){

            renderer = new THREE.CanvasRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth,window.innerHeight);
            container.appendChild(renderer.domElement);

        }

        function initScene(){

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xf0f0f0);

        }

        function initCamera(){

            camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);//透视相机
            camera.position.y = 150;
            camera.position.z = 500;

        }

        function initLight(){

        }

        function initObject(){

            var geometry = new THREE.BoxGeometry(200,200,200);//盒子模型

            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 );

            }
            
            //vertexColors 定义线条材质是否使用顶点颜色
            var material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors,overdraw:0.5});
            
            cube = new THREE.Mesh( geometry,material);
            cube.position.y = 150;
            scene.add(cube);

            var geometry = new THREE.PlaneBufferGeometry(200,200);//平面缓存模型
            geometry.rotateX(-Math.PI / 2);//沿X轴旋转

            var material = new THREE.MeshBasicMaterial({color:0xe0e0e0,overdraw:0.5});

            plane = new THREE.Mesh(geometry,material);
            scene.add(plane);

        }

        function threeStart(){

            initThree();
            initRender();
            initScene();
            initCamera();
            initObject();
            animate();

        }

        function animate(){

            requestAnimationFrame(animate);

            stats.update();

            render();
            
        }

        function render(){

            plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
            
            renderer.render(scene,camera);

        }

    </script>
    
</body>
</html>