从Unity到Three.js（画线组件line）

chillxiaohan

已于 2024-02-10 13:00:14 修改

阅读量811

点赞数 9

分类专栏： Three.js学习记录文章标签： unity javascript 游戏引擎

于 2024-02-09 09:44:58 首次发布

本文链接：https://blog.csdn.net/chillxiaohan/article/details/136085071

版权

Three.js学习记录专栏收录该内容

7 篇文章 3 订阅

订阅专栏

本文介绍了使用JavaScript和three.js库的基础知识，通过创建一个WebGL渲染器，配置PerspectiveCamera，定义LineBasicMaterial，并构建线性几何体，展示了如何在浏览器中实现简单的3D图形渲染。

摘要由CSDN通过智能技术生成

JavaScript 0基础，只是照着官方文档临摹了下，之后有时间再进行细节学习和功能封装。

import * as THREE from 'three'; //引入threejs

const renderer = new THREE.WebGLRenderer();//创建渲染器
//设置渲染范围，当前撑满全屏,屏幕左上角是（0，0）
let width = window.innerWidth;
let height = window.innerHeight;
renderer.setSize(width, height);

document.body.appendChild(renderer.domElement);
//配置相机,对应unity中 camer组件的相关设置
const camera = new THREE.PerspectiveCamera(45,width/height,1,500);
camera.position.set(0,0,100);//设置相机位置，对应unity中配置camer坐标
camera.lookAt(0,0,0);//设置相机一直朝向的坐标点，对应unity中的相机观察中心点
//创建一个材质球
//const material = new THREE.LineBasicMaterial({color:new THREE.Color("rgb(0, 100, 150)")});//({color:0x0000ff});
const material = new THREE.LineBasicMaterial( {
	color: new THREE.Color("rgb(0, 100, 150)"),
	linewidth: 10,//官方文档告知 由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
	linecap: 'bevel', //ignored by WebGLRenderer
	linejoin:  'bevel' //ignored by WebGLRenderer
} );
//配置画线经过的点，对应unity中的lineRenderer组件
//屏幕正中间是(0,0,0)
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));
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);

//创建场景
const scene = new THREE.Scene();
scene.add(line);//把线加入场景
renderer.render(scene,camera);//设置要渲染的场景和相机