THREEJS002 绘制一条直线

最新推荐文章于 2022-10-08 17:48:06 发布

日积-月累

最新推荐文章于 2022-10-08 17:48:06 发布

阅读量837

点赞数

分类专栏： THREE.JS

本文链接：https://blog.csdn.net/u010697780/article/details/103890106

版权

THREE.JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

THREEJS002 绘制一条直线

实现思路

设置需要渲染的DOM

<body onload="loadThreejs()">
<div id="threeJsCanvas"></div>
</body>

初始化threejs的渲染器

//初始化Renderer
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)//渲染到dom上
}

初始化场景

//初始化场景
function initScene() {
    scene = new THREE.Scene()
}

初始化相机

//初始化相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000) //开眼角45，视口宽高比width/height,近平面1，远平面1000
    //相机所在位置 距离坐标原点（x,y,z）为（0,100,100）位置
    camera.position.x = 0
    camera.position.y = 0
    camera.position.z = 500
    camera.up.x = 0
    camera.up.y = 1 //相机以y正轴为正方向
    camera.up.z = 0
    camera.lookAt(new THREE.Vector3(0, 0, 0))//相机照相坐标原点
}

设置光源

//初始化光源
function initLight() {
    //创建颜色为：#ffffff,强度为:1.0的平行光源
    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

//初始化Renderer
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)//渲染到dom上
}

//初始化场景
function initScene() {
    scene = new THREE.Scene()
}

//初始化相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000) //开眼角45，视口宽高比width/height,近平面1，远平面1000
    //相机所在位置 距离坐标原点（x,y,z）为（0,100,100）位置
    camera.position.x = 0
    camera.position.y = 0
    camera.position.z = 300
    camera.up.x = 0
    camera.up.y = 1 //相机以y正轴为正方向
    camera.up.z = 0
    camera.lookAt(new THREE.Vector3(0, 0, 0))//相机照相坐标原点
}

//初始化光源
function initLight() {
    //创建颜色为：#ffffff,强度为:1.0的平行光源
    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//开启使用顶点颜色
        // vertexColors: false,
        // color:"#ffffff"
    })
    //定义颜色
    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>

日积-月累

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
THREEJS002 绘制一条直线

THREEJS002 绘制一条直线实现思路设置需要渲染的DOM<body onload="loadThreejs()"><div id="threeJsCanvas"></div></body>初始化场景//初始化场景function initScene() { scene = new THREE.Scene()}...
复制链接

扫一扫