【Three.js】十二、three.js摄像机控件

最新推荐文章于 2023-09-27 17:44:14 发布
最新推荐文章于 2023-09-27 17:44:14 发布
阅读量818 收藏 4
点赞数
分类专栏： 【WebGL】Three.js 文章标签： three.js WebGL 3D 摄像机控制器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33635385/article/details/101721390
版权

【Three.js】十二、three.js摄像机控件

一、FirstPersonControls

第一人称控制器，类似fps射击类游戏视角。

控制方法：

操控效果
移动鼠标向四周看
上、下、左、右方向键向前、后、左、右移动视角
W向前移动
A向左移动
D向右移动
S向后移动
R向上移动
F向下移动

使用：

	import {FirstPersonControls} from '../../libs/contorls/FirstPersonControls'

	let controls = new FirstPersonControls(camera);
    controls.lookSpeed = 0.2; //鼠标移动查看的速度
    controls.movementSpeed = 30; //相机移动速度
    controls.noFly = true;
    controls.constrainVertical = true; //约束垂直
    controls.verticalMin = 1.0;
    controls.verticalMax = 2.0;
    controls.lon = 0; //进入初始视角x轴的角度
    controls.lat = 0; //初始视角进入后y轴的角度

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {FirstPersonControls} from '../../libs/contorls/FirstPersonControls'
import {initTrackballControls, initThree, initStats} from "../../util/util"

function init() {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();
    camera.far = 5000;
    camera.position.set(0, 110, 0);

    let light = new THREE.SpotLight(0xffffff);
    light.shadow.mapSize.set(2048, 2048);
    light.castShadow = true;
    light.position.set(-700, 440, 730);
    scene.add(light);

    let ambientLight = new THREE.AmbientLight(0xdddddd, 0.4);
    scene.add(ambientLight);

    let planeGeometry = new THREE.PlaneBufferGeometry(14000, 10000);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    let getBoxes = () => {
        for (let i = 0; i < 300; i++) {
            let boxGeometry = new THREE.BoxBufferGeometry(20, Math.round(Math.random()*100 + 50), 20);
            let boxMaterial = new THREE.MeshLambertMaterial({
                color: new THREE.Color(Math.random(), Math.random(), Math.random()),
                transparent: true,
                opacity: 0.7
            });
            let box = new THREE.Mesh(boxGeometry, boxMaterial);
            box.position.set(Math.random()*-1390 + 690, box.geometry.parameters.height/2, Math.random()*-990 + 490);
            scene.add(box);
        }
    };
    getBoxes();

    let controls = new FirstPersonControls(camera, document.body);
    controls.lookSpeed = 0.2; //鼠标移动查看的速度
    controls.movementSpeed = 30; //相机移动速度
    controls.noFly = true;
    controls.constrainVertical = true; //约束垂直
    controls.verticalMin = 1.0;
    controls.verticalMax = 2.0;
    controls.lon = 0; //进入初始视角x轴的角度
    controls.lat = 0; //初始视角进入后y轴的角度

    let clock = new THREE.Clock();
    let render = () => {
        stats.update();
        controls.update(clock.getDelta());
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    };
    window.addEventListener('resize', onWindowResize, false);

    function onWindowResize () {
        camera.aspect = window.innerWidth / window.innerHeight;
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.updateProjectionMatrix();
        stats.update();

    }
    render();
}

init();

在这里插入图片描述
完整示例(src/pages/three_FirstPersonContorls_demo):https://github.com/MAXLZ1/threejs_demo

二、FlyControls

飞行控制器

操作方法：

操控效果
按住鼠标左键和中键向前移动
按住鼠标右键向后移动
移动鼠标向周围看
W向前移动
A向左移动
S向后移动
D向右移动
R向上移动
F向下移动
Q向左翻滚
E向右翻滚
上、下、左、右键向上、下、左、右看

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import { initThree, initStats} from "../../util/util"
import {OBJLoader} from "../../libs/loaders/OBJLoader"
import {FlyControls} from "../../libs/contorls/FlyControls"

