• 【three.js练习程序】旋转、缩放场景


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ceshi</title>
        <script type="text/javascript" src=".uild	hree.js"></script>
        <script src=".examplesjscontrolsTrackballControls.js"></script>
        <script src=".examplesjscontrolsDragControls.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>

     

  • 相关阅读:
    poj 1456 贪心+STL
    hdu 4283 区间dp
    hdu 4745 区间dp
    hdu 3652 数位dp
    poj 2955 区间dp
    ubuntu apache2配置详解(含虚拟主机配置方法)
    从 mysql 客户端导出数据库 mysqldump
    Git 版本回退问题详解
    SEO 外链 内链 的定义
    为项目编写Readme.MD文件
  • 原文地址:https://www.cnblogs.com/tiandsp/p/8449500.html
Copyright © 2020-2023  润新知