22.轨迹球控件

最新推荐文章于 2024-03-23 20:48:03 发布

sheerhr

最新推荐文章于 2024-03-23 20:48:03 发布

阅读量136

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/qq_24871849/article/details/112609638

版权

three.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>
    <title>Example 09.04 - Trackball controls </title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>
    <script type="text/javascript" src="../libs/MTLLoader.js"></script>
    <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/chroma.js"></script>
    <script type="text/javascript" src="../libs/TrackballControls.js"></script>

    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="Stats-output">
    </div>
    <!-- Div which will hold the Output -->
    <div id="WebGL-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        // once everything is loaded, we run our Three.js stuff.
        function init() {

            // 该对象用于跟踪时间
            var clock = new THREE.Clock();

            var stats = initStats();

            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();

            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


            // create a render and set the size
            var webGLRenderer = new THREE.WebGLRenderer();
            webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);
            webGLRenderer.shadowMapEnabled = true;

            // position and point the camera to the center of the scene
            camera.position.x = 100;
            camera.position.y = 100;
            camera.position.z = 300;
            camera.lookAt(new THREE.Vector3(0, 0, 0));


            var trackballControls = new THREE.TrackballControls(camera);

            trackballControls.rotateSpeed = 1.0;
            trackballControls.zoomSpeed = 1.0;
            trackballControls.panSpeed = 1.0;
            trackballControls.noZoom = false;
            trackballControls.noPan = true;
            trackballControls.staticMoving = false;
            //        trackballControls.dynamicDampingFactor=0.3;

            var ambientLight = new THREE.AmbientLight(0x383838);
            scene.add(ambientLight);

            // add spotlight for the shadows
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(300, 300, 300);
            spotLight.intensity = 1;
            scene.add(spotLight);

            // add the output of the renderer to the html element
            document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

            // call the render function
            var step = 0;


            // setup the control gui
            var controls = new function() {
                // we need the first child, since it's a multimaterial


            };

            var gui = new dat.GUI();
            var mesh;

            var loader = new THREE.OBJMTLLoader();
            var load = function(object) {
                var scale = chroma.scale(['red', 'green', 'blue']);
                setRandomColors(object, scale);
                mesh = object;
                scene.add(mesh);
            };


            var texture = THREE.ImageUtils.loadTexture('../assets/textures/Metro01.JPG');
            //texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
            loader.load('../assets/models/city.obj', '../assets/models/city.mtl', load);
            //texture.repeat.set( 1 , 1);


            function setCamControls() {

            }

            render();

            function setRandomColors(object, scale) {
                var children = object.children;


                if (children && children.length > 0) {
                    children.forEach(function(e) {
                        setRandomColors(e, scale)
                    });
                } else {
                    // no children assume contains a mesh
                    if (object instanceof THREE.Mesh) {

                        object.material.color = new THREE.Color(scale(Math.random()).hex());
                        if (object.material.name.indexOf("building") == 0) {
                            object.material.emissive = new THREE.Color(0x444444);
                            object.material.transparent = true;
                            object.material.opacity = 0.8;
                        }
                    }
                }
            }


            function render() {
                stats.update();
                // 返回此次调用和上次调用之间经过的时间
                var delta = clock.getDelta();

                if (mesh) {
                    //   mesh.rotation.y+=0.006;
                }

                // 为了保证相机能够平缓地移动和旋转，我们需要传入精确地时间差
                trackballControls.update(delta);
                //webGLRenderer.clear();
                // render using requestAnimationFrame
                requestAnimationFrame(render);
                webGLRenderer.render(scene, camera)
            }

            function initStats() {

                var stats = new Stats();
                stats.setMode(0); // 0: fps, 1: ms

                // Align top-left
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';

                document.getElementById("Stats-output").appendChild(stats.domElement);

                return stats;
            }
        }
        window.onload = init;
    </script>
</body>

</html>

sheerhr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22.轨迹球控件

<!DOCTYPE html><html><head> <title>Example 09.04 - Trackball controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoade
复制链接

扫一扫