three.Js: Screen size change-猿圈-程序猿的知识社区

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 01.06 - Screen size change</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <meta itemprop="name" content="Car Visualizer">
    <meta itemprop="image" content="shareImageCarVisualizer.jpg">
    <meta itemprop="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes.">
    <meta property="og:image" content="shareImageCarVisualizer.jpg">
    <meta name="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." />
    <meta property="og:type" content="website">
    <meta property="og:title" content="Car Visualizer" />
    <meta property="og:image" content="shareImageCarVisualizer.jpg" />
    <meta property="og:url" content="http://threejs.org/" />
    <meta property="og:description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." />
    <!-- For Chrome for Android: -->
    <link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
    <!-- For iPhone 6 Plus with @3× display: -->
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
    <!-- For iPad with @2× display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
    <!-- For iPad with @2× display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <!-- For iPhone with @2× display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
    <!-- For iPhone with @2× display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {

            // listen to the resize events  监听窗体大小事件
            window.addEventListener('resize', onResize, false);

            var camera;//摄像机
            var scene;//场景
            var renderer; //渲染

            // initialize stats
            var stats = initStats();


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

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



            // create a render and set the size
            renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;

            // initialize the trackball controls and the clock which is needed
            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();


            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;

            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;

            // add the plane to the scene
            scene.add(plane);

            // create a cube
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true;

            // position the cube
            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z = 0;

            // add the cube to the scene
            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

            // position the sphere
            sphere.position.x = 20;
            sphere.position.y = 0;
            sphere.position.z = 2;
            sphere.castShadow = true;

            // add the sphere to the scene
            scene.add(sphere);

            // position and point the camera to the center of the scene
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);

            // add subtle ambient lighting
            var ambienLight = new THREE.AmbientLight(0x353535);
            scene.add(ambienLight);

            // add spotlight for the shadows
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-10, 20, -5);
            spotLight.castShadow = true;
            scene.add(spotLight);

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

            // call the render function
            var step = 0;

            var controls = new function () {
                this.rotationSpeed = 0.02;
                this.bouncingSpeed = 0.03;
            };

            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);
            gui.add(controls, 'bouncingSpeed', 0, 0.5);


            // attach them here, since appendChild needs to be called first  可以旋转场景
            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();


            render();

            function render() {

                // update the stats and the controls
                trackballControls.update(clock.getDelta());
                stats.update();

                // rotate the cube around its axes
                cube.rotation.x += controls.rotationSpeed;
                cube.rotation.y += controls.rotationSpeed;
                cube.rotation.z += controls.rotationSpeed;

                // bounce the sphere up and down
                step += controls.bouncingSpeed;
                sphere.position.x = 20 + (10 * (Math.cos(step)));
                sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

                // render using requestAnimationFrame
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }


    </script>
    <link rel="stylesheet" href="../css/default.css">
