THREEJS002 绘制一条直线
实现思路
设置需要渲染的DOM
< body onload= "loadThreejs()" >
< div id= "threeJsCanvas" > < / div>
< / body>
初始化threejs的渲染器
function initRenderer ( ) {
width = document. getElementById ( "threeJsCanvas" ) . clientWidth
height = document. getElementById ( "threeJsCanvas" ) . clientHeight
renderer = new THREE. WebGLRenderer ( {
antialias: true
} )
renderer. setSize ( width, height)
renderer. setClearColor ( "#666666" , 1.0 )
document. getElementById ( "threeJsCanvas" ) . appendChild ( renderer. domElement)
}
初始化场景
function initScene ( ) {
scene = new THREE. Scene ( )
}
初始化相机
function initCamera ( ) {
camera = new THREE. PerspectiveCamera ( 45 , width / height, 1 , 1000 )
camera. position. x = 0
camera. position. y = 0
camera. position. z = 500
camera. up. x = 0
camera. up. y = 1
camera. up. z = 0
camera. lookAt ( new THREE. Vector3 ( 0 , 0 , 0 ) )
}
设置光源
function initLight ( ) {
let light = new THREE. DirectionalLight ( "#ffffff" , 1.0 )
light. position. set ( 0 , 0 , 0 )
scene. add ( light)
}
创建直线几何体
function initLineModel ( ) {
let geometry = new THREE. Geometry ( ) ;
let material = new THREE. LineBasicMaterial ( {
vertexColors: true
} )
let color1 = new THREE. Color ( "#000000" )
let color2 = new THREE. Color ( "#ff0000" )
let p1 = new THREE. Vector3 ( - 50 , - 50 , - 50 )
let p2 = new THREE. Vector3 ( 50 , 50 , 50 )
geometry. vertices. push ( p1, p2)
geometry. colors. push ( color1, color2)
let line = new THREE. Line ( geometry, material, THREE . LineSegments)
scene. add ( line)
}
渲染
function render ( ) {
requestAnimationFrame ( render)
renderer. render ( scene, camera) ;
}
整体代码
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> Title< / title>
< script src= "../js/three.js" > < / script>
< style>
html, body {
font- family: 'Avenir' , Helvetica, Arial, sans- serif;
- webkit- font- smoothing: antialiased;
- moz- osx- font- smoothing: grayscale;
width: 100 % ;
height: 100 % ;
margin: 0 ;
padding: 0 ;
}
#threeJsCanvas {
border: none;
width: 100 % ;
height: 100 % ;
cursor: pointer;
background- color: #666666 ;
overflow: hidden;
}
< / style>
< / head>
< body onload= "loadThreejs()" >
< div id= "threeJsCanvas" > < / div>
< / body>
< / html>
< script>
let renderer, width, height
let scene
let camera
function initRenderer ( ) {
width = document. getElementById ( "threeJsCanvas" ) . clientWidth
height = document. getElementById ( "threeJsCanvas" ) . clientHeight
renderer = new THREE. WebGLRenderer ( {
antialias: true
} )
renderer. setSize ( width, height)
renderer. setClearColor ( "#666666" , 1.0 )
document. getElementById ( "threeJsCanvas" ) . appendChild ( renderer. domElement)
}
function initScene ( ) {
scene = new THREE. Scene ( )
}
function initCamera ( ) {
camera = new THREE. PerspectiveCamera ( 45 , width / height, 1 , 1000 )
camera. position. x = 0
camera. position. y = 0
camera. position. z = 300
camera. up. x = 0
camera. up. y = 1
camera. up. z = 0
camera. lookAt ( new THREE. Vector3 ( 0 , 0 , 0 ) )
}
function initLight ( ) {
let light = new THREE. DirectionalLight ( "#ffffff" , 1.0 )
light. position. set ( 0 , 0 , 0 )
scene. add ( light)
}
function initLineModel ( ) {
let geometry = new THREE. Geometry ( ) ;
let material = new THREE. LineBasicMaterial ( {
vertexColors: true
} )
let color1 = new THREE. Color ( "#000000" )
let color2 = new THREE. Color ( "#ff0000" )
let p1 = new THREE. Vector3 ( - 50 , - 50 , - 50 )
let p2 = new THREE. Vector3 ( 50 , 50 , 50 )
geometry. vertices. push ( p1, p2)
geometry. colors. push ( color1, color2)
let line = new THREE. Line ( geometry, material, THREE . LineSegments)
scene. add ( line)
}
function render ( ) {
requestAnimationFrame ( render)
renderer. render ( scene, camera) ;
}
function loadThreejs ( ) {
initRenderer ( )
initScene ( )
initCamera ( )
initLight ( )
initLineModel ( )
render ( )
}
< / script>