threejs
String佳佳
这个作者很懒,什么都没留下…
展开
-
threejs---解决模型贴图有明显白色边框的bug
bug重现:可以看到树叶边缘有明显的边框切割感,正是贴图文件本身的边框。这个bug使整棵树模型贴图看上去极其难看!优化修改之后的效果:优化方法:修改模型材质的alphaTest属性tree.material.alphaTest = 0.5...原创 2021-09-26 16:56:45 · 1008 阅读 · 2 评论 -
threejs---相机沿着自定义轨道移动,实现场景漫游效果
效果图:说明:1、本文章只提供轨道生成和相机沿轨道移动的实现方法,不提供效果图的完整代码2、本文章暂不介绍机器人跟随相机的移动显示,感兴趣的可以自行实现。思路是机器人的位置放在相机N个点位之前,运动原理和相机移动一样。且机器人的lookAt要指向机器人,否则机器人1、生成自定义轨道methods: createLine(){ //创建样条曲线,作为运动轨迹 this.curve = new THREE.CatmullRomCurve3([ new THREE.V原创 2021-09-26 16:30:45 · 7392 阅读 · 1 评论 -
拉伸成型纹理贴图
texture = new THREE.TextureLoader().load('/img/arrow.jpeg') texture.wrapS = texture.wrapT = THREE.RepeatWrapping // CHANGED texture.repeat.set(0.1, 0.1) // CHANGED原创 2021-09-26 11:35:21 · 396 阅读 · 0 评论 -
让一个模型围绕自己的轴心旋转
// 1、先获取geometey的中心点位置并留存 const center = new THREE.Vector3() this.modelObj0.geometry.computeBoundingBox() this.modelObj0.geometry.boundingBox.getCenter(center) const x = center.x const y = center.y const z...原创 2021-09-26 11:24:23 · 411 阅读 · 0 评论 -
解决vue多个页面组件在来回切换时,模型运动疯狂掉帧的bug
个人亲测,方法有效!bug原因(均为个人猜测,有不同意见欢迎评论区提出):我们在创建threejs 3D场景时,往往会有这么一个函数: render () { requestAnimationFrame(this.render) this.renderer.render(this.scene, this.camera) }其中 requestAnimationFrame(this.render) 会让render函数不停地自身调用自身,即使切换到不同的vue原创 2021-09-26 11:02:19 · 1279 阅读 · 1 评论 -
threejs---同一页面多个模型之间的切换(基于vue)
使用场景:1、由厂区外部切换到厂区内部2、左侧切换模型,右侧进行不同模型的预览实现逻辑:1、先清空当前scene下的所有children2、清空canvas画布3、重置变量4、重新初始化场景,向scene添加新的children具体代码: methods: refresh(){ //1、清空旧的scene下的children this.clearModel() //2、重新初始化场景,加载新的模型场景 this.init() }, cle原创 2021-09-26 10:30:22 · 3787 阅读 · 3 评论 -
threejs-GUI的使用(基于vue)
1、引入插件原创 2021-09-24 14:32:15 · 2010 阅读 · 0 评论 -
threejs-控件的监听事件
以MapControl控件为例:import { OrbitControls, MapControls } from 'three/examples/jsm/controls/OrbitControls'this.controls = new MapControls(this.camera, this.renderer.domElement)this.controls.enableDamping = true // 开启动态阻尼this.controls.dampingFactor = 0.30原创 2021-09-22 16:27:54 · 1543 阅读 · 0 评论 -
threejs---第一人称控件 PointerLockControls
123原创 2021-09-22 16:20:29 · 2739 阅读 · 8 评论 -
threejs--BufferGeometry、CatmullRomCurve3创建样条曲线
效果图:实现代码: this.curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-347, 50, -520), new THREE.Vector3(-347, 50, 35), new THREE.Vector3(-347, 50, 56), new THREE.Vector3(-364, 50, 52), new THREE.Vector3(-406, 50, 33),原创 2021-09-10 09:19:04 · 520 阅读 · 0 评论 -
threejs--BufferGeometry创建线条
效果图:代码实现:方法一: const pointArr = new Float32Array([ -347, 50, -520, -347, 50, 127, -345, 50, 145, -339, 50, 185, -284, 50, 270, -71, 50, 543 ]) const geometry = new THREE.BufferGeometry()原创 2021-09-09 14:41:32 · 1333 阅读 · 0 评论 -
Three.js中的raycaster射线获取不准确问题
大佬原博地址:https://blog.csdn.net/hard_reward/article/details/107859968转载 2021-08-23 11:20:18 · 1013 阅读 · 0 评论 -
tweenjs-移动threejs中的物体
效果图方法一:<el-button type="primary" @click="action">开始运动</el-button>methods:action(){ var position = { x: -50, y: 0 } // 物体变动前的位置 var target = { x: 400, y: 50 } // 物体变动后的位置 var tween = new TWEEN.Tween(position).to(target, 200原创 2021-08-17 16:45:38 · 815 阅读 · 0 评论 -
tweenjs-实现threejs的转场动画(基于vue)
注意!文章主讲tweenjs的使用,省去了threejs部分的代码,请自行添加!参考博文链式补间:tween.chain如果有多组补间动画,想要a组动画结束后立即启动b组动画,则需要使用tweena.chain(tweenb)效果图:1、引入tweenjsimport * as TWEEN from '@/assets/js/Tween'2、使用<el-button @click="action">开始运动</el-button>data:p1: { x:原创 2021-08-17 14:43:54 · 1834 阅读 · 3 评论