THREE.js案例源码学习-- orthographic

来源：互联网发布：软件著作权多少钱编辑：程序博客网时间：2024/05/17 19:22
<!DOCTYPE html><html lang="en"><head><title>three.js canvas - camera - orthographic</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}</style></head><body><script src="../build/three.js"></script><!--三维坐标转换成二维屏幕坐标--><script src="js/renderers/Projector.js"></script><script src="js/renderers/CanvasRenderer.js"></script><script src="js/libs/stats.min.js"></script><script>var container, stats;var camera, scene, renderer;init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );var info = document.createElement( 'div' );info.style.position = 'absolute';info.style.top = '10px';info.style.width = '100%';info.style.textAlign = 'center';info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - orthographic view';container.appendChild( info );//正交投影摄像机camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );camera.position.x = 200;camera.position.y = 100;camera.position.z = 200;scene = new THREE.Scene();// Gridvar size = 500, step = 50;var geometry = new THREE.Geometry();for ( var i = - size; i <= size; i += step ) {//geometry.vertices：geometry顶点geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );}var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );//three.js 线段var line = new THREE.LineSegments( geometry, material );scene.add( line );// Cubesvar geometry = new THREE.BoxGeometry( 50, 50, 50 );var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );for ( var i = 0; i < 100; i ++ ) {var cube = new THREE.Mesh( geometry, material );cube.scale.y = Math.floor( Math.random() * 2 + 1 );cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;cube.position.y = ( cube.scale.y * 50 ) / 2;cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;scene.add( cube );}// Lights//环境光var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );scene.add( ambientLight );//平行光光源var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );directionalLight.position.x = Math.random() - 0.5;directionalLight.position.y = Math.random() - 0.5;directionalLight.position.z = Math.random() - 0.5;directionalLight.position.normalize();scene.add( directionalLight );var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );directionalLight.position.x = Math.random() - 0.5;directionalLight.position.y = Math.random() - 0.5;directionalLight.position.z = Math.random() - 0.5;directionalLight.position.normalize();scene.add( directionalLight );renderer = new THREE.CanvasRenderer();renderer.setClearColor( 0xf0f0f0 );//防止在retina屏幕上变形renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );stats = new Stats();container.appendChild( stats.dom );//改变窗户事件window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {camera.left = window.innerWidth / - 2;camera.right = window.innerWidth / 2;camera.top = window.innerHeight / 2;camera.bottom = window.innerHeight / - 2;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}//function animate() {//动画更新requestAnimationFrame( animate );stats.begin();render();stats.end();}function render() {var timer = Date.now() * 0.0001;camera.position.x = Math.cos( timer ) * 200;camera.position.z = Math.sin( timer ) * 200;camera.lookAt( scene.position );renderer.render( scene, camera );}</script></body></html>
阅读全文
0 0