function init (){
    let stats = initStats();
    let {scene, camera, renderer} = initThree();
    camera.position.set(-100, 10, 90);

    let spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-300, 300, 130);
    scene.add(spotLight);

    let loader = new OBJLoader();
    loader.load('../../static/modules/city/city.obj', (obj) => {
        setRandomColors(obj);
        scene.add(obj);
    });

    let controls = new FlyControls(camera, renderer.domElement);
    controls.rollSpeed = Math.PI / 12; // 翻滚速度
    controls.autoForward = true; //自动向前移动
    controls.dragToLook = false;
    controls.movementSpeed = 25;
    let clock = new THREE.Clock();

    let render = () => {
        stats.update();
        controls.update(clock.getDelta());
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    };
    render();
}

function setRandomColors(object) {
    let children = object.children;
    if (children && children.length > 0) {
        children.forEach(function (e) {
            setRandomColors(e)
        });
    } else {
        if (object.type === 'Mesh') {
            if (object.material instanceof Array) {
                object.material.forEach(function(m) {
                    m.color = new THREE.Color(Math.random(),Math.random(),Math.random());
                    if (m.name.indexOf("building") == 0) {
                        m.emissive = new THREE.Color(0x444444);
                        m.transparent = true;
                        m.opacity = 0.8;
                    }
                });
            } else {
                object.material.color = new THREE.Color(Math.random(),Math.random(),Math.random());
                if (object.material.name.indexOf("building") == 0) {
                    object.material.emissive = new THREE.Color(0x444444);
                    object.material.transparent = true;
                    object.material.opacity = 0.8;
                }
            }
        }
    }
}

init();

在这里插入图片描述
完整示例(src/pages/three_FlyControls_demo):https://github.com/MAXLZ1/threejs_demo

三、TrackballControls

轨迹球控制器

操作方法：

操控效果
按住鼠标左键，拖动摄像机在场景中旋转和翻滚
转动鼠标滚轮放大和缩小

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initThree, initStats} from "../../util/util"
import {TrackballControls} from "../../libs/contorls/TrackballControls"

function init () {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    camera.position.set(400,400,400);

    let ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);

    let addObjs = () => {
        for (let i = 0; i < 300; i++) {
            let boxGeometry = new THREE.BoxBufferGeometry(Math.random()*10+10, Math.random()*10 + 5,Math.random()*10 + 2);
            let boxMaterial = new THREE.MeshLambertMaterial({
                color: new THREE.Color(Math.random(), Math.random(), Math.random())
            });
            let box = new THREE.Mesh(boxGeometry, boxMaterial);
            box.position.set(Math.random()*300 - 150, Math.random()*300 - 150, Math.random()*300 - 150);
            box.castShadow = true;
            scene.add(box);
        }
    };

    addObjs();

    let controls = new TrackballControls(camera, renderer.domElement);
    // 旋转速度
    controls.rotateSpeed = 2.0;
    // 变焦速度
    controls.zoomSpeed = 2.2;
    // 平移速度
    controls.panSpeed = 1.8;
    // 是否不缩放
    controls.noZoom = false;
    // 是否不平移
    controls.noPan = false;
    // 是否开启移动惯性
    controls.staticMoving = true;
    // 动态阻尼系数 就是灵敏度
    controls.dynamicDampingFactor = 0.3;
    // 设置最大距离
    controls.maxDistance = 600;

    let render = () => {
        stats.update();
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    };
    render();
}

init();

在这里插入图片描述
完整示例(src/pages/three_TrackBallControls_demo):https://github.com/MAXLZ1/threejs_demo

四、OrbitControls

轨道控制器

操作方法：

操控效果
按住鼠标左键并移动摄像机围绕场景中心旋转
旋转鼠标滑轮放大或缩小
按住鼠标右键移动场景中平移
上、下、左、右方向键上、下、左、右平移

示例

	let controls = new OrbitControls(camera, renderer.domElement);
    // 设置最大距离
    controls.maxDistance = 600;
    // 设置自动旋转
    controls.autoRotate = true;
    // 设置自动旋转速度
    controls.autoRotateSpeed = 2.0;

在这里插入图片描述
完整示例(src/pages/three_OrbitControls_demo):https://github.com/MAXLZ1/threejs_demo

