0
点赞
收藏
分享

微信扫一扫

three.js之创建一条直线

凌得涂 2022-08-22 阅读 80

<!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 ); // 渲染器将场景和摄像机及线条渲染出来



举报

相关推荐

0 条评论