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>
