从Unity到Three.js(画线组件line)

这篇具有很好参考价值的文章主要介绍了从Unity到Three.js(画线组件line)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

到了这里,关于从Unity到Three.js(画线组件line)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • unity几种画线(网格)方式使用

    这是调用低级别的图形库划线,效率较高,需要放在OnPostRender()函数,并将代码挂载到相机上,下面代码画了一个正方形 注意:代码必须挂载到相机上,而已画线只能在Game视图中显示,Scene视图不显示 具体GL参数详情,可查看官方GL相关文档 比较简单,多用于调试,其中dur

    2024年02月15日
    浏览(43)
  • 【Unity】LineRenderer画线拐点的网格变形问题

    正常情况下,使用Unity中画线工具LineRenderer。可以画出期望的直线。 但当拐点处,两点的距离过小,并且线的宽度不是特别细的情况下。组件动态生成的线会发生变形。 这是因为LineRenderer是根据填入的点位Positions和宽度Width来生成网格。如果两点间距过近,并且有一定的宽度

    2024年02月16日
    浏览(40)
  • unity中的Line Renderer

    unity中的Line Renderer 首先,Line Renderer 是 Unity 引擎中的一个组件,它可以生成直线、曲线等形状,并且在场景中呈现。通常情况下,Line Renderer 被用来实现轨迹、路径、线框渲染以及射线可视化等功能。 在使用 Line Renderer 时,我们需要将其挂载到一个游戏对象上,然后设置好相

    2024年02月06日
    浏览(26)
  • Unity Dots学习内容记录

    DOTS未来的潜力还是挺多的,目前已经陆续有项目局部投入该技术,追求硬件到软件的极致性能。 主要是记录下学习unity dots技术的过程吧。 DOTS全称Data Oriented Tech Stack,面向数据的技术堆栈。 是由Unity的下面几个技术栈组成 1.Entities(ECS,Entity-Component Data-System) 2.JobSytem(多线程作

    2024年04月15日
    浏览(52)
  • Unity学习记录——UI设计

    ​ 本文是中山大学软件工程学院2020级3d游戏编程与设计的作业8 1.相关资源 ​ 本次项目之中的人物模型来自Starter Assets - Third Person Character Controller | 必备工具 | Unity Asset Store ​ 此处使用了以下路径的 PlayerArmature 预制,这个预制人物模型可以进行行走奔跑跳跃等动作,很适合

    2024年02月04日
    浏览(40)
  • unity 场景烘培(边学习,边记录)

    目录 前言: 一、什么是场景渲染烘培? 二、为什么要对场景渲染烘培? 总结: 场景烘培渲染这块以前接触很少,因为要么有专门的同事搞这块,要么就是开发2d游戏(完全不需要)。 现在换了一家小公司,自己需要独立做这件事的时候,问题就来了。(此前也烘培了几个

    2024年02月10日
    浏览(43)
  • Unity学习记录:制作双屏垃圾分类小游戏

    要实现的功能 游戏操作 在规定时间内,垃圾通过拖拽进入正确垃圾桶的容器,垃圾在这里消失,飞入第二个屏上对应垃圾桶的位置并实现加分和加时间的效果,垃圾拖拽进入不正确的垃圾桶,垃圾会返回到原来的位置,同时,相应的时间也会减少 胜利和失败的条件: 胜利:

    2024年02月03日
    浏览(49)
  • Three.js 的组件库react-three-fiber和react-three-drei

    类似于这种字体,可以用Text或者Text3d,但是要处理一个问题,就是要保证字体一直正面视角。 这中间的处理比较的麻烦,于是可以使用react-three-drei中的Html来做这件事

    2024年01月24日
    浏览(59)
  • 【Unity 学习笔记】动画组件和动画控制器

    动画是一款游戏不可缺少的一部分。在Unity中,我们可以直接使用Unity自带的动画系统来制作我们想要的动画,其操作相当便捷。 帧动画是2D像素游戏的主流,我将以帧动画为例记录我最近学习动画系统的一些收获。 Unity的动画系统有三个不可缺少的部分。第一,动画;第二,

    2024年02月07日
    浏览(69)
  • 【Unity AR】<PokemonGo> AR精灵制作学习记录

        《宝可梦GO》(pokemonGo)是一款能对现实世界中出现的宝可梦进行探索捕捉、战斗以及交换的游戏。玩家可以通过智能手机在现实世界里发现宝可梦,进行抓捕和战斗。玩家作为宝可梦训练师抓到的宝可梦越多会变得越强大,从而有机会抓到更强大更稀有的宝可梦。本次

    2024年04月28日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包