ThreeJS-投影、投影模糊(十七)

无投影:

完整的代码:

<template>
  <div id="three_div"></div>
</template>
  
  <script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"
export default {
  name: "HOME",
  components: {
    // vueQr,
    // glHome,
  },
  data() {
    return {};
  },
  mounted() {
    //使用控制器控制3D拖动旋转OrbitControls
    //控制3D物体移动

    //1.创建场景
    const scene = new THREE.Scene();
    console.log(scene);

    //2.创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    //设置相机位置
    camera.position.set(0, 0, 10);
    //将相机添加到场景
    scene.add(camera);
    //添加物体
    //创建一个半径为1,经纬度分段数位20的球
    const cubeGeometry = new THREE.SphereBufferGeometry(2,100,100);
    //纹理加载器加载图片
    const cubeMaterial = new THREE.MeshStandardMaterial({
        //side: THREE.DoubleSide,
    });
    //根据几何体和材质创建物体
    const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
    //将物体加入到场景
    scene.add(mesh);
    
    //创建平面几何体
    const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
    //创建平面物体
    const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
    planeMesh.position.set(0, -2, 0);
    planeMesh.rotation.x = -Math.PI/2;
     //场景添加平面物体
     scene.add(planeMesh);
    
    //给场景所有的物体添加默认的环境贴图
    //添加坐标轴辅助器
    const axesHepler = new THREE.AxesHelper(5);
    scene.add(axesHepler);
    //标准材质需要借助灯光

    //添加周围环境灯光(由物体发出的灯光)参数(灯色,强度0-1)
    const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
    scene.add(light);
    //直线光(由光源发出的灯光)
    const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
    directionalLight.position.set(10, 10, 10);
    scene.add(directionalLight);

    //添加平面
    // const planeGeometry = new THREE.PlaneBufferGeometry(1, 1);
    // const mesh2 = new THREE.Mesh(planeGeometry, cubeMaterial);
    // mesh2.position.set(0, 0, 3);

    // scene.add(mesh2);
    //初始化渲染器
    const render = new THREE.WebGLRenderer();
    //设置渲染器的尺寸
    render.setSize(window.innerWidth, window.innerHeight);
    //使用渲染器,通过相机将场景渲染进来

    //创建轨道控制器,可以拖动,控制的是摄像头
    const controls = new OrbitControls(camera, render.domElement);
    //设置控制阻尼,让控制器有更真实的效果
    controls.enableDamping = true;


    // //开启投影
    // //开启渲染器投影
    // render.shadowMap.enabled = true;
    // //开启灯光动态投影
    // directionalLight.castShadow = true;
    // //开启物体投影
    // mesh.castShadow = true;
    // //开启平面接受投影
    // planeMesh.receiveShadow = true;


    //将webgl渲染的canvas内容添加到body上
    document.getElementById("three_div").appendChild(render.domElement);

    //渲染下一帧的时候就会调用回调函数
    let renderFun = () => {
      //更新阻尼数据
      controls.update();
      //需要重新绘制canvas画布
      render.render(scene, camera);
      //监听屏幕刷新(60HZ,120HZ),每次刷新触发一次requestAnimationFrame回调函数
      //但是requestAnimationFrame的回调函数注册生命只有一次,因此需要循环注册,才能达到一直调用的效果
      window.requestAnimationFrame(renderFun);
    };
    // window.requestAnimationFrame(renderFun);
    renderFun();

    //画布全屏
    window.addEventListener("dblclick", () => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        //document.documentElement.requestFullscreen();
        render.domElement.requestFullscreen();
      }
    });

    //监听画面变化,更新渲染画面,(自适应的大小)
    window.addEventListener("resize", () => {
      //更新摄像机的宽高比
      camera.aspect = window.innerWidth / window.innerHeight;
      //更新摄像机的投影矩阵
      camera.updateProjectionMatrix();
      //更新渲染器宽度和高度
      render.setSize(window.innerWidth, window.innerHeight);
      //设置渲染器的像素比
      render.setPixelRatio(window.devicePixelRatio);
      console.log("画面变化了");
    });
  },
  methods: {
    paush(animate) {
      animate.pause();
    },
  },
};
</script>
  
<style scoped lang="scss">
</style>
  

效果图:

 添加投影

关键代码:

    //开启投影
    //开启渲染器投影
    render.shadowMap.enabled = true;
    //开启灯光动态投影
    directionalLight.castShadow = true;
    //开启物体投影
    mesh.castShadow = true;
    //开启平面接受投影
    planeMesh.receiveShadow = true;

