Open dounai1306 opened 7 years ago
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Three</title> <script src="https://cdn.bootcss.com/three.js/86/three.min.js"></script> <style type="text/css"> </style> </head> <body> <script> var renderer; var width = window.innerWidth; var height = window.innerHeight; function initThree() { renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.body.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 = 1000; 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 = 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( - 250, 0, 0 ) ); geometry.vertices.push( new THREE.Vector3( 250, 0, 0 ) ); for ( var i = 0; i <= 10; i ++ ) { var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x3498DB} ) ); line.position.z = ( i * 50 ) - 250; scene.add( line ); var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x3498DB} ) ); line.position.x = ( i * 50 ) - 250; line.rotation.y = 90 * Math.PI / 180; scene.add( line ); } } function threeStart() { initThree(); initCamera(); initObject(); renderer.clear(); renderer.render(scene, camera); } threeStart() </script> </body> </html>
要注意这几个值的计算