Three.Camera

Camera是所有相机的抽象基类, 在构建新摄像机时,应始终继承此类. 常见的相机有两种类型: PerspectiveCamera(透视摄像机)或者 OrthographicCamera(正交摄像机)。

Camera子类型有ArrayCamera, CubeCamera, OrthographicCamera, PerspectiveCamera, StereoCamera, 这些相机中, 我认为比较有趣的是CubeCamera, 它包含6个PerspectiveCameras(透视摄像机)的立方摄像机, 拍出来的照片可以作为贴图使用, 先看看它的效果吧 !

1. CubeCamera

整个环境成为了球的表面, 这个功能是不是很容易扩展呢. 将环境放在任意物体上, 还十分炫酷

步骤

1. 创建cubeCamera

     //cubeCamera
cubeCamera = new THREE.CubeCamera(1, 10000, 128);
scene.add(cubeCamera);

说明: CubeCamera( near : Number, far : Number, cubeResolution : Number )

near -- 远剪切面的距离
far -- 近剪切面的距离
cubeResolution -- 设置立方体边缘的长度

2. 创建物体表面材质并将cubeCamera照出的环境作为材质的贴图

     material = new THREE.MeshBasicMaterial( {
envMap: cubeCamera.renderTarget.texture
} );

3. 创建物体, 将第二步的材质赋予物体

     let sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
scene.add( sphere );

4. 更新材质贴图内容

     cubeCamera.update( renderer, scene );

那么, 带有环境的物体就做好了, 是不是很想试一试呀!

2. perspectiveCamera

这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式。

使用时需要注意: 在PerspectiveCamera大多数属性发生改变之后,需要调用.updateProjectionMatrix来使得这些改变生效。

相机的使用步骤都十分类似, 第一步, 写构造函数, 第二步, 改变位置, 第三步, 添加至场景, 第四步, 改变相机位置.

对于perspectiveCamera, 它的特点是像人眼, 距离越远, 物体越小, 它与OrthographicCamera最大的区别就在于此, OrthographicCamera看到的物体无论距离多远, 物体看上去的大小一样.

使用流程

     //1.创建相机
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
//2.添加相机至场景
scene.add(camera);
//3.改变相机位置
camera.position.set( 100, 50, 150);
//4.改变相机朝向
camera.lookAt(scene.position);

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

注意点: renderer.render(scene, camera);

在渲染时, 参数选中的camera就相当于眼睛了, 选中哪个哪个就是眼睛.

效果如第一张图片所示, 看到的是透视相机拍出来的

3. OrthographicCamera

注意它的构造函数就行, 其他与PerspectiveCamera类似

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

4. ArrayCamera与StereoCamera

这两种我还没使用过, 这里就简单描述下, 后面用到了再补充

ArrayCamera 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能。
一个 ArrayCamera 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义viewport(边界)这个属性,这一属性决定了由该子摄像机所渲染的视口区域的大小。

双透视摄像机(立体相机)常被用于创建3D Anaglyph(3D立体影像)或者Parallax Barrier(视差效果)。

5. 总结

相机想使用不难, 如何灵活运用相机达到想要的效果就比较难了

6. 代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style> </head>
<body>
<script src="/js/three.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/libs/stats.min.js"></script>
<script src="/js/libs/inflate.min.js"></script>
<script src="/js/loaders/FBXLoader.js"></script>
<script src="/js/exporters/GLTFExporter.js"></script>
<script>
let renderer, scene, camera, light, cubeCamera; let container, stats; init();
animation(); function init() {
//container
container = document.createElement("div");
document.body.appendChild(container); //status
stats = new Stats();
container.appendChild(stats.domElement); //renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
container.appendChild(renderer.domElement); //scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcce0ff );
scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 ); //3_相机
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight);
scene.add(camera);
camera.position.set( 100, 50, 150);
camera.lookAt(scene.position); //cubeCamera
cubeCamera = new THREE.CubeCamera(1, 10000, 128);
scene.add(cubeCamera); material = new THREE.MeshBasicMaterial( {
envMap: cubeCamera.renderTarget.texture
} ); //
let sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
scene.add( sphere );
let geometry = new THREE.BoxGeometry( 1, 1, 1 );
let meterial2 = new THREE.MeshBasicMaterial( {
vertexColors: THREE.VertexColors,
// wireframe: true
});
let cube = new THREE.Mesh(
geometry,
meterial2
);
geometry.faces.forEach(face => {
// 设置三角面face三个顶点的颜色
face.vertexColors = [
new THREE.Color(0xffff00),
new THREE.Color(0x0000ff),
new THREE.Color(0x00ff00),
]
});
scene.add(cube); // light
scene.add( new THREE.AmbientLight( 0x666666 ) ); light = new THREE.DirectionalLight( 0xdfebff, 1 );
light.position.set( 50, 200, 100 );
light.position.multiplyScalar( 1.3 ); light.castShadow = true; light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024; let d = 300;
light.shadow.camera.left = - d;
light.shadow.camera.right = d;
light.shadow.camera.top = d;
light.shadow.camera.bottom = - d; light.shadow.camera.far = 1000; scene.add( light ); // ground
var loader = new THREE.TextureLoader();
var groundTexture = loader.load( '/textures/terrain/grasslight-big.jpg' );
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 25, 25 );
groundTexture.anisotropy = 16; var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } ); var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
mesh.position.y = - 250;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh ); //辅助工具
// scene.add(new THREE.AxesHelper(20)); // controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// controls.maxPolarAngle = Math.PI * 0.5;
// controls.minDistance = 1000;
// controls.maxDistance = 5000; } function animation(){
stats.update();
cubeCamera.update( renderer, scene );
render();
requestAnimationFrame(animation);
} function render() { renderer.render(scene, camera); }
</script>
</body>
</html>

three.js学习3_相机相关的更多相关文章

  1. Three.js学习(相机,场景,渲染,形状)

    相机分为透视相机和正交相机(还有第三人称相机不介绍). var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...

  2. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  3. 我的three.js学习记录(二)

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  4. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  5. ThreeJS学习6_几何体相关(BufferGeometry)

    ThreeJS学习6_几何体相关(BufferGeometry) 使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销 可以自定义顶点位置, 面片索引, 法向量, ...

  6. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  7. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  8. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

随机推荐

  1. Pytorch_第十篇_卷积神经网络(CNN)概述

    卷积神经网络(CNN)概述 Introduce 卷积神经网络(convolutional neural networks),简称CNN.卷积神经网络相比于人工神经网络而言更适合于图像识别.语音识别等任 ...

  2. C# 中生成随机数

    生成1-100之间的随机数: new Random().Next(1, 100) 但是输出的结果是一样的,因为Random调用无参的构造函数其实调用的是 有参的构造函数,传递的 默认值: Enviro ...

  3. 精讲响应式WebClient第3篇-POST、DELETE、PUT方法使用

    本文是精讲响应式WebClient第3篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方 ...

  4. 第5篇 Scrum 冲刺博客

    1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 完成技能 完全重构游戏逻辑代码,并编写调试模块 队友的代码已经和想法相去甚远 庄诗楷 制作了开始游戏的界面 进行了相关的 ...

  5. 华为云配置Objected-based Storage System

    本实验要求基于开源的对象文件系统(例如Ceph),搭建视频点播(VoD)网站.可参考使用Ceph, wordpress, php 以及nginx 实现相关功能,主要包含以下方面: 配置Ceph; 配置 ...

  6. Docker 学习笔记(一)

    Docker 入门 Docker 学习 概述 安装 命令 镜像命令 容器命令 操作命令 Docker 镜像 容器数据卷 DockerFile Docker网络原理 IDEA 整合Docker 单机版D ...

  7. Java中的 "==" 和 "equals" 区别

    分析 "==" 和 "equals" 区别的时候先了解一下Java的内存. Java内存 “==” 和  “equals” 区别” “==”: “==”比较的是 ...

  8. 2020,6招玩转 Appium 自动化测试

    Appium是个什么鬼 Appium是一个移动端的自动化框架,可用于测试原生应用,移动网页应用和混合型应用,且是跨平台的.可用于IOS和Android以及firefox的操作系统.原生的应用是指用an ...

  9. 面经手册 · 第8篇《LinkedList插入速度比ArrayList快?你确定吗?》

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你以为考你个数据结构是要造火箭? 汽车75马力就够奔跑了,那你怎么还想要2.0涡轮+ ...

  10. JAVA中 错误代码是 the public type must be defined in its own file 解决方法 android开发 java编程

    一般是由于定义的JAVA类同文件名不一致: 解决方法: 1.把文件名修改同XYZ一样的名字: 2.把类名修改成同文件名: