Three.js - 使用 overrideMaterial 方法覆盖全局材质属性

最新推荐文章于 2024-09-03 10:51:32 发布

ithanmang

最新推荐文章于 2024-09-03 10:51:32 发布

阅读量2.6k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/80799451

版权

通过Three.js的scene.overrideMaterial属性，可以轻松实现对场景中所有对象材质属性的统一修改。此方法适用于需要统一调整场景色彩或材质效果的情况。在示例中，原本各自拥有不同颜色的立方体和plane，其材质颜色都被成功地进行了更改。

摘要由CSDN通过智能技术生成

如果想让添加到场景中的所有材质属性都同意的话，可以使用scene的 overrideMaterial 属性来覆盖。
这里写图片描述
示例浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180625/01-overrideMaterial.html

可以看到本来是随机颜色添加到scene的立方体的颜色和plane 的材质颜色都发生了改变。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用材质覆盖属性</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden;
        }
    </style>

    <script src="../../libs/jquery-1.9.1.js"></script>
    <script src="../../libs/build/three.min.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>

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

<script>

    $(function () {
   

        var stats = initStats();

        var scene = new THREE.Scene();
        // 定义线性雾，密度随着距离的增加而线性增长
        scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);

        // 覆盖属性
        scene.overrideMaterial = new THREE.MeshLambertMaterial({
   color : 0xF39600,wireframe:true });

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000