完整代码:

<template>
  <div id="three_div"></div>
</template>
  
  <script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"
export default {
  name: "HOME",
  components: {
    // vueQr,
    // glHome,
  },
  data() {
    return {};
  },
  mounted() {
    //使用控制器控制3D拖动旋转OrbitControls
    //控制3D物体移动

    //1.创建场景
    const scene = new THREE.Scene();
    console.log(scene);

    //2.创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    //设置相机位置
    camera.position.set(0, 0, 10);
    //将相机添加到场景
    scene.add(camera);
    //添加物体
    //创建一个半径为1,经纬度分段数位20的球
    const cubeGeometry = new THREE.SphereBufferGeometry(2,100,100);
    //纹理加载器加载图片
    const cubeMaterial = new THREE.MeshStandardMaterial({
        //side: THREE.DoubleSide,
    });
    //根据几何体和材质创建物体
    const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
    //将物体加入到场景
    scene.add(mesh);
    
    //创建平面几何体
    const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
    //创建平面物体
    const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
    planeMesh.position.set(0, -2, 0);
    planeMesh.rotation.x = -Math.PI/2;
     //场景添加平面物体
     scene.add(planeMesh);
    
    //给场景所有的物体添加默认的环境贴图
    //添加坐标轴辅助器
    const axesHepler = new THREE.AxesHelper(5);
    scene.add(axesHepler);
    //标准材质需要借助灯光

    //添加周围环境灯光(由物体发出的灯光)参数(灯色,强度0-1)
    const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
    scene.add(light);
    //直线光(由光源发出的灯光)
    const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
    directionalLight.position.set(10, 10, 10);
    scene.add(directionalLight);

    //添加平面
    // const planeGeometry = new THREE.PlaneBufferGeometry(1, 1);
    // const mesh2 = new THREE.Mesh(planeGeometry, cubeMaterial);
    // mesh2.position.set(0, 0, 3);

    // scene.add(mesh2);
    //初始化渲染器
    const render = new THREE.WebGLRenderer();
    //设置渲染器的尺寸
    render.setSize(window.innerWidth, window.innerHeight);
    //使用渲染器,通过相机将场景渲染进来

    //创建轨道控制器,可以拖动,控制的是摄像头
    const controls = new OrbitControls(camera, render.domElement);
    //设置控制阻尼,让控制器有更真实的效果
    controls.enableDamping = true;


    //开启投影
    //开启渲染器投影
    render.shadowMap.enabled = true;
    //开启灯光动态投影
    directionalLight.castShadow = true;
    //开启物体投影
    mesh.castShadow = true;
    //开启平面接受投影
    planeMesh.receiveShadow = true;


    //将webgl渲染的canvas内容添加到body上
    document.getElementById("three_div").appendChild(render.domElement);

    //渲染下一帧的时候就会调用回调函数
    let renderFun = () => {
      //更新阻尼数据
      controls.update();
      //需要重新绘制canvas画布
      render.render(scene, camera);
      //监听屏幕刷新(60HZ,120HZ),每次刷新触发一次requestAnimationFrame回调函数
      //但是requestAnimationFrame的回调函数注册生命只有一次,因此需要循环注册,才能达到一直调用的效果
      window.requestAnimationFrame(renderFun);
    };
    // window.requestAnimationFrame(renderFun);
    renderFun();

    //画布全屏
    window.addEventListener("dblclick", () => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        //document.documentElement.requestFullscreen();
        render.domElement.requestFullscreen();
      }
    });

    //监听画面变化,更新渲染画面,(自适应的大小)
    window.addEventListener("resize", () => {
      //更新摄像机的宽高比
      camera.aspect = window.innerWidth / window.innerHeight;
      //更新摄像机的投影矩阵
      camera.updateProjectionMatrix();
      //更新渲染器宽度和高度
      render.setSize(window.innerWidth, window.innerHeight);
      //设置渲染器的像素比
      render.setPixelRatio(window.devicePixelRatio);
      console.log("画面变化了");
    });
  },
  methods: {
    paush(animate) {
      animate.pause();
    },
  },
};
</script>
  
<style scoped lang="scss">
</style>
  

效果图:

投影模糊度

关键代码:

            //投影模糊度
            directionalLight.shadow.radius = 20;
            //设置投影的宽度和高度
            directionalLight.shadow.mapSize.set(2048, 2048); 

 完整代码:

<template>
    <div id="three_div"></div>
</template>

<script>
    import * as THREE from "three";
    import {
        OrbitControls
    } from "three/examples/jsm/controls/OrbitControls";
    import {
        RGBELoader
    } from "three/examples/jsm/loaders/RGBELoader"
    export default {
        name: "HOME",
        components: {
            // vueQr,
            // glHome,
        },
        data() {
            return {};
        },
        mounted() {
            //使用控制器控制3D拖动旋转OrbitControls
            //控制3D物体移动

            //1.创建场景
            const scene = new THREE.Scene();
            console.log(scene);

            //2.创建相机
            const camera = new THREE.PerspectiveCamera(
                75,
                window.innerWidth / window.innerHeight,
                0.1,
                1000
            );
            //设置相机位置
            camera.position.set(0, 0, 10);
            //将相机添加到场景
            scene.add(camera);
            //添加物体
            //创建一个半径为1,经纬度分段数位20的球
            const cubeGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
            //纹理加载器加载图片
            const cubeMaterial = new THREE.MeshStandardMaterial({
                //side: THREE.DoubleSide,
            });
            //根据几何体和材质创建物体
            const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
            //将物体加入到场景
            scene.add(mesh);

            //创建平面几何体
            const planeGeometry = new THREE.PlaneBufferGeometry(20, 20);
            //创建平面物体
            const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
            planeMesh.position.set(0, -2, 0);
            planeMesh.rotation.x = -Math.PI / 2;
            //场景添加平面物体
            scene.add(planeMesh);

            //给场景所有的物体添加默认的环境贴图
            //添加坐标轴辅助器
            const axesHepler = new THREE.AxesHelper(5);
            scene.add(axesHepler);
            //标准材质需要借助灯光

            //添加周围环境灯光(由物体发出的灯光)参数(灯色,强度0-1)
            const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
            scene.add(light);
            //直线光(由光源发出的灯光)
            const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
            directionalLight.position.set(10, 10, 10);
            scene.add(directionalLight);

            //添加平面
            // const planeGeometry = new THREE.PlaneBufferGeometry(1, 1);
            // const mesh2 = new THREE.Mesh(planeGeometry, cubeMaterial);
            // mesh2.position.set(0, 0, 3);

            // scene.add(mesh2);
            //初始化渲染器
            const render = new THREE.WebGLRenderer();
            //设置渲染器的尺寸
            render.setSize(window.innerWidth, window.innerHeight);
            //使用渲染器,通过相机将场景渲染进来

            //创建轨道控制器,可以拖动,控制的是摄像头
            const controls = new OrbitControls(camera, render.domElement);
            //设置控制阻尼,让控制器有更真实的效果
            controls.enableDamping = true;


            //开启投影
            //开启渲染器投影
            render.shadowMap.enabled = true;
            //开启灯光动态投影
            directionalLight.castShadow = true;
            //开启物体投影
            mesh.castShadow = true;
            //开启平面接受投影
            planeMesh.receiveShadow = true;
            //投影模糊度
            directionalLight.shadow.radius = 20;
            //设置投影的宽度和高度
            directionalLight.shadow.mapSize.set(1024, 1024);

            //将webgl渲染的canvas内容添加到body上
            document.getElementById("three_div").appendChild(render.domElement);

            //渲染下一帧的时候就会调用回调函数
            let renderFun = () => {
                //更新阻尼数据
                controls.update();
                //需要重新绘制canvas画布
                render.render(scene, camera);
                //监听屏幕刷新(60HZ,120HZ),每次刷新触发一次requestAnimationFrame回调函数
                //但是requestAnimationFrame的回调函数注册生命只有一次,因此需要循环注册,才能达到一直调用的效果
                window.requestAnimationFrame(renderFun);
            };
            // window.requestAnimationFrame(renderFun);
            renderFun();

            //画布全屏
            window.addEventListener("dblclick", () => {
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else {
                    //document.documentElement.requestFullscreen();
                    render.domElement.requestFullscreen();
                }
            });

            //监听画面变化,更新渲染画面,(自适应的大小)
            window.addEventListener("resize", () => {
                //更新摄像机的宽高比
                camera.aspect = window.innerWidth / window.innerHeight;
                //更新摄像机的投影矩阵
                camera.updateProjectionMatrix();
                //更新渲染器宽度和高度
                render.setSize(window.innerWidth, window.innerHeight);
                //设置渲染器的像素比
                render.setPixelRatio(window.devicePixelRatio);
                console.log("画面变化了");
            });
        },
        methods: {
            paush(animate) {
                animate.pause();
            },
        },
    };