</head>
<body>
    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 02.04 - Geometries</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/utils/SceneUtils.js"></script>

    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {
            // listen to the resize events  监听窗体大小事件
            window.addEventListener('resize', onResize, false);
            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 renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;

            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;

            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;

            // add the plane to the scene
            scene.add(plane);

            // position and point the camera to the center of the scene
            camera.position.x = -50;
            camera.position.y = 30;
            camera.position.z = 20;
            camera.lookAt(new THREE.Vector3(-10, 0, 0));

            // add subtle ambient lighting
            var ambientLight = new THREE.AmbientLight(0x555555);
            scene.add(ambientLight);

            // add spotlight for the shadows
            var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, Math.PI / 4, 0, 2);
            spotLight.shadow.mapSize.height = 1024;
            spotLight.shadow.mapSize.width = 1024;
            spotLight.position.set(-40, 30, 30);
            spotLight.castShadow = true;
            scene.add(spotLight);

            // add geometries
            addGeometries(scene);

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

            // call the render function
            var step = 0;         


            //添加几何体
            function addGeometries(scene) {
                var geoms = [];

                geoms.push(new THREE.CylinderGeometry(1, 4, 4));

                // basic cube
                geoms.push(new THREE.BoxGeometry(2, 2, 2));

                // basic spherer
                geoms.push(new THREE.SphereGeometry(2));

                geoms.push(new THREE.IcosahedronGeometry(4));

                // create a convex shape (a shape without dents)
                // using a couple of points
                // for instance a cube
                var points = [
                    new THREE.Vector3(2, 2, 2),
                    new THREE.Vector3(2, 2, -2),
                    new THREE.Vector3(-2, 2, -2),
                    new THREE.Vector3(-2, 2, 2),
                    new THREE.Vector3(2, -2, 2),
                    new THREE.Vector3(2, -2, -2),
                    new THREE.Vector3(-2, -2, -2),
                    new THREE.Vector3(-2, -2, 2)
                ];
                geoms.push(new THREE.ConvexGeometry(points));

                // create a lathgeometry
                //http://en.wikipedia.org/wiki/Lathe_(graphics)
                var pts = []; //points array - the path profile points will be stored here
                var detail = .1; //half-circle detail - how many angle increments will be used to generate points
                var radius = 3; //radius for half_sphere
                for (var angle = 0.0; angle < Math.PI; angle += detail) //loop from 0.0 radians to PI (0 - 180 degrees)
                    pts.push(new THREE.Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius)); //angle/radius to x,z
                geoms.push(new THREE.LatheGeometry(pts, 12));

                // create a OctahedronGeometry
                geoms.push(new THREE.OctahedronGeometry(3));

                // create a geometry based on a function
                geoms.push(new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10));

                //
                geoms.push(new THREE.TetrahedronGeometry(3));

                geoms.push(new THREE.TorusGeometry(3, 1, 10, 10));

                geoms.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20));

                var j = 0;
                for (var i = 0; i < geoms.length; i++) {
                    var cubeMaterial = new THREE.MeshLambertMaterial({
                        wireframe: true,
                        color: Math.random() * 0xffffff
                    });

                    var materials = [

                        new THREE.MeshLambertMaterial({
                            color: Math.random() * 0xffffff
                        }),
                        new THREE.MeshBasicMaterial({
                            color: 0x000000,
                            wireframe: true
                        })

                    ];

                    var mesh = THREE.SceneUtils.createMultiMaterialObject(geoms[i], materials);
                    mesh.traverse(function (e) {
                        e.castShadow = true
                    });

                    //var mesh = new THREE.Mesh(geoms[i],materials[i]);
                    //mesh.castShadow=true;
                    mesh.position.x = -24 + ((i % 4) * 12);
                    mesh.position.y = 4;
                    mesh.position.z = -8 + (j * 12);

                    if ((i + 1) % 4 == 0) j++;
                    scene.add(mesh);
                }

            }
            //工具栏
            var controls = new function () {
                this.rotationSpeed = 0.02;   //默认值            
            };
            //加载工具栏
            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);

            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();

            render();

            function render() {

                trackballControls.update(clock.getDelta());
                stats.update();


                // rotate the cubes around its axes  工具栏设置变化值
                scene.traverse(function (e) {
                    if (e instanceof THREE.Mesh && e != plane) {

                        e.rotation.x += controls.rotationSpeed;
                        e.rotation.y += controls.rotationSpeed;
                        e.rotation.z += controls.rotationSpeed;
                    }
                });

                // render using requestAnimationFrame
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }

            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }
    </script>
    <link rel="stylesheet" href="../css/default.css">

</head>
<body>
    <div id="webgl-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 02.08 - Cameras,Audio</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <style>
        div {
            display: block;
        }
        #fwa {
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            position: absolute;
            opacity: 0;
            z-index: 10
        }
        .buttonBG {
            z-index: 2;
            background-color: #000;
            position: absolute;
            border: 1px solid #fff;
        }
        .button {
            text-align: center;
            font-size: 1em;
            color: #eee;
            line-height: 40px;
            z-index: 40;
            position: absolute;
        }
        #topLeft {
            left: 15px;
        }

        #topLeft, #topRight {
            width: 130px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top:150px;
        }
        

        #topRight {
            right: 15px;
        }

        #topLeft, #topRight {
            width: 130px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 150px;
        }
        #toolBar {
            width: 590px;
            height: 40px;
            left: 50%;
            margin-left: -145px;
            bottom: 40px;
            z-index: 2;
            position: absolute;
            color:#ff0000;
        }
    </style>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script>
    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {

            window.addEventListener('resize', onResize, false);
            var stats = initStats();
            var clock = new THREE.Clock();
            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();

            initDefaultLighting(scene);

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

            /*1
            //声音
            var analyser;
            // create an AudioListener and add it to the camera
            var listener = new THREE.AudioListener();
            camera.add(listener);
            // create an Audio source
            var sound = new THREE.Audio(listener);
            // load a sound and set it as the Audio object's buffer
            var audioLoader = new THREE.AudioLoader();
            audioLoader.load('../assets/audio/cow.ogg', function (buffer) {
                sound.setBuffer(buffer);
                sound.setLoop(false); // 一次
                sound.setVolume(0.5);
                sound.play();
            });
            // scene(audioLoader);
            // create an AudioAnalyser, passing in the sound and desired fftSize
            analyser = new THREE.AudioAnalyser(sound, 32);
            // get the average frequency of the sound
            var data = analyser.getAverageFrequency();
            */


            //2 声音
            var listener1 = new THREE.AudioListener();
            camera.add(listener1);

            // controls = new THREE.FirstPersonControls(camera);

            // create a render and set the size
            var renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);

            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(180, 180);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);


            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;

            // add the plane to the scene
            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

            for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
                for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
                    var rnd = Math.random() * 0.75 + 0.25;
                    var cubeMaterial = new THREE.MeshLambertMaterial();
                    cubeMaterial.color = new THREE.Color(rnd, 0, 0);
                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                    cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
                    cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
                    cube.position.y = 2;

                    scene.add(cube);




                }
            }

            var lookAtGeom = new THREE.SphereGeometry(3);
            var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({ color: 0x00ff00 }));
            scene.add(lookAtMesh);

            
            //var cube = new THREE.BoxGeometry(40, 40, 40);           
            var material_1 = new THREE.MeshBasicMaterial({
                color: 0xffffff,
                map: THREE.ImageUtils.loadTexture("../assets/textures/animals/cow.png")
            });

            // sound spheres
            var mesh1 = new THREE.Mesh(cubeGeometry, material_1);
            mesh1.position.set(0, 20, 100);
            scene.add(mesh1);
        /**/
            //声音
            var posSound1 = new THREE.PositionalAudio(listener1);
            var audioLoader = new THREE.AudioLoader();
            audioLoader.load('../assets/audio/cow.ogg', function (buffer) {
                posSound1.setBuffer(buffer);
                posSound1.setRefDistance(30);
                posSound1.play();
                posSound1.setRolloffFactor(10);
                posSound1.setVolume(2.5); //音量
                posSound1.setLoop(false);//不循环false  true
            });
            

            mesh1.add(posSound1);

            // ground
            var helper = new THREE.GridHelper(500, 10);
            helper.position.y = 0.1;
            scene.add(helper);         


           

            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
            directionalLight.position.set(-20, 40, 60);
            scene.add(directionalLight);


            // add subtle ambient lighting
            var ambientLight = new THREE.AmbientLight(0x292929);
            scene.add(ambientLight);

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

            // call the render function
            var step = 0;

            var controls = new function () {
                this.perspective = "Perspective";
                this.switchCamera = function () {
                    if (camera instanceof THREE.PerspectiveCamera) {
                        camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
                        camera.position.x = 120;
                        camera.position.y = 60;
                        camera.position.z = 180;

                        camera.lookAt(scene.position);
                        this.perspective = "Orthographic";
                    } else {
                        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                        camera.position.x = 120;
                        camera.position.y = 60;
                        camera.position.z = 180;

                        camera.lookAt(scene.position);
                        this.perspective = "Perspective";
                    }
                };
            };

            var gui = new dat.GUI();
            gui.add(controls, 'switchCamera');
            gui.add(controls, 'perspective').listen();

            // make sure that for the first time, the
            // camera is looking at the scene
            //camera.lookAt(scene.position);


           // render();
            animate();

            function animate() {
                requestAnimationFrame(animate);
                render();
            }


            var step = 0;

            function render() {


                //var delta = clock.getDelta(), time = clock.getElapsedTime() * 5;
                //controls.update(delta);

                stats.update();
                // render using requestAnimationFrame
                step += 0.02;
                if (camera instanceof THREE.Camera) {
                    var x = 10 + (100 * (Math.sin(step)));
                    camera.lookAt(new THREE.Vector3(x, 10, 0));
                    lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0));
                }

                //        .position.x = 20+( 10*(Math.cos(step)));
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }


            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }


    </script>
    <link rel="stylesheet" href="../css/default.css">

