【threejs】根据点绘制直线

a9c93f2300

已于 2023-01-18 23:35:34 修改

阅读量296

点赞数

分类专栏：圖形學网络应用文章标签：前端 javascript html

于 2023-01-18 23:34:36 首次发布

本文链接：https://blog.csdn.net/m0_50939789/article/details/128731474

版权

网络应用同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

圖形學

14 篇文章 3 订阅

订阅专栏

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
            #info {
                position: absolute;
                top: 100px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
                color: #fff;
            }
		</style>
	</head>
	<body>
        <div id="info">Description</div>
		<script src="./index_script/index_script_three.js"></script>
		<script>
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
            camera.position.set( 0, 0, 100 );
            camera.lookAt( 0, 0, 0 );

            const scene = new THREE.Scene();

            //create a blue LineBasicMaterial
            const material = new THREE.LineBasicMaterial( { color: 0xe4e4e4 } );

            const points = [];
            points.push( new THREE.Vector3( - 10, 0, 0 ) );
            points.push( new THREE.Vector3( 0, 10, 0 ) );
            points.push( new THREE.Vector3( 10, 0, 0 ) );

            const geometry = new THREE.BufferGeometry().setFromPoints( points );
            const line = new THREE.Line( geometry, material );
            scene.add( line );
            function animate() {
				requestAnimationFrame( animate );
                renderer.render( scene, camera );
			};
            animate();
		</script>
	</body>
</html>