</script>

<style scoped lang="scss">
</style>

效果图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/7229.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

再不转型为ChatGPT程序员,有遭受降维打击的危险

Open AI在演示GPT-4的时候&#xff0c;有这么一个场景&#xff1a;给一个界面草图&#xff0c;就可以生成网页代码。这个演示非常简单&#xff0c;如果界面原型比较复杂呢&#xff1f;像这样&#xff1a;ChatGPT能不能直接生成HTML, CSS,JavaScript代码&#xff0c;把这个网页给…

MongoDB副本集Command failed with error 10107 (NotMaster):on server

问题 通过DataGrip连接的MongoDB节点&#xff0c;之前可以新增或更新数据。某天突然不能新增或更新数据&#xff0c;报错信息如下&#xff1a; 具体的报错信息&#xff1a; Command failed with error 10107 (NotMaster): not master on server 10.19.21.11:30386. The full…

HNU-电路与电子学-实验3

实验三 模型机组合部件的实现&#xff08;二&#xff09;&#xff08;实验报告格式案例&#xff09; 班级 计XXXXX 姓名 wolf 学号 2021080XXXXX 一、实验目的 1&#xff0e;了解简易模型机的内部结构和工作原理。 2&#xff0e;分析模型机的功能&am…

【Linux】LVM与磁盘配额

文章目录1.LVM1.1 LVM概述1.2 LVM机制1.3 LVM管理命令1.4 LVM应用实例2. 磁盘配额2.1 磁盘配额概述2.2 磁盘配额管理2.3 启用磁盘配额支持2.4 磁盘配额应用实例1.LVM 1.1 LVM概述 Logical Volume Manager&#xff0c;逻辑卷管理 ● 能够在保持现有数据不变的情况下动态调整磁盘…

43掌握自动化运维工具 Puppet 的基本用法,包括模块编写、资源管理

Puppet是一种自动化配置管理工具&#xff0c;可以自动化地部署、配置和管理大规模服务器环境。本教程将介绍Puppet的基本用法&#xff0c;包括模块编写和资源管理。 模块编写 在Puppet中&#xff0c;模块是一组相关的类、文件和资源的集合。模块可以用于部署和配置应用程序、服…

图形编辑器:排列移动功能的实现

大家好&#xff0c;我是前端西瓜哥。这次来实现一下图形编辑器排列&#xff08;arrange&#xff09;功能的实现。 先看效果。 有四种移动方式&#xff1a; 置顶&#xff08;Front&#xff09;&#xff1a;将指定的图形移动到顶部&#xff1b;置底&#xff08;Back&#xff09…

嵌入式学深度学习:1、Pytorch框架搭建

嵌入式学深度学习&#xff1a;1、Pytorch框架搭建1、介绍2、Pytorch开发环境搭建2.1、查看GPU是否支持CUDA2.2、安装Miniconda2.3、使用Conda安装pytorch2.4、安装常用库3、简单使用验证1、介绍 深度学习是机器学习的一种&#xff0c;如下图&#xff1a; 目前深度学习应用场景…

MySQL-四大类日志

目录 &#x1f341;MySQL日志分为4大类 &#x1f341;错误日志 &#x1f343;修改系统配置 &#x1f341;二进制日志 &#x1f343;查看二进制日志 &#x1f343;删除二进制日志 &#x1f343;暂时停止二进制日志的功能 &#x1f341;事务日志(或称redo日志) &#x1f341;慢查…

chatgpt3中文辅助写作-gpt2中文文本生成

GPT-3是一种深度学习模型&#xff0c;具有潜在的巨大计算成本和训练麻烦。根据OpenAI公司的官方消息&#xff0c;训练GPT-3是一项昂贵的和耗时的过程&#xff0c;在OpenAI公司&#xff0c;训练GPT-3的成本已经超过了10亿美元。考虑到GPT-3的架构、规模和训练时间&#xff0c;这…

高分子PEG磷酸盐mPEG-phosphoric acid,Phosphate PEG,甲氧基聚乙二醇磷酸,可用于修饰金属氧化物表面

