webgl+three.js中如何设置模型与相机的相对位置

1、将模型,场景,点云加入camera场景中,camera.add(object),然后object.position.set(0,0,10),这样模型的位置总是相对于相机的z轴正10位置。

注意,我在实习中,用camera.add(model); scene.add(camera)在我的电脑无报错,在前端的电脑就报错,受环境影响,需要灵活变换。用中间变量加入camera中,操作如下:

camera.add(temp);
temp.position.x =0;
temp.position.y =1;
temp.position.z =0;//永远放在相机的y方向1处
temp.getWorldPosition(model.position);//将上面的本地坐标转化为世界坐标,并且赋值给模型,这样就可以直接渲染了
scene.add(model);

2、另一种方法是找到相机的前向矢量,可以编写'pLight.position = camera.position + camForwardVec * distance;'。

3、还有一种比较笨的方法,就是比较现在和上一次位置移动的情况,x变得比y变得多就是在x轴上移动,同理yz。不过这一种方法仅限于移动位置局限性比较大的情况,比如道路场景判断汽车移动的方向。

            let tempX = targetPosition1.x - targetPosition.x; //现在位置和上一次位置相减
            let tempY = targetPosition1.y - targetPosition.y;
            let abTempX = tempX > 0? tempX:-tempX;  //绝对值,用来判断沿着x轴还是y轴
            let abTempY = tempY > 0? tempY:-tempY;
            if(abTempX>abTempY && tempX>0)
            {
                forwardMode = 0;  //沿x轴正方向移动
            }
            else if(abTempX>abTempY &&tempX<0)
            {
                forwardMode = 1;  //沿x轴负方向移动
            }
            else if(abTempX<abTempY && tempY>0)
            {
                forwardMode = 2;  //沿y轴正方向移动
            }
            else if(abTempX<abTempY && tempY<0)
            {
                forwardMode = 3;  //沿y轴负方向移动
            }

三种方法实测有效并根据不同的场景运用不同的方法,欢迎补充

"pan.baidu.com\ webgl three.js入门与实战" 是一个涉及到网页图形技术 WebGL 和三维图形库 three.js 的学习和实践教程。 首先,WebGL 是一种基于 HTML5 的图形引擎,允许在网页实现高性能的图形渲染。通过使用 WebGL,开发者可以在浏览器创建出具有逼真效果和交互性的三维图形。因此,学习 Webgl 可以帮助我们理解如何构建出精美的图形界面。 而 three.js 是一种基于 WebGL 的开源 JavaScript 3D 渲染库,为开发者提供了简化创建和渲染三维图形的方法和功能。它提供了丰富的内置函数和类,使得开发者可以轻松地创建出复杂的场景、模型和动画。因此,学习和掌握 Three.js 可以让我们更高效地开发出出色的 WebGL 三维图形项目。 "pan.baidu.com\webgl three.js入门与实战" 这个教程可能包含以下内容:介绍 WebGL 技术的基础知识和概念,如绘制图形的渲染管线、顶点着色器和片元着色器等。同时,它也会介绍如何使用 Three.js 库来简化代码的编写,实现鼠标交互、相机控制和灯光效果等。 在实战部分,教程可能会提供一些具体的案例和项目,让学习者通过实际动手操作来加深对 WebGLThree.js 的理解和掌握。这些实战项目可能包括创建一个简单的三维场景、导入和展示三维模型、实现纹理贴图和光照效果等。 总的来说,"pan.baidu.com\webgl three.js入门与实战" 是一个为初学者提供学习和实践 WebGLThree.js 技术的教程。通过学习这个教程,我们可以掌握 WebGL 技术的基础知识和概念,并且学会使用 Three.js 库来创建出精美的三维图形网页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值