three平面相机

来源：互联网发布：员工管理系统 java 编辑：程序博客网时间：2024/05/16 14:14

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Three框架</title>        <script src="Three.js"></script>        <style type="text/css">            div#canvas-frame {                border: none;                cursor: pointer;                width: 100%;                height: 600px;                background-color: #EEEEEE;            }        </style>        <script>            var renderer;            function initThree() {                width = document.getElementById('canvas-frame').clientWidth;                height = document.getElementById('canvas-frame').clientHeight;                renderer = new THREE.WebGLRenderer({                    antialias : true                });                renderer.setSize(width, height);                document.getElementById('canvas-frame').appendChild(renderer.domElement);                renderer.setClearColor(0xFFFFFF, 1.0);            }            var camera;            function initCamera() {                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);                camera.position.x = 0;                camera.position.y = 2000;                camera.position.z = 0;                camera.up.x = 0;                camera.up.y = 0;                camera.up.z = 1;                camera.lookAt({                    x : 0,                    y : 0,                    z : 0                });            }            var scene;            function initScene() {                scene = new THREE.Scene();            }            var light;            function initLight() {                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);                light.position.set(100, 100, 200);                scene.add(light);            }            var cube;            function initObject() {                var geometry = new THREE.Geometry();                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );                for ( var i = 0; i <= 20; i ++ ) {                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 1 } ) );                    line.position.z = ( i * 50 ) - 500;                    scene.add( line );                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );                    line.position.x = ( i * 50 ) - 500;                    line.rotation.y = 90 * Math.PI / 180;                    scene.add( line );                }            }            function threeStart() {                initThree();                initCamera();                initScene();                initLight();                initObject();                renderer.clear();                renderer.render(scene, camera);            }        </script>    </head>    <body onload="threeStart();">        <div id="canvas-frame"></div>    </body></html>

说明:当相机位置发生改变时页面效果会发生改变;

 var camera;            function initCamera() {                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);                camera.position.x = 0;                camera.position.y = 0;                camera.position.z = 2000;                camera.up.x = 0;                camera.up.y = 1;                camera.up.z = 0;                camera.lookAt({                    x : 0,                    y : 0,                    z : 0                });            }

0 0