精华内容
下载资源
问答
  • threejs 相机

    2019-01-23 10:35:28
    参考: http://www.yanhuangxueyuan.com/Three.js_course/camera.html //创建场景对象 var scene = new THREE.Scene(); //创建一个立方体几何对象 var box = new THREE.BoxGeometry(100, 100, 100); //材...

    参考: http://www.yanhuangxueyuan.com/Three.js_course/camera.html

          //创建场景对象
          var scene = new THREE.Scene();
          //创建一个立方体几何对象
          var box = new THREE.BoxGeometry(100, 100, 100);
          //材质对象
          var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff,
            opacity: 0.5,
            transparent: true
            });
          //网格模型对象
          var mesh = new THREE.Mesh(box, material);
          //网格模型添加到场景中
          scene.add(mesh);
    
          //点光源
          var point = new THREE.PointLight(0xffffff);
          //点光源位置
          point.position.set(400, 200, 300);
          //点光源添加到场景中
          scene.add(point);
    
          //环境光
          var ambient=new THREE.AmbientLight(0x444444);
          scene.add(ambient);
    
          var width = window.innerWidth;
          var height = window.innerHeight;
          //窗口宽高比
          var k = width / height;
          //三维场景缩放系数
          var s = 150;
          //创建相机对象
          // OrthographicCamera( left, right, top, bottom, near, far )
          var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
          // PerspectiveCamera( fov, aspect, near, far )
          // var camera=new THREE.PerspectiveCamera(45, width/height, 1, 1000);
          //设置相机位置
          camera.position.set(200, 300, 200);
          //设置相机方向(指向的场景对象)
          camera.lookAt(scene.position);
          
          // 创建渲染器对象
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize(width, height);
          //设置背景颜色
          renderer.setClearColor(0xb9d3ff, 1);
          document.body.appendChild(renderer.domElement);
          //执行渲染操作
          renderer.render(scene, camera);

     

    展开全文
  • 模拟ThreeJS相机

    2020-01-11 18:44:11
    WebGL 对于我来说操作太繁琐了; ThreeJS太方便了,但是相关的数学计算也封装起来了, 但是这一部分又很重要,所以通过ThreeJS 来学习底层相机的实现。...模拟ThreeJS相机 1、着色器代码 glsl.fragmentShader.js export ...

    WebGL 对于我来说操作太繁琐了;
    ThreeJS太方便了,但是相关的数学计算也封装起来了,
    但是这一部分又很重要,所以通过ThreeJS 来学习底层相机的实现。

    这是一篇学习笔记,学习的内容出自:代码,教程。更多的代码也来自ThreeJS库。

    WebGL本不存在相机,想的多了也就有了。

    模拟ThreeJS相机

    1、着色器代码

    glsl.fragmentShader.js

    export let fragmentShader = `
    uniform vec3 color;
    void main() {
     // 给此片元的颜色值
     gl_FragColor = vec4(color,1.0);
    }
    `
    

    glsl.vertexShader.js

    export let vertexShader =
      `
      uniform mat4 myProjectionMatrix;
      uniform mat4 myModelViewMatrix;
      void main() {
          // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
          gl_Position = myProjectionMatrix * myModelViewMatrix *vec4(position,1);
      }
    `
    

    2、自己模拟的相机

    export class PerspectiveCamera {
      constructor({ fov = 50, aspect = 1, near = 0.1, far = 2000, position }) {
        // 世界矩阵
        this.matrixWorld = new Matrix4();
        this.matrixWorldInverse = new Matrix4();
    
        // 局部坐标矩阵
        this.matrix = new Matrix4();
        this.position = new Vector3(position.x, position.y, position.z);
        this.quaternion = new Quaternion();
        this.scale = new Vector3(1, 1, 1);
    
        // 视图模型矩阵
        this.modelViewMatrix = new Matrix4();
    
        // 投影矩阵
        this.projectionMatrix = new Matrix4()
        let top = near * Math.tan(_Math.DEG2RAD * 0.5 * fov)
        let height = 2 * top
        let width = aspect * height
        let left = - 0.5 * width
        this.projectionMatrix.makePerspective(left, left + width, top, top - height, near, far);
        this.updateMatrix()
      }
    
      updateMatrix() {
        this.matrix.compose(this.position, this.quaternion, this.scale);
        this.matrixWorld = this.matrix.clone()
        this.matrixWorldInverse.getInverse(this.matrixWorld);
      }
    
      /**
       * 获取目标对象在相机坐标下的转换矩阵
       * @param {*} obj 被相机观察的目标对象
       */
      getModelViewMatrix(obj) {
        if (!obj) {
          return new Matrix4()
        }
        return this.modelViewMatrix.multiplyMatrices(this.matrixWorldInverse, obj.matrixWorld);
      }
    }
    

    4、使用相机

    class App {
      constructor() {
        ...
        // 新建一个Three.js 的场景stage
        let camera = this.initCamera("#app")
        this.addBox(stage, camera)
        ...
      }
    
      initCamera() {
        // 新建一个自己定义的相机
        let camera = new PerspectiveCamera({
          fov: 45,
          aspect: 1,
          near: 0.1,
          far: 2000,
          position: {
            x: 0,
            y: 0,
            z: 10
          }
        })
        return camera
      }
    
      // 场景中, 增加一个立方体
      addBox(stage, camera) {
        var geometry = new THREE.BoxGeometry(2, 2, 2);
    
        // 把相机矩阵信息传递给着色器
        let uniforms = {
          myProjectionMatrix: {
            type: 'm4',
            value: camera.getProjectionMatrix()
          },
          myModelViewMatrix: {
            type: 'm4',
            value: camera.getModelViewMatrix()
          },
          color: {
            type: "c",
            value: new THREE.Color(0xff0000)
          }
        }
    
        // var material = new THREE.MeshBasicMaterial({
        //   color: 0x00ff7c,
        // });
    
        let material = new THREE.ShaderMaterial({
          uniforms,
          vertexShader: vertexShader,
          fragmentShader: fragmentShader
        });
        var cube = new THREE.Mesh(geometry, material);
        cube.name = "cube"
        stage.scene.add(cube)
    
        // 更新视图模型矩阵
        stage.onUpdate(() => {
          cube.rotation.y -= 0.003
          uniforms.myModelViewMatrix.value = camera.getModelViewMatrix(cube)
        })
        return cube
      }
    }
    
    window.onload = () => {
      new App()
    }
    

    最后效果

    在这里插入图片描述

    完整代码 中的这个: 023-模拟ThreeJS相机。
    如果链接失效应该是项目路径调整,但内容都在。
    <全文结束>

    展开全文
  • threejs 相机旋转

    千次阅读 2019-09-11 19:30:38
    一、实现物体的转动有2种方法 (1)物体本身的转动 cube.rotation.y -= 0.002;...(2)相机的转动一般是围绕着世界坐标的Y轴,并设置相机的lookAt(new THREE.Vector3(0,-100,0)) let t0 = new Date() ...

    一、实现物体的转动有2种方法

    (1)物体本身的转动

    cube.rotation.y -= 0.002;

    (2)相机的转动一般是围绕着世界坐标的Y轴,并设置相机的lookAt(new THREE.Vector3(0,-100,0))

        let t0 = new Date()
        function animate() {
            controls.update();
            let t1 = new Date(); //本次时间
            let t = t1 - t0; // 时间差
    
            //camera.translateX(0.001 * t/3) //沿着Y轴旋转着从大到小
    
            //camera.translateZ(0.001 * t/3) //沿着Z轴由近到远
    
            camera.rotateY(0.0001 * t/3); //物体的均匀从左到又平移可以用相机旋转Y轴来实现
    
            camera.lookAt(scene.position); camera.lookAt与orbitcontrol冲突不能使用,要用下面的controls.target代替
            //controls.target = new THREE.Vector3(0,-100,0);
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }

    虽然上面已经设置了相机的rotateY与lookAt,但是lookAt并没有效果?

    原因是由于引用了OrbitControls控件,相机的lookAt 被OrbitControls控件更改了。

    camera.lookAt()代码要使用 controls.target = new THREE.Vector3(0,-100,0);来替换,就可以更改你想要的视角。但是相机的旋转怎么处理呢?

    控制器有自带的旋转设置

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.autoRotate = true; 

    controls有点像我们的相机。在设置了controls.autoRotate = true; 之后,其实我们并不需要controls.target = new THREE.Vector3(0,-100,0);

    二、相机的旋转和移动,使我们可以做很多有趣的效果

    camera.translateX(0.001 * t/3) //沿着Y轴旋转着从大到小
    camera.translateZ(0.001 * t/3) //沿着Z轴由近到远
    
    camera.rotateY(0.0001 * t/3); //物体均匀的从左到右平移

     

    转载于:https://my.oschina.net/u/2612473/blog/3092894

    展开全文
  • 开始很懵,完全不能理解,有个position,还要up和lookAt干嘛。 既然是位置属性不明白,那默认其它属性都懂...相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样。 camera.l...

     

    开始很懵,完全不能理解,有个position,还要up和lookAt干嘛。

    既然是位置属性不明白,那默认其它属性都懂了。

    上坐标轴:

    先来第一个position属性,可以设置xyz。

    假设设置y为 1000

    position(0,1000,0);

    相机的位置是下图:

    单独设置xz轴都和以上类似,位置z或者x轴某个位置。

    那lookAt,字面上的意思就是,看向哪里。

    相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样。

    camera.lookAt({//相机看向哪个坐标
                        x : 0,
                        y : 0,
                        z : 0
                    });

    以下为实例为 相机看向原点0,0,0。(相机位置position(500,500,1000))

    以下为不设置lookAt

    因为相机的位置在x轴500上,y轴500,z轴1000。默认是看向-z轴,所以只能看到y轴500位置的线条了。

    那up属性又是什么鬼,相机位置代码如下设置情况下:

    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                    camera.position.x = 500;//相机的位置
                    camera.position.y = 500;
                    camera.position.z = 1000;
    //                camera.up.x = 0;//相机以哪个方向为上方
    //                camera.up.y = 1;
    //                camera.up.z = 0;
                    camera.lookAt({//相机看向哪个坐标
                        x : 0,
                        y : 0,
                        z : 0
                    });
    

     

    一切正常。

    加个up属性试试:

    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                    camera.position.x = 500;//相机的位置
                    camera.position.y = 500;
                    camera.position.z = 1000;
                    camera.up.x = 0;//相机以哪个方向为上方
                    camera.up.y = 0;
                    camera.up.z = 1;
                    camera.lookAt({//相机看向哪个坐标
                        x : 0,
                        y : 0,
                        z : 0
                    });
    

    代码设置z轴为1,表示以z轴为相机的上方。(默认y轴为上方)

    就是躺着看,趴着看,侧着看的区别(我是这么认为的)

    还不明白就是,手机正着拍,倒着拍,旋转拍~~~

    来一个正常的属性设置,比较符合常规三维软件的视角:左右为X轴,右为正;前后为Y轴,前为正;上下为Z轴,上为正。

            //创建一个摄像机对象(摄像机决定了能够在场景里看到什么)
            var camera = new THREE.PerspectiveCamera(45,
              window.innerWidth / window.innerHeight, 0.1,200); 
    
            //设置摄像机的位置,并让其指向场景的中心(0,0,0)
            camera.position.x = 20.0;
            camera.position.y = -30;
            camera.position.z = 20;
            camera.up.x =0;
            camera.up.y =0;
            camera.up.z =1;
            camera.lookAt(scene.position);

    效果如图,还比较理想

    展开全文
  • threejs相机和渲染器

    千次阅读 2017-02-14 18:18:18
    渲染器 渲染器其实代表的是canvas标签。 渲染器的类型 ...使用WebGL来渲染图形,速度较快,但是有些机器不支持WebGL。...使用canvas2d来渲染图形,在较老的版本上,主要是用来渲染2D图形。...renderer = new THREE.W
  • Threejs相机多莉 当用处理摄影机动画时,很难精确地控制摄影机和后视位置。 创建此辅助程序是为了解决此问题,方法是使用一条路径使用相机,另一条路径使用它。 路径位置可以导出为JSON并重新加载。 尝试交互式...
  • three.js相机技术

    2020-03-17 16:59:47
    由于一个渲染器(renderer)对应一个相机(camera),当需要多个视图时会消耗大量内存; 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗; 内涵代码和思路文档
  • FirstPersonCameraControl Three.js的第一人称相机控件
  • 话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;">...script src="http://cooklife.cn/html/node_modules/dat.gui/build/dat.gui.min.js
  • 主要为大家详细介绍了three.js实现3D视野缩放效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • threejs开发小实例,实现了创建场景灯光,摄像机,对物体的移动,旋转,以及摄像机的移动旋转,动画效果,灯光设置(源代码)
  • Three.js相机动画

    2021-04-16 14:11:19
    相机threejs中十分重要,它决定了我们在哪里观察这个世界,怎样观察这个世界。目前threejs中总共有四种相机: PerspectiveCamer(透视相机)、 OrthographicCamera(正交投影相机)、CubeCamera(立方体相机或全景...
  • three.js里的焦点旋转控制,以原点为焦点中心,360度旋转观察模型的工具。
  • 思路是机器人的位置放在相机N个点位之前,运动原理和相机移动一样。且机器人的lookAt要指向机器人,否则机器人 1、生成自定义轨道 methods: createLine(){ //创建样条曲线,作为运动轨迹 this.curve = new ...
  • ThreeJS 控制相机上下,左右,旋转

    千次阅读 2020-09-05 15:16:20
    import { Vector3 } from "three"; class RoamUtil { constructor(camera, viewcontrols, domElement) { this.viewcontrols = viewcontrols; this.camera = camera; this.domElement = domElement !== ...
  • Threejs中,场景只有一种,用 THREE.Scene 表示,构建场景如下: var scene = new THREE.Scene(); 场景组件包括: 相机 — 决定哪些东西要渲染到屏幕上 光源 — 对材质如何显示,及阴影生成产生影响 物体 — Mesh...
  • 关于相机与世界坐标以及相机各个参数之间的关系,我是这样理解的:举个例子来说,我们要用手机拍一个物体,比如香蕉,那么我们会怎么做?首先是不是得把手机拿起来放到某个位置上去,你得拿你的手固定住手机才能拍出...
  • ThreeJS模块,可让您独立于场景的其余部分旋转对象(网格),并放大/缩小移动相机。 安装 npm install --save threejs-object-controls 用法 import * as THREE from 'three'; import {ObjectControls} from '...
  • threejs 正交相机实现视图指示器

    千次阅读 2019-08-20 12:59:00
    突发其想,想梳理一下正交相机的内容,虽然不是很常用,但也是有必要学习的。 正交相机一般用在建模和工业UI上面,它观察的物体不会因为远近而引起视觉大小变化。 构造函数: OrthographicCamera( left : Number, ...
  • 105 THREE.JS 手动实现相机沿焦点旋转

    千次阅读 2018-12-04 19:07:52
    比如是:OrbitControls.js,大家普遍都喜欢使用的一种控制器。 这种控制器有两个方法:getPolarAngle 和 getAzimuthalAngle来获取相机相对于焦点沿y轴旋转的角度(水平角度)和沿x轴旋转的角度(垂直角度),默认...
  • ThreeJS】平滑切换相机位置方法

    千次阅读 2019-09-11 15:31:20
    // current1 相机当前的位置 // target1 相机的controls的target // current2 新相机的目标位置 // target2 新的controls的target var tween; function animateCamera(current1, target1, current2, target2) { ...
  • 此效果需要导入 threejs的tweenjs包; import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js"; // tween 缓动动画 // oldp 相机原位置position // oldT 原控制器位置 // newP 相机新位置 // ...
  • ###透视相机的参数解析 透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。fov是视景体竖直方向上的张角(是角度制而非弧度制),如侧视图所示。 aspect等于width / height,是照相机水平方向和...
  • ThreeJS视频教程

    千人学习 2019-09-24 13:06:12
    以下是课程目录 1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景) 2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么...
  • 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Three.js实现3D空间粒子效果</title...
  • <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"> css html, body { margin: 0 ; height: 100% ; } #c { width: 100% ; height: 100% ; ...
  • ① 创建场景和相机 ②创建物体 ③ 创建渲染器 ④创建GUI html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
  • 课程主要知识点介绍:1 Threejs三大组件,相机、渲染器和场景的介绍2 在场景中如何创建几何体及一些旋转动画的实现,及对象的显示方式3 控制相机向前,向后移动,向左,向右旋转4 光源的介绍,及如何给场景添加不同的...
  • 写在前面虽然看起来好像是物体自身在旋转,但确实是相机在围绕场景旋转。 另外,用简单的三个变量实现了重力模拟。相机旋转方法 var theta=0; var render=function () { requestAnimationFrame(render); controls...
  • 使用tween.js来制作three.js相机转场动画 关于tween.js在之前的文章中有介绍, three.js补间动画Tween.js和选择物体 tween.js在three.js中有很多使用场景,比如粒子动画,相机转场动画,物体运动。 这里我们使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,665
精华内容 1,866
关键字:

threejs相机