Three.js第三章——透视投影相机

这篇具有很好参考价值的文章主要介绍了Three.js第三章——透视投影相机。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

three.perspectivecamera,数码相机

一、透视投影相机(PerspectiveCamera )

        Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera (opens new window)

        透视投影相机 PerspectiveCamera 本质上就是在模拟人眼观察这个世界的规律。

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

二、相机位置 

        生活中用相机拍照,你相机位置不同,拍照结果也不同,threejs中虚拟相机同样如此。比如有一间房子,你拿着相机站在房间里面,看到的是房间内部,站在房子外面看到的是房子外面效果。

        相机对象Camera具有位置属性.position,通过位置属性.position可以设置相机的位置。

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200); 

三、相机观察目标

        你用相机拍照你需要控制相机的拍照目标,具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言,就是设置.lookAt()方法的参数,指定一个3D坐标。

three.perspectivecamera,数码相机 

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点
camera.lookAt(0, 10, 0);  //y轴上位置10
camera.lookAt(mesh.position);//指向mesh对应的位置

四、判断相机相对三维场景中长方体位置

        你可以把三维场景中长方体mesh想象为一个房间,然后根据相机位置和长方体位置尺寸对比,判断两者相对位置。你可以发现设置相机坐标(200, 200, 200),位于长方体外面一处位置。

three.perspectivecamera,数码相机 

// 长方体尺寸100, 100, 100
const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const mesh = new THREE.Mesh(geometry,material);
// 网格模型位置xyz坐标:0,10,0
mesh.position.set(0,10,0);
// 相机位置xyz坐标:200, 200, 200
camera.position.set(200, 200, 200); 

 五、透视投影相机PerspectiveCamera:视锥体

        透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间,被称为视锥体,只有视锥体之内的物体,才会渲染出来,视锥体范围之外的物体不会显示在Canvas画布上。

three.perspectivecamera,数码相机

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 70:视场角度, width / height:Canvas画布宽高比, 0.1:近裁截面, 1000:远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 1000);

六、三维坐标系-加强三维空间认识

 (一)辅助观察坐标系

three.perspectivecamera,数码相机

// AxesHelper:辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

(二) 材质半透明设置——更清晰

three.perspectivecamera,数码相机

(三)AxesHelper的xyz轴

        设置模型在坐标系中的位置

// 设置模型mesh的xyz坐标
mesh.position.set(200,100,0);

         设置相机在坐标系中的位置

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200); 
camera.lookAt(0,0,0);

 七、完整代码。

three.perspectivecamera,数码相机

<script setup>
import * as THREE from 'three';

const width = 1000, height = 400;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 1000 );
//camera.position.z = 2;
//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200); 
camera.lookAt(0,0,0);

const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const material = new THREE.MeshNormalMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent:true,//开启透明
    opacity:0.5,//设置透明度
});

const mesh = new THREE.Mesh( geometry, material );

//设置网格模型在三维空间中的位置坐标,默认是坐标原点
// 设置模型mesh的xyz坐标
mesh.position.set(200,100,0);

// AxesHelper:辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);


scene.add( mesh );
scene.add(axesHelper);

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {
	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
	renderer.render( scene, camera );
}
animation()
</script>

<template>
    <div></div>
</template>

<style></style>

 文章来源地址https://www.toymoban.com/news/detail-861593.html

 

到了这里,关于Three.js第三章——透视投影相机的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

    在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例,以此为前提,本篇将引进一个控制器的概念并使用”轨道控制器”(OrbitControls)来达到从不同方向展示场景内容的效果。 Three.js的控制器 three.js的核

    2024年02月04日
    浏览(24)
  • Three.js -相机平滑移动

    一、安装 二、引入 三、使用 最后不要忘了在render中执行 TWEEN.update();

    2024年02月13日
    浏览(16)
  • Three.js设置相机lookAt无效

    原因:代码中使用了OrbitControls轨道控件来控制相机,这个目标默认为THREE.Vector3(),也就是(0, 0, 0)世界坐标的原点。使用camera.lookAt会无效。 源代码片段: 解决方法: 将 camera.lookAt(100, 0, 100) 改为: 这篇博文写的很详细: https://blog.csdn.net/ithanmang/article/details/82735273

    2024年02月06日
    浏览(13)
  • 第三章认识Node.js模块化开发

    目录 认识Node.js 概述 作用 基本使用 Node.js的运行 Node.js的组成 Node.js的语法 Node.js全局对象 认识模块化开发 概述 场景 特点 模块成员的导入和导出 Node.js 模块化语法 导入模块 导出模块 ES6 模块化语法 导入模块 导出模块 项目 认识Node.js 概述 Node.js是一个 开源的、跨平台 的

    2024年02月06日
    浏览(13)
  • JS深入学习笔记 - 第三章.变量作用域与内存

    1.原始值和引用值 ECMScript变量包含两种不同类型是数据:原始值和引用值。 原始值:最简单的数据。有6中原始值:Undefined、Null、Boolean、Number、String和Symbol。原始值是按值访问。 引用值:由多个值构成的对象。三大引用类型:1.object 2.Array类型 3.Function类型。引用值是保存在

    2024年02月08日
    浏览(15)
  • three.js 使用 tweenjs绘制相机运动动画

    效果: 代码:  

    2024年01月18日
    浏览(18)
  • three.js 点按钮,相机飞行靠近观察设备

    效果: 点击按钮或直接点击模型都可以实现运动效果  代码:

    2024年01月18日
    浏览(14)
  • three.js入门二:相机的zoom参数

    环境: threejs:129 (在浏览器的控制台下输入: window.__THREE__即可查看版本) vscode window edge 透视相机或正交相机都有一个zoom参数,它可以用来将相机排到的内容在canvas上缩放显示。 要点: 设置zoom后要调用 camera.updateProjectionMatrix(); zoom默认是1,它的取值就像是手机拍照一样

    2024年02月15日
    浏览(10)
  • Three.JS教程1 环境搭建、场景与相机

    Three.js 是一款基于JavaScript的开源3D图形库,它简化了在Web上创建复杂的3D场景和动画的过程。 Three.js 由Ricardo Cabello(也称为mr.doob)于2010年创建,最初是为了填补WebGL技术在那个时候的不足而设计的。随着WebGL的普及和浏览器性能的提升,Three.js逐渐成为Web上3D图形编程的事实标

    2024年01月25日
    浏览(12)
  • Three.js之相机、渲染器、光源、动画、性能监测

    第一个3D案例—透视投影相机 第一个3D案例—渲染器 … Canvas画布布局和全屏 透视投影相机PerspectiveCamera WebGL渲染器WebGLRenderer 辅助观察坐标系AxesHelper 漫反射网格材质MeshLambertMaterial 点光源PointLight 点光源辅助观察PointLightHelper 环境光AmbientLight 平行光DirectionalLight 平行光辅助观

    2024年02月13日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包