规格单位&#xff1a;g |货期&#xff1a;按照具体的库存进行提供 | 端基取代率&#xff1a;95% 中英文名&#xff1a;mPEG-phosphoric acid|Phosphate PEG|甲氧基聚乙二醇磷酸​ 一、Phosphate PEG化学结构式&#xff1a; 二、产品详情&#xff1a; 外观&#xff1a;灰白…

[oeasy]python0123_中文字符_文字编码_gb2312_激光照排技术_王选

中文编码GB2312 回忆上次内容 上次回顾了 日韩各有 编码格式 日本 有假名 五十音一字节 可以勉强放下 有日本汉字 字符数量超过20000 韩国 有谚文 数量超过500一个字节 放不下 有朝鲜汉字 字符数量超过20000 作为 汉字源头的中国 究竟应该 如何对汉字 进行编码 呢&#x…

操作系统-AOSOA

一、个人感受 1.1 权衡 在我写这份报告的时候&#xff0c;已经是 6 月 30 号了&#xff0c;经历了一个学期的“折磨”&#xff0c;我面对终点&#xff0c;已经没啥感觉了&#xff0c;就想着赶快呼噜完了就完事了。其实做这个项目最大的体会就是“人力有穷&#xff0c;一切皆权…

视频剪辑:教你如何调整视频画面的大小。

大家应该都会调整图片的大小吧&#xff0c;那你们会调整视频画面的大小吗&#xff1f;我想&#xff0c;应该会有人不还不知道要调整的吧&#xff0c;今天就让小编来教大家一个方法怎样去调整视频画面的大小尺寸。 首先&#xff0c;我们要有以下材料&#xff1a; 一台电脑 【…

列的类型定义——整形类型

文章目录 前言一、整数类型的附带属性 类型名称后面的小括号unsignedauto_increment总结前言 1&#xff09;采用26字母和0-9的自然数加上下互相 ‘_’ 组成&#xff0c;命名简洁明确&#xff0c;多个单词用下划线 ‘_’ 隔开 2&#xff09;全部小写命名&#xff0c;尽量避免…

【SpringBoot】自定义Starter

&#x1f6a9;本文已收录至专栏&#xff1a;Spring家族学习之旅 &#x1f44d;希望您能有所收获 一.概述 在使用SpringBoot进行开发的时候&#xff0c;我们发现使用很多技术都是直接导入对应的starter&#xff0c;然后就实现了springboot整合对应技术&#xff0c;再加上一些简…

【论文导读】Inferring deterministic causal relations

前段时间看Scholkopf教授的《Towards Causal Representation Learning》&#xff0c;看到这篇挺有意思来读读。 这一篇只在Arxiv上挂着&#xff0c;重点主要是研究发掘两变量之间的因果关系&#xff08;无法应用独立性检验等方法&#xff09;&#xff0c;引入了信息论中的正则…

Elasticsearch:配置选项

Elasticsearch 带有大量的设置和配置&#xff0c;甚至可能让专家工程师感到困惑。 尽管它使用约定优于配置范例并且大部分时间使用默认值&#xff0c;但在将应用程序投入生产之前自定义配置是必不可少的。 在这里&#xff0c;我们将介绍属于不同类别的一些属性&#xff0c;并讨…

2023年泰迪杯数据挖掘挑战赛B题--产品订单数据分析与需求预测(2.数据探索性分析)

前言 继续上一片数据预处理进行续写&#xff0c;利用预处理之后的数据进行数据分析并且解决问题一相关的问题。问题一主要目的是让研究各种因素对于需求量的影响&#xff0c;然后找到确定影响需求量的主要因素并且进行数据分析和主要特征抽取。 对于问题提出的八个小问&#…

解决云服务器ssh经常断开的问题

问题描述&#xff1a;无论是腾讯云服务器还是阿里云服务器等&#xff0c;在使用MobaXterm或者Xshell连接云服务器时&#xff0c;如果十分钟左右无任何操作&#xff0c;ssh就会自动断开&#xff0c;非常烦人&#xff0c;下面提供几种方法来解决该问题。 MobaXterm的报错如下&am…

Cookie和Session的工作流程及区别(附代码案例)

目录 一、 HTTP协议 1.1 为什么HTTP协议是无状态的&#xff1f; 1.2 在HTTP协议中流式传输和分块传输编码的区别 二、Cookie和Session 2.1 Cookie 2.2 Session 2.3 Cookie和Session的区别 三、servlet中与Cookie和Session相关的API 3.1 HttpServletRequest 类中的相关方…