【three.js練習程序】旋轉、縮放場景

本文轉載自查看原文 2018-02-15 14:45 1887 前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ceshi</title>
    <script type="text/javascript" src=".\build\three.js"></script>
    <script src=".\examples\js\controls\TrackballControls.js"></script>
    <script src=".\examples\js\controls\DragControls.js"></script>
    <style>
        body
        {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 作為Three.js渲染器輸出元素 -->
    <div id="WebGL-output">
    </div>
    <!-- 第一個 Three.js 樣例代碼 -->
    <script type="text/javascript">

        var cube = new Array(100);
        var rotx = new Array(100);
        var roty = new Array(100);
        var rotz = new Array(100);
        var camera, scene, renderer;

        var controls;
        var id = null;
        var fov = 45;
        var near = 0.1;
        var far = 1000;
        init();

        function init() {

            scene = new THREE.Scene();      //創建場景

            camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);   //創建攝像機
            camera.position.x = 100;
            camera.position.y = 100;
            camera.position.z = 100;
            camera.lookAt(scene.position);


            renderer = new THREE.WebGLRenderer();                    //創建一個WebGL渲染器並設置其大小
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);

            var axes = new THREE.AxisHelper(200);               //創建三軸表示
            scene.add(axes);

            controls = new THREE.TrackballControls(camera);     //創建場景旋轉縮放事件
            controls.rotateSpeed = 2.5;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            for (var i = 0; i < 100; i++) {             //隨機創建100個正方體
                var geometry = new THREE.BoxGeometry(5, 5, 5);
                for (var j = 0; j < geometry.faces.length; j += 2) {
                    var hex = Math.random() * 0xffffff;
                    geometry.faces[j].color.setHex(hex);
                    geometry.faces[j + 1].color.setHex(hex);
                }

                rotx[i] = Math.random() * 0.05;
                roty[i] = Math.random() * 0.05;
                rotz[i] = Math.random() * 0.05;
                var material = new THREE.MeshBasicMaterial({ vertexColors: 0xff0000 });
                cube[i] = new THREE.Mesh(geometry, material);

                cube[i].position.x = Math.random() * 100 - 50;
                cube[i].position.y = Math.random() * 100 - 50;
                cube[i].position.z = Math.random() * 100 - 50;

                scene.add(cube[i]);

            }

            id = setInterval(render, 33);
        }

        function render() {
            controls.update();

            for (var i = 0; i < 100; i++) {
                cube[i].rotation.x += rotx[i];
                cube[i].rotation.y += roty[i];
                cube[i].rotation.z += rotz[i];
            }

            renderer.render(scene, camera);
        }

        document.getElementById("WebGL-output").appendChild(renderer.domElement);
   

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【Three.js】OrbitControl 旋轉【three.js練習程序】隨機生成100個方塊 Three.js場景的基本組件第一個Three.js程序——動手寫一個簡單的場景 three.js中物體旋轉實踐之房門的打開與關閉 three.js入門——先跑個旋轉的正方體 Three.js 學習筆記(1)--坐標體系和旋轉 Three.js 紋理貼圖1--旋轉的地球 three.js 之旅（五）--跟場景scene相關的函數使用three.js創建大小不隨着場景變化的文字