3 xx_ling

尚未进行身份认证

暂无相关简介

等级
TA的排名 49w+

使用three构建3d场景,实现简单交互

源码地址 如果有用的话给我一个小星星吧~3d场景初始化外部obj模型加载(1)几个模型加载(2)多个相同模型加载优化模型增加文字方案1: sprite方案2: css2dobject点击拾取模型实际遇到的问题与解决方法...

2020-04-08 10:49:10

渐变色百分比率条组件

最近项目中需要用到百分条,自己写了一个组件,记录下来。有用的话可以给我一个小星星吗,在线卑微代码地址1,实现效果:2, 代码<template> <div class="progress-main"> <div class="progress-bg"> <div class="progress-bar" :style="b...

2020-04-08 10:23:28

使用CSS2DObject创建文字

项目源码:地址使用CSS2DObject创建文字1 引入CSS2DObject, CSS2DRendererimport { CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer"2 render初始化 initCSSRender() { this.CSSRender ...

2020-04-01 15:21:29

three - 解决一些问题

1,在之前,为了操控模型,引入了OrbitControls,该插件中绑定了鼠标滚轮事件,实现通过滚轮放大缩小的功能。但在此次需求中,当房子放大到某种程度时要去掉屋顶,缩小到某种程度时去掉屋顶。而此时在外面监听不了滚轮事件了,怎么办呢?当时想的就是改源码。但node_modules中的代码改了也没用啊,,呃,那就把它单独拿出来改。文件拿出来后,修改文件中对其他插件的引用路径,(按照自己的文件结构修...

2020-03-26 10:08:30

three 实现多个相同模型的加载

考虑一种场景: 现在有一个厂房,里面有很多机器,而这些机器是一样的。那我们难道要将同一个模型加载多次吗?很明显,效率太低,不能这么做。是不是想到克隆了呢?要不加载一次模型,然后需要多少个就克隆多少个?克隆看这里ok,现在就开始搞。(1)定义一个模型克隆函数 cloneModel(obj, x, y, z, num) { //params: 模型, 坐标xyz,自定义数据 ...

2020-03-26 09:56:39

使用光线投射器(Raycaster)实现点击拾取模型

该类用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。这里利用他来做:点击拾取模型功能。可以这么想像:点击屏幕时,就会从视线方向发出一条射线,这条射线可能穿过场景中的多个模型,利用该类提供的方法能够拾取到这些模型。(1)初始化this.raycaster = new THREE.Raycaster();this.mouse = new THREE.Vector2()...

2020-03-26 09:08:27

vue中使用three,绘制3d场景--给模型增加文字标签

实际需求中,模型总会有一个文字标签,解释模型相关的信息。这里要用到的是:精灵平面(Sprite)精灵平面(Sprite)是一个在3D场景中总是面对着相机的平面。也就是无论你怎么旋转,你会发现他都朝向你哟,是不是很厉害的样子~好的,现在开始给模型增加sprite:(1)利用canvas绘制文字,作为sprite的材质var canvas = document.createElement(...

2020-03-25 16:37:56

vue中使用three,绘制3d场景--obj模型加载

二,模型加载在three官方文档中可以看到有多种加载器,这里我采用的是objLoader,obj模型是产品给的,关于3d建模不是很清楚就不说了。关于模型,我这里用到了两个文件(其实是产品就给了两个,模型不同文件个数不一定,有的可能还会用到图片)。分别是obj和mtl文件,obj文件即3d模型,但是他只有形状,没有外观,如色彩啊等等,所以需要mtl材质文件。(1)加载模型,需要使用加载器。这里...

2020-03-25 16:21:41

vue中使用three,绘制3d场景--初始化

一,初始化1,安装依赖(注意项目name不能为three,否则会有冲突)npm i three --save2,在需要使用three的组件中引入threeimport THREE from "three";3,初始化(1)场景scene初始化this.secen = new THREE.Secen();(2)相机camera初始化const aspect = window.i...

2020-03-25 16:08:20
勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。