<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="../static/three.js-master/build/three.js"></script> <script> var renderer = new THREE.WebGLRenderer(); // 渲染器 renderer.setSize( window.innerWidth, window.innerHeight ); // 設置渲染器的寬度和高度 document.body.appendChild( renderer.domElement ); var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 ); // 透視攝像機 camera.position.set( 0, 0, 100 ); // 設置座標 camera.lookAt( 0, 0, 0 ); var scene = new THREE.Scene(); // 場景 // 上面是攝像機 下面是材料 //create a blue LineBasicMaterial var material = new THREE.LineBasicMaterial( { color: 0x0000ff } ); // 定義線條的材料,接收字典類型的參數 var geometry = new THREE.Geometry(); // 聲明一個幾何體geometry geometry.vertices.push(new THREE.Vector3( -10, 0, 0) ); geometry.vertices.push(new THREE.Vector3( 0, 10, 0) ); var line = new THREE.Line( geometry, material ); // 根據材料建立線條 scene.add( line ); // 將線條添加到場景內 renderer.render( scene, camera ); // 渲染器將場景和攝像機及線條渲染出來 </script> </body> </html>
附帶three.js代碼,點擊下載html