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

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

import * as THREE from 'three'; //引入threejsconst 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 WebGLRendererlinejoin:  '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);//设置要渲染的场景和相机

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++类型转化cast from pointer to smaller type ‘int‘ loses information

代码如下 #include <iostream>int main() {int a 10;std::cout << (int)&a << std::endl;return 0; }编译 这段代码是要将地址转化成整数类型&#xff0c;但是在编译时编译器告诉我们这是错的&#xff0c;因为在C中&#xff0c;将指针转换为int类型的…

Spring IoC容器详解

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 基本概念 Spring IoC容器是Spring框架的核心组件&#xff0c;它实现了控制反转&#xff08;Inversion of Control&#xff0c;IoC&#xff09;的设计原则。IoC是一种编程思…

【前端高频面试题--TypeScript篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;前端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 高频前端面试题--Vue3.0篇 什么是TypeScript&#xff1f;TypeScript数据类型TypeScript中命名空…

最关键的十个图像特征

在计算机视觉中&#xff0c;图像特征是用来描述图像中视觉元素的一组属性&#xff0c;它们对于图像识别、分类、检测和分割等任务至关重要。以下是10个在计算机视觉中广泛使用的最重要的图像特征&#xff1a; 颜色直方图&#xff08;Color Histogram&#xff09;&#xff1a; 颜…

Days 27 ElfBoard 板 AltiumDesigner 相同电路快速布局布线

在进行设计开发的时候&#xff0c;总会遇到相同的电路&#xff0c;或者模块&#xff0c;这些电路可以使用相同的布局和走线&#xff0c;例如 DC-DC 电源、网口 PHY 电路部分。这类型的电路&#xff0c;我们可以采用AltiumDesigner 中的 Room 进行布局和布线的快速复制&#xff…

C#系列-并行处理+异步流(5)

一&#xff0c;C#并行处理 在C#中&#xff0c;并行处理指的是同时执行多个任务或操作&#xff0c;以利用多核或多处理器的优势&#xff0c;从而提高应用程序的性能。C#提供了多种工具和框架来帮助开发者实现并行处理。以下是一些在C#中实现并行处理的方法&#xff1a; Paralle…

VitePress-12-markdown中使用vue的语法

前言 VitePress 中&#xff0c;markdown文档最终都会转换成为 html文件&#xff0c;我们在访问的时候&#xff0c;也是直接访问的 xxx.html 文件。而且&#xff0c;markdown文档会被作为 [vue单文件] 进行处理&#xff0c;因此&#xff0c;我们我们可以在文档中使用 vue 语法&…

决策树之scikit-learn

实例 from sklearn.datasets import load_iris from sklearn import tree import matplotlib.pyplot as plt# Load iris dataset iris load_iris() X, y iris.data, iris.target# Fit the classifier clf tree.DecisionTreeClassifier() clf clf.fit(X, y)# Plot the deci…

Linux命令-batch命令(在系统不繁忙的时候执行定时任务)

说明 batch命令 用于在指定时间&#xff0c;当系统不繁忙时执行任务&#xff0c;用法与at相似。 语法 batch(选项)(参数)选项 -f&#xff1a;指定包含具体指令的任务文件&#xff1b; -q&#xff1a;指定新任务的队列名称&#xff1b; -m&#xff1a;任务执行完后向用户发送…

详细介绍Python网络编程模块

根据前面对网络分层棋型的介绍&#xff0c;我们知道实际的网络模型大致分为四层&#xff0c;这四层各有对应的网络协议提供支持&#xff0c; 网络层协议主要是 IP&#xff0c;它是所有互联网协议的基础&#xff0c;其中 ICMP&#xff08;Internet Control Message Protocol&…

烟雨要饭网带后台,附带搭建教程

直接上传访问即可&#xff0c;有安装向导&#xff0c;php环境不得低于7.0 后台地址/Admin&#xff0c;默认账号admin 默认密码123456 自带乞讨音乐&#xff0c;增加樱花特效

域内NAT:如何让内网client通过公网地址访问内网server?

第一步&#xff0c;实现任意公网用户访问内网server。按教育网规矩&#xff0c;公网过来的流量要访问校内网的server必须从教育专线&#xff08;路由器接口G0/0/1)进入。 第二步&#xff0c;实现内网主机通过公网地址210.43.2.3能够访问内网server192.168.1.2&#xff0c;图中①…

C++ 类和对象篇(九) 初始化列表

目录 一、什么是初始化列表&#xff1f; 二、为什么需要初始化列表&#xff1f; 三、初始化列表怎么使用&#xff1f; 3.1 在构造函数中使用初始化列表 3.2 注意 3.3 结论 3.4 应用场景 四、初始化列表的初始化顺序 五、另一种初始化成员变量的方法 【总结 一、什么是初始化列…

12.05 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 吉利控股集团2024届全球校园招聘补招岗位发布&#xff08;内推&#xff09; 校招 | 吉利控股集团2024届全球校园招聘补招岗位发布&#xff08;内推&#xff09; 2、校招 | 浪潮科…

【计算机网络】时延,丢包,吞吐量(分组交换网络

时延 结点处理时延(nodal processing delay&#xff09; dproc 排队时延&#xff08;queuing delay&#xff09; dqueue 传输时延&#xff08;transmission delay&#xff09; dtrans 路由器将分组推出所需要的时间&#xff0c;是分组长度和链路传输速率的函数 传播时…

年后时段:内在成长的黄金期

在中华民族的传统习俗中&#xff0c;春节是一年一度辞旧迎新的重要节点&#xff0c;它不仅象征着时间的更迭&#xff0c;更是人们生活、工作与心态调整的重要时刻。本文将深入探讨的是&#xff0c;在过年后这一特定时间段内&#xff0c;人的内在成长往往能得到显著提升的现象。…

【深蓝学院】移动机器人运动规划--第4章 动力学约束下的运动规划--笔记

0. Outline 1. Introduction 什么是kinodynamic&#xff1f; 运动学&#xff08;Kinematics&#xff09;和动力学&#xff08;Dynamics&#xff09;都是力学的分支&#xff0c;涉及物体的运动&#xff0c;但它们研究的焦点不同。 运动学专注于描述物体的运动&#xff0c;而…

906. 区间分组(贪心)

路径&#xff1a;906. 区间分组 - AcWing题库 思路&#xff1a; 可以想到是求区间最厚的地方。 每次输入l,r区间让l*2&#xff0c;r*21存入同一个数组&#xff1b; 注意&#xff1a;当lr时,要先计算左点。 代码: #define _CRT_SECURE_NO_WARNINGS #include<iostream&g…

CS50x 2024 - Lecture 3 - Algorithms

TABLE OF CONTENTS 00:00:00 - Introduction 一种统计班上人数的方法&#xff0c;全部站起来&#xff0c;两两配对&#xff0c;一个坐下&#xff0c;循环 00:01:01 - Overview 00:02:58 - Attendance 00:09:40 - Linear Search 00:24:58 - Binary Search 二分搜索 分而治…

018 Linux

文章目录 操作系统定义分类Linux系统构成 Linux文件系统Linux常用命令基础操作命令文件操作压缩解压权限管理显示展示命令其他命令 vi编译器操作使用 添加用户基本概念用户管理命令 ubuntu软件安装ssh服务终端启动Python服务 操作系统 定义 操作系统是管理计算机硬件与软件资…