JavaScript 0基础,只是照着官方文档临摹了下,之后有时间再进行细节学习和功能封装。文章来源地址https://www.toymoban.com/news/detail-832988.html
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);//设置要渲染的场景和相机
文章来源:https://www.toymoban.com/news/detail-832988.html
到了这里,关于从Unity到Three.js(画线组件line)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!