</head>
<body>
    <!-- Div which will hold the Output -->
    <div id="webgl-output">



    </div>
    <div id="topLeft"><div id="topLeftButton0" style="visibility: visible; left: 0px;"><div id="backgroundtopLeftButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 0px;"></div><div id="buttontopLeftButton0" class="button" style="width: 40px; height: 40px; left: 0px;"><img src="../../gui/fullscreen.png"></div></div><div id="topLeftButton1" style="visibility: visible; left: 45px;"><div id="backgroundtopLeftButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 45px;"></div><div id="buttontopLeftButton1" class="button" style="width: 40px; height: 40px; left: 45px;"><img src="../../gui/camera.png"></div></div><div id="topLeftButton2" style="visibility: visible; left: 90px;"><div id="backgroundtopLeftButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 90px;"></div><div id="buttontopLeftButton2" class="button" style="width: 40px; height: 40px; left: 90px;"><img src="../../gui/plus.png"></div></div></div>
    <div id="topRight"><div id="topRightButton0" style="visibility: visible; right: 0px;"><div id="backgroundtopRightButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 0px;"></div><div id="buttontopRightButton0" class="button" style="width: 40px; height: 40px; right: 0px;"><img src="../../gui/facebook.png"></div></div><div id="topRightButton1" style="visibility: visible; right: 45px;"><div id="backgroundtopRightButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 45px;"></div><div id="buttontopRightButton1" class="button" style="width: 40px; height: 40px; right: 45px;"><img src="../../gui/google.png"></div></div><div id="topRightButton2" style="visibility: visible; right: 90px;"><div id="backgroundtopRightButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 90px;"></div><div id="buttontopRightButton2" class="button" style="width: 40px; height: 40px; right: 90px;"><img src="../../gui/twitter.png"></div></div></div>
    <div id="toolBar"><div id="audioButton" style="visibility: visible; left: 255px;"><div id="backgroundaudioButton" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.5; left: 255px;"></div><div id="buttonaudioButton" class="button" style="width: 40px; height: 40px; left: 255px;"><img src="../../gui/volumeOn.png"></div></div></div>

        <!-- Javascript code that runs our Three.js examples -->
        <script type="text/javascript">
            (function () {
                // your page initialization code here
                // the DOM will be available here
                init()
            })();
        </script>


</body>
</html>

菜单 学习猿地 - LMONKEY

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

人生苦短我要学Python！

PHP开发工程师

PHP是世界上最好的编程语言!

GO开发工程师

想优雅的写程序，赶紧GO!

大数据开发工程师

弄大数据，就是在搞革命!

前端开发工程师

不仅最好，而且最全!

UI开发工程师

这个世界从来不缺少美，缺少你来创造美!

Linux运维工程师

不只是说说而已！

WEB前端1+X

不仅为考证，轻松做开发

计算机二级（C语言）

一切只为考证！

猿工手册

各种工具精挑细选

猿材料

各种工具精挑细选

猿代码

各种工具精挑细选

猿著课件

各种工具精挑细选

知识题库

知识闯关节节高，刷题涨知识！

阶段练习

单元测试知识学习状况秒掌握！

期末考试

期末测试，学习情况即刻知道！

面试题库

最新的企业技术人员招聘真题练习！

Java专区

2948篇 ｜ 24.5万人浏览

Python专区

2593篇 ｜ 19.5万人浏览

大数据专区

2948篇 ｜ 18.5万人浏览

PHP专区

3953篇 ｜ 27.5万人浏览

Go专区

1382篇 ｜ 12.5万人浏览

Web前端专区

1453篇 ｜ 31.5万人浏览

Linux云计算

1230篇 ｜ 4.5万人浏览

其他专区

53232篇文章 ｜ 11.5万人浏览

搜索

历史记录 清除记录

近期热搜

项目开发全程实录（电商EW_Shop）

8679 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前

使用账号登录

启用更安全省心的  微信登录

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

菜单学习猿地 - LMONKEY

尊享10项VIP特权持续新增

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

历史记录清除记录

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览