当前位置: 首页 > article >正文

学习threejs,scene.overrideMaterial全局材质效果

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.2 ☘️THREE.Scene 场景
    • 1.2 ☘️overrideMaterial 全局材质
  • 二、🍀scene.overrideMaterial全局材质效果
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用scene.overrideMaterial实现全局材质效果,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.2 ☘️THREE.Scene 场景

THREE.Scene场景允许你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。
构造函数:
Scene()
创建一个新的场景对象。
属性:
.fog : Fog
一个fog实例定义了影响场景中的每个物体的雾的类型。默认值为null。
.overrideMaterial : Material
如果不为空,它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。
.autoUpdate : boolean
默认值为true,若设置了这个值,则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时,你必须亲自手动维护场景中的矩阵。
.background : Object
若不为空,在渲染场景的时候将设置背景,且背景总是首先被渲染的。 可以设置一个用于的“clear”的Color(颜色)、一个覆盖canvas的Texture(纹理),或是一个CubeTexture。默认值为null。
方法:
.toJSON : JSON
使用JSON格式返回场景数据。
.dispose () : null
清除WebGLRenderer内部所缓存的场景相关的数据。

1.2 ☘️overrideMaterial 全局材质

scene.overrideMaterial用于覆盖场景中所有对象的材质属性‌。通过设置scene的overrideMaterial属性,可以统一修改场景中所有对象的材质,适用于需要统一调整场景色彩或材质效果的情况。另外scene中的对象设置其他材质都会被覆盖。例如,可以使用overrideMaterial属性来实现全场景边缘发光的特效,或者调整场景中所有对象的材质颜色‌。

二、🍀scene.overrideMaterial全局材质效果

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene,设置scene.overrideMaterial场景全材质为THREE.MeshLambertMaterial漫反射材质对象。
  • 3、初始化camera相机,定义相机位置 camera.position,定义相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源,初始化THREE.SpotLight聚光灯光源,设置聚光灯光源位置,设置聚光灯光源投影,scene添加聚光灯光源。
  • 5、加载几何模型:创建THREE.PlaneGeometry平面几何体planeGeometry,创建THREE.MeshLambertMaterial漫反射材质planeMaterial,传入参数planeGeometry和planeMaterial创建平面几何体网格对象plane,设置plane投影,设置plane的位置和旋转角度,场景scene中加入plane。
  • 6、加入gui控制,实现添加旋转的立方体(材质颜色使用随机颜色,被scene.overrideMaterial全局材质替代,为同一个颜色)、移除已添加的立方体、打印加入的立方体、调整旋转速度等方法,具体实现参考代码样例。加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>

<html>
<head>
    <title>scene.overrideMaterial全局材质效果</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        var scene = new THREE.Scene();
        scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;

        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;

            this.removeCube = function () {
                var allChildren = scene.children;
                var lastObject = allChildren[allChildren.length - 1];
                if (lastObject instanceof THREE.Mesh) {
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
            };

            this.addCube = function () {

                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;

                // position the cube randomly in the scene
                cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
                cube.position.y = Math.round((Math.random() * 5));
                cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

                // add the cube to the scene
                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };

            this.outputObjects = function () {
                console.log(scene.children);
            }
        };

        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'addCube');
        gui.add(controls, 'removeCube');
        gui.add(controls, 'outputObjects');
        gui.add(controls, 'numberOfObjects').listen();

        render();

        function render() {
            stats.update();

            // rotate the cubes around its axes
            scene.traverse(function (e) {
                if (e instanceof THREE.Mesh && e != plane) {

                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>
</html>

效果如下:
在这里插入图片描述


http://www.kler.cn/a/449295.html

相关文章:

  • 【5】C#期末复习第5套
  • PyTorch 神经网络回归(Regression)任务:关系拟合与优化过程
  • 题解 洛谷 Luogu P1135 奇怪的电梯 广度优先搜索 BFS C/C++
  • SQL,生成指定时间间隔内的事件次序号
  • esp8266_TFTST7735语音识别UI界面虚拟小助手
  • sh cmake-linux.sh -- --skip-license --prefix = $MY_INSTALL_DIR
  • pycharm无法识别conda环境(已解决)
  • Jmeter对图片验证码的处理【超详细】
  • Html:点击图标链接发起QQ临时会话
  • 【LeetCode每日一题】——415.字符串相加
  • 【C++——迭代器】
  • 安科瑞能源物联网平台在老旧小区用电安全改造中的应用与优势
  • HTML+CSS+JS制作汽车网站(内附源码,含5个页面)
  • LLM与金融
  • Python绘制图表
  • SpringBoot3-第一篇(快速入门)
  • Source Insight 导入代码库 观察linux源码
  • canvas绘制仪表盘刻度盘
  • WorkManager
  • Centos8安装源出错 设置基础软件仓库出错(已解决-秒解)
  • ubuntu 安装docker
  • 【枚举】假币问题
  • 《Vue进阶教程》第十六课:深入完善响应式系统之单例模式
  • 从0到1手写实现Event Emitter
  • 关于Buildroot如何配置qtwebengine [未能成功编译]
  • 面试题整理15----K8s常见的网络插件有哪些