three.js之创建一条直线
Posted aaronthon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了three.js之创建一条直线相关的知识，希望对你有一定的参考价值。
<!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代码，点击下载
以上是关于three.js之创建一条直线的主要内容，如果未能解决你的问题，请参考以下文章