物体threejs
# threejs 加载第三方模型
threejs 加载第三方模型 接专栏的上一篇博文，这是加载第三方模型相关的。这篇博文拖了很久了哈，简单说一下吧，本来不想写了的，觉得相对来说比较简单，但是还是稍微一扯。为啥要加载第三方呢，上一篇我们绘制的小立方体很简单啊，但是有一些模型可能比较复杂，比如一辆小汽车，一个大楼，我们用代码一行一行的写 ......
three.js中某个物体跟随camera进行旋转
const camera = useThree().camera; const borderRef = useRef(); useFrame(()=>{ //通过反正切函数，获得在Y轴旋转的角度。由欧拉角定义可如此设置。 borderRef.current.rotation.y = Math.ata ......
threejs_交互_鼠标点击_添加物体_删除物体
click点击添加物体,shirft+click点击删除物体 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>three.js webgl - interactive - voxel painter</tit ......
threejs 拖拽 画矩形
import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; export function initThree() { THREE.Object3 ......
threejs中渲染html
背景 最近中看threejs的时候发现一个好玩的事情，可以在threejs中渲染普通的html。threejs本身可以做各种炫酷的界面，但是与用户交互的时候写起来没有用dom实现方便，但是如果可以将已有的dom渲染到threejs中，那么就可以实现非常炫酷的界面，也能提高用户的体验。 依赖介绍 这里 ......
threejs-材质（textures）
what is textures? UV: UV coordinate 决定了 材质在mesh上贴 、铺的方式和位置 // add texture // //第一种方式 // const image = new Image(); // const texture = new THREE.Textur ......
使用dat.gui 控制threejs(一）
1 import * as THREE from 'three' 2 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' 3 import gsap from 'gsap' 4 import * a ......
我不知道的threejs(2)
geometry(ies) 几何体: BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Intege ......
threejs-camera&controls&renderer(WebGLRenderer)
ArrayCamera： 一般用于，展示益、一个场景存在多个物体，每个物体各自拥有自己的视角的这种场景。 CubeCamera：一次性创建六个方位的相机（类似于正方体六个面，立方全景图中所有方位） StereoCamera： 立体相机，创建于类似于VR场景的，实现相机视角跟随鼠标的效果 Orthog ......
ROS系统下gazebo环境中，无人机结合目标跟踪算法（SiamCar），完成对物体的跟踪
ROS系统下gazebo环境中，无人机结合目标跟踪算法（SiamCar），完成对物体的跟踪（可以是小车或者其他的），然后给出轨迹对比图等评估指标。 开发语言：python 仿真平台：PIXHAWK 运行环境：ros （建议Ubuntu18.04+ros melodic） 1、四旋翼无人机跟踪小车或其 ......
gsap应用之threejs动画效果
import * as THREE from 'three' import gsap from 'gsap' // Canvas const canvas = document.querySelector('canvas.webgl') // Scene const scene = new THRE ......
Unity Shader案例01--------物体压缩放大
使用Unity2021 1.基本需要场地Plane+物体Sphere+材质Materal+渲染Shader 2.渲染Shader 压缩放大渲染设置代码 Shader "CLF/SetZoom" { Properties { // 通常所有属性名都以下划线字符开头 //Texture 2D == 贴图 ......
threejs坐标转换
threejs坐标转换 世界坐标转局部坐标 let localPos=worldVector.project(self.camera) 局部坐标转世界坐标 const v3 = new THREE.Vector3(); object.getWorldPosition(v3); sphere.posi ......
我不知道的threejs（1）
mesh.position.length() : 获得mesh到当前场景中心的距离 mesh.position.distanceTo(camera.postion): 获得当前mesh到相机的距离，这里参数可以是任意 vector3 坐标 mesh.position.normalize(): 将me ......
threejs加载带材质的fbx格式模型
threejs加载带材质的fbx格式模型 loadFBX() { let manager = new LoadingManager(); manager.addHandler(/\.tga$/i, new TGALoader()); const fbxLoader = new FBXLoader(m ......
Unity实现3D物体遮挡血条
Unity 实现3D物体遮挡血条 前言：在游戏开发中，我们经常会遇到UI和3D物体的层级遮挡问题，最常见的比如血条跟随敌人的时候，多个敌人的血条会遮挡住玩家或者3D物体，去网上查了一下也没有很好的解决方案，自己尝试了一下，发现还是很简单的 UI血条的制作 利用Unity自带的UI组件Scrollba ......
threejs之检测拖动模型和停止拖动模型以及鼠标缩放事件
controls.value.addEventListener('start',startEvent) controls.value.addEventListener('end', endEvent); 这样子给轨道控制器绑定事件后即可。 ......
threejs点击事件（不同大小的画布）
threejs点击事件（不同大小的画布） 一、直接是window宽高的画布，点击交互的方案 onClick(event) { event.preventDefault(); this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1; thi ......
通过光流法检测运动物体,得到图像运动场
1.算法描述 1950年，Gibson首先提出了光流的概念，所谓光流就是指图像表现运动的速度。物体在运动的时候之所以能被人眼发现，就是因为当物体运动时，会在人的视网膜上形成一系列的连续变化的图像，这些变化信息在不同时间，不断的流过眼睛视网膜，就好像一种光流过一样，故称之为光流。光流法检测运动物体的原 ......
Unity中实现物体移动的方法
在unity中实现物体移动的方法有很多种，本文将介绍7种不同的实现方法，可自行参考效果 1. Set Position 方法 public Transform targetTansform; In Update/FixedUpdate: this.transform.position = targe ......
【Unity3D】点选物体、框选物体、绘制外边框
1 需求描述 绘制物体外框线条盒子 中介绍了绘制物体外框长方体的方法，本文将介绍物体投影到屏幕上的二维外框绘制方法。 点选物体：点击物体，可以选中物体，按住 Ctrl 追加选中，选中的物体设置为红色。 框选物体：拖拽鼠标，屏幕上会出现滑动框，滑动框内的物体会被选中，选中的物体设置为红色。 绘制外 ......
【Unity3D】选中物体描边特效
1 前言 描边的难点在于如何检测和识别边缘，当前实现描边特效的方法主要有以下几种： 1）基于顶点膨胀的描边方法 在 SubShader 中开 2 个 Pass 渲染通道，第一个 Pass 通道渲染膨胀的顶点，即将顶点坐标沿着法线方向向外扩展，并使用纯色给扩展后的顶点着色，第二个 Pass ......
【Unity3D】绘制物体表面三角形网格
1 仅绘制三角形网格 1）创建游戏对象 创建一个空对象，重命名为 Grid，并在其下添加需要绘制网格的对象，如下： 场景显示如下： 2）添加脚本组件 GridController.cs using System; using UnityEngine; public class G ......
【Unity3D】绘制物体外框线条盒子
1 需求描述 点选物体、框选物体、绘制外边框 中介绍了物体投影到屏幕上的二维外框绘制方法，本文将介绍物体外框线条盒子绘制方法。 内框：选中物体后，绘制物体的内框（紧贴物体、并与物体姿态一致的内框盒子） 外框：选中物体后，绘制物体的外框（紧贴物体、并与世界坐标系的朝向一致的外框盒子） 内框和外 ......
【Oculus Interaction SDK】（七）使用射线进行交互（物体 & UI）
前言 前段时间 Oculus 的 SDK 频繁更新，很多已有的教程都不再适用于现在的版本了。本系列文章的主要目的是记录现版本常见功能的实现方法，便于自己后续开发。当然，不排除我文章刚写完 SDK 又变了的可能性，所以如果有人发现文章的内容已经不适用于新版本了，也可以留评论或者私信我，我会持续更新文章 ......
【Oculus Interaction SDK】（三）限制可操作物体的移动 / 旋转
前言 前段时间 Oculus 的 SDK 频繁更新，很多已有的教程都不再适用于现在的版本了。本系列文章的主要目的是记录现版本常见功能的实现方法，便于自己后续开发。当然，不排除我文章刚写完 SDK 又变了的可能性，所以如果有人发现文章的内容已经不适用于新版本了，也可以留评论或者私信我，我会持续更新文章 ......
threeJs构建3D世界
threejs官网 https://threejs.org/docs/index.html#manual/zh/introduction/Installation （官网非常的详细） 导入安装 npm install three （下载安装threejs） 然后就可以在项目中导入threejs im ......