MAXLZ
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
摄像头控件
03-19
这个准对IE8.0浏览器无法视频摄像头拍照的控件
海康摄像机ActiveX控件（ocx控件）
03-23
海康视屏ocx控件，最新版本，可通过web访问，也可能过集成到软件中使用
threejs平滑地移动相机的位置，将其逐渐接近目标点位置(tweemjs)
Kino的博客
07-04 3049
注：这里需要在requestAnimationFrame内调用TWEEN.update();一、npm安装tweemjs。二、引入tweemjs。
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
热门推荐
一个咸鱼的博客
12-13 1万+
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
【FirstPersonControls】2021-r126版three.js中FirstPersonControls类的源码学习
亦何妨的博客
04-24 809
【FirstPersonControls】2021-r126版three.js中FirstPersonControls类的源码学习 这里写目录标题【FirstPersonControls】2021-r126版three.js中FirstPersonControls类的源码学习1、构造函数2、属性2.1 布尔类型2.2 浮点型2.3 其他3、方法 1、构造函数 看下构造函数，传入参数有两个，第一个代表该控制器控制的相机，第二个代表渲染到的目标canvas元素。（源码里不止这点属性，先贴这一小块后面再分析属性，
threejs让摄像机动起来
weixin_43841400的博客
06-29 1385
在webGL中文网学习threejs基础篇——让物体动起来中的第一个demo，入门到思考的路程（项目由vue编写） 一、初入——直接使用课程中的例子 <template> <div id='demo3' class='demo'></div> </template> <script> import * as THREE from ...
three.js基础01（创建一个场景并实现鼠标拖动摄像机，不同角度观看物体）
m0_64684712的博客
09-27 471
【代码】three.js基础01（创建一个场景并实现鼠标拖动摄像机，不同角度观看物体）
海康摄像头OCX控件（2015）exe安装集成版+网页demo
01-22
海康威视的摄像头在网页中进行集成时候需要安装OCX控件，此资源为exe版本，安装之后打开index.html这个demo文件。会提示下载安装cab，再次点击安装，即可使用。index.html这个demo中提供了海康摄像头集成的大部分功能，为大家提供参考。
海康威视摄像机实时回放ocx控件
11-01
自己开发的海康威视摄像机实时回放OCX控件，基于海康威视“设备网络SDK_V5.1.3.5(for Windows32”开发，版本号：V5.1.3.5 build20150701。 下载链接： http://download.hikvision.com/UploadFile/SDK/CH-HCNetSDK(Windows32)V5.1.3.5_build20150701.zip
VB海康摄像机实时预览控件
08-07
自己用VB封装的控件，有使用源码，控件要注册，要将dll控件拷贝到 system32目录。
大华硬盘录像机ocx控件开发包
04-16
大华硬盘录像机ocx控件开发包，htm格式demo，方便直接集成到网页中，测试可用。
Three.js-webgl物联网粮仓3D可视化
最新发布
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
three.js和高德地图结合引入obj格式模型.zip
06-27
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
Three.js实战常用技巧
04-27
分享课程——Three.js实战常用技巧视频教程，课程一共12章，140多节，结合了很多实战案例，课程主要针对three.js实际开发中常用的一些技巧进行讲解，提供有配套的源码和文档资料下载！希望对那些想提升Three.js技能...
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
three.js多相机技术
03-17
由于一个渲染器（renderer）对应一个相机（camera），当需要多个视图时会消耗大量内存； 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗； 内涵代码和思路文档
three.js之让物体动起来方式（一）移动摄像机
aaronthon的博客
06-05 3233
three.js之让物体动起来方式（一）移动摄像机 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> &l...
three.js中关于摄影机
qq_39966730的博客
08-10 608
three.js中关于摄影机
Three.js -相机平滑移动
weixin_46369590的博客
07-07 1824
最后不要忘了在render中执行。
three.js摄像机远近设置
08-03
在Three.js中，摄像机的远近设置是通过构造函数的参数来实现的。透视摄像机的远近设置由两个参数决定：near（近面距离）和far（远面距离）。near参数定义了从摄像机位置开始渲染的距离，而far参数定义了摄像机能够看到的最远距离。通常情况下，我们会将近面距离设置为一个较小的值（如0.1），将远面距离设置为一个较大的值（如1000），以确保能够看到场景中的所有物体。例如，使用透视摄像机的构造函数可以这样设置：new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000)。其中，fov表示视场，aspect表示渲染结果的横向尺寸和纵向尺寸的比值。而正交摄像机的远近设置则是通过修改camera.left、camera.right、camera.top和camera.bottom来实现的。例如，使用正交摄像机的构造函数可以这样设置：new THREE.OrthographicCamera(left, right, top, bottom, near, far)。其中，left、right、top和bottom定义了摄像机的可见范围。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MAXLZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值