当前位置：首页 > article >正文

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

article 2024/11/15 4:26:55

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);//设置要渲染的场景和相机