Three.js之几何体、高光材质、渲染器设置、gui

已于 2023-08-27 18:07:32 修改
阅读量723 收藏
点赞数
分类专栏： Web3D 文章标签： Web3D threejs
于 2023-08-20 15:29:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010678947/article/details/132392347
版权

参考资料

知识点

注：基于Three.jsv0.155.0

  • 长方体：BoxGeometry
  • 球体：SphereGeometry
  • 圆柱：CylinderGeometry
  • 矩形平面：PlaneGeometry
  • 圆形平面：CircleGeometry
  • 高光网格材质：MeshPhongMaterial（shininess、specular）
  • WebGL渲染器设置：antialias 、setPixelRatio、setClearColor
  • gui.js库：add、addColor、addFolder、name、step、onChange
  • 关键词搜索examples：Find in Folder

代码实现

阵列立方体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    // 材质 
    // MeshBasicMaterial：不受光
    // MeshLambertMaterial：受光
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff, //设置材质颜色
      transparent: true,//开启透明
      opacity: 0.8,//设置透明度
    });

    for (let i = 0; i < 10; i++) {
      for (let j = 0; j < 10; j++) {
          const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
          // 在XOZ平面上分布
          mesh.position.set(i * 200, 0, j * 200);
          scene.add(mesh); //网格模型添加到场景中  
      }
    }

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 点光源
    const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    pointLight.position.set(2000, 2000, 2000 );
    scene.add( pointLight );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 相机
    const camera = new THREE.PerspectiveCamera(60, width / height, 1, 8000);
    // camera.position.set(292, 223, 185);
    //在原来相机位置基础上拉远，可以观察到更大的范围
    camera.position.set(2000, 2000, 2000);
    camera.lookAt(1000, 0, 1000);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(1000, 0, 1000);
    controls.update();

    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });
  </script>
</html>

常见几何体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体：
    // 正方体
    // const geometry = new THREE.BoxGeometry(100, 100, 100);
    // 球体
    // const geometry = new THREE.SphereGeometry(100);
    // 圆锥体
    // const geometry = new THREE.CylinderGeometry(50, 100, 100);
    // 正方形平面
    // const geometry = new THREE.PlaneGeometry(100, 100);
    // 圆形平面
    const geometry = new THREE.CircleGeometry(100);

    // 材质
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
      transparent: true,
      opacity: 0.8,
      side: THREE.DoubleSide, //两面可见
    });

    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 点光源
    const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    pointLight.position.set(2000, 2000, 2000 );
    scene.add( pointLight );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

  </script>
</html>

高光网格材质

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体：
    // 球体
    // const geometry = new THREE.BoxGeometry(100, 100, 100);
    const geometry = new THREE.SphereGeometry(100);

    // 材质
    const material = new THREE.MeshPhongMaterial({
      color: 0x00ff00,
      shininess: 80, //高光部分的亮度，默认30
      specular: 0x444444, //高光部分的颜色
    });

    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 点光源
    const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    pointLight.position.set(2000, 2000, 2000 );
    scene.add( pointLight );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

  </script>
</html>

WebGL渲染器设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体：
    // 球体
    const geometry = new THREE.BoxGeometry(100, 100, 100);

    // 材质
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ff00, //设置材质颜色
      transparent: true,//开启透明
      opacity: 0.8,//设置透明度
    });

    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 点光源
    const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    pointLight.position.set(2000, 2000, 2000 );
    scene.add( pointLight );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    // 设置设备比，固定写法
    renderer.setPixelRatio(window.devicePixelRatio);
    // 设置背景色
    renderer.setClearColor(0x444444, 1);
    // 设置渲染器的尺寸
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });
  </script>
</html>

gui.js库

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    const width = 800
    const height = 500

    const gui = new GUI();
    gui.domElement.style.right = '0px';
    gui.domElement.style.width = '300px';

    // 场景
    const scene = new THREE.Scene();
    // 几何体：
    // 球体
    const geometry = new THREE.BoxGeometry(100, 100, 100);

    // 材质
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ff00, //设置材质颜色
      transparent: true,//开启透明
      opacity: 0.8,//设置透明度
    });
    console.log('🚀 ~ file: 1.19gui.js库(可视化改变三维场景).html:42 ~ material:', material)

    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 点光源
    const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    pointLight.position.set(2000, 2000, 2000 );
    scene.add( pointLight );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    // 设置设备比，固定写法
    renderer.setPixelRatio(window.devicePixelRatio);
    // 设置背景色
    renderer.setClearColor(0x444444, 1);
    // 设置渲染器的尺寸
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

    var guiObj = {
      color: '0xffffff',
      obj: {
        左: -100,
        中: 0,
        右: 200
      },
      bool: false,
    }

    // 动画渲染
    // 跟踪时间
    function render() {
      requestAnimationFrame(render);
      guiObj.bool && (mesh.rotation.y += 0.01);
      renderer.render(scene, camera);
    }

    render();

    const ambientFoloer = gui.addFolder('环境光');
    ambientFoloer.close();

    // gui动态改变光的强度
    ambientFoloer.add(ambientLight, 'intensity', 0, 2).name('环境光强度');

    const materialFoloer = gui.addFolder('材料');
    materialFoloer.close();

    // gui动态改变材料颜色
    materialFoloer.addColor(guiObj, 'color').name('材料颜色').onChange(function (value) {  
      mesh.material.color.set(value)
    });

    const meshFoloer = gui.addFolder('物体');
    meshFoloer.close();

    // gui动态改变材料颜色
    meshFoloer.add(mesh.position, 'y', [-100, 0 ,200]).name('物体y轴');

    // gui动态改变材料颜色
    meshFoloer.add(mesh.position, 'x',  {
      左: -100,
      中: 0,
      右: 200
    }).name('物体x轴');

    meshFoloer.add(mesh.position, 'x', 0, 100).step(2);

    meshFoloer.add(mesh.position, 'y', 0, 100);

    meshFoloer.add(mesh.position, 'z', 0, 100);

    meshFoloer.add(guiObj, 'bool').name('是否旋转');
  </script>
</html>
开心就是最好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 设置高光贴图
ithanmang
09-06 3854
通过高光贴图可以实现部分区域反光，像素值为白色的地方会发光，黑色的不会反光，高光的颜色默认为灰黑色。 1、示例 示例 http://www.ithanmang.com/threeJs/home/201809/20180906/02-specular-texture.html 效果 可以通过调节颜色，来让海洋反射出不同的色彩 2、实现步骤 2.1、设置材质的specularMa...
Three.js高光贴图(.specularMap)
u014291990的博客
11-13 1609
Three.js高光贴图(.specularMap) 高光材质MeshPhongMaterial具有高光属性.specular,如果一个网格模型Mesh都是相同的材质,可以使用.specular属性设置高光材质MeshPhongMaterial的高光颜色值就可以，如果一个网格模型表示一个人，那么人的不同部位高光程度是不同的，不可能直接通过.specular属性来描述，在这种情况通过高光贴图属性.s...
Three.js 中的光照模型
qq_21476953的博客
07-01 317
Three.js 的一个伟大抽象就是统一了所有材质的光照模型, 无论 PBR 或者 Phong。都只用两个函数给全部囊括了。下面以Phong为例,具体看一下如何落地。函数用于计算间接漫反射的效果。包括间接漫反射和间接高光反射。计算直接光照的反射效果, 包括直接漫反射和直接高光反射。
WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图
weixin_45966674的博客
12-28 2533
这里 我们函数 向public目录下导入 page.hdr 回调 参数 就是文件对象 然后 赋值给场景的 background属性。然后 我们图片的光照效果 就会在内部微微的显现出我们设置的 public/background.jpg。但是 这样 我们场景是不会动的 就好像是一个离谱的背景图 而我们想要的是 它跟谁我们的拖动 转动。然后 我们设置 planeMaterial材质的 envMap 环境贴图字段 为我们外面的场景。然后 我们可以单独设置 我们中间这块元素的环境贴图。
Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用
NanChen的博客
05-06 945
文章：Three.js 常见的几何体： 常见的几何体： 这里拿平面做示例： Three.js 的材质默认正面可见，反面不可见,对于矩形平面、圆形平面如果你想看到两面，可以设置。 高光网格材质和基础网格材质、漫反射网格材质一样都是网格模型的 Mesh 的材质。注意：高光网格材质和漫反射网格材质一样会受到光照的影响。和都会收到光照的影响区别在于，对光线反射方式有差异。可以实现高光反射效果，而恰恰相反。所谓的高光，就比如你在一个太阳下方去看一个小汽车，你会在特定的角度及位置看到玻璃表面某个位置特别亮。可以提供一
Three.js学习之几何形状
10-21
上述代码中，首先创建了一个基础材质，并指定了颜色和线框模式，然后利用THREE.CubeGeometry生成了一个立方体几何体，并将材质应用到该几何体上。最后，创建了一个Mesh对象，并将其添加到了场景中。 总之，Three.js...
Three.js点线几何空间图形特效
07-24
1. **Three.js的几何体**：在Three.js中，你可以创建各种几何体，如BoxGeometry（立方体）、SphereGeometry（球体）和LineGeometry（线条）。对于"点线几何空间图形特效"，LineGeometry是关键。这个几何体允许开发者...
three. js的人体解剖图.zip
07-14
二、Three.js 的几何体与材质 1. 几何体（Geometry）：表示3D模型的形状。Three.js 提供了多种预定义的几何体，如BoxGeometry（立方体）、SphereGeometry（球体）和CylinderGeometry（圆柱体）等。对于人体解剖图，...
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
THREE.WebGPURenderer：实验Three.js WebGPU渲染器
02-01
然后我可能会停止更新此项目，而改为为Three.js官方做出贡献。 三.WebGPU渲染器 实验Three.js WebGPU渲染器 / 通过Chrome Canary上的chrome：// flags打开＃enable-unsafe-webgpu进行演示。 链接
threejs-shader-materials:Three.js的着色器材料集合
05-09
threejs-shader-materials Three.js的着色器材料集合 演示版 入门 安装 npm install https://github.com/MasatoMakino/threejs-shader-materials.git --save-dev 进口 threejs-shader-materials由ES6模块和TypeScript d.ts文件组成。 首先，导入类 import { HexGridMaterial } from "threejs-shader-materials" ; 并设置材料。 const geo = new SphereGeometry ( 10 , 64 , 64 ) ; const mat = new HexGridMaterial ( ) ; const mesh = new Mesh ( geo , mat ) ; scen
Threejs中3D模型使用透明发光材质并加线框
05-06
透明发光材质是通过自定义shader实现，线框的关键代码如下： model.traverse(function(child) {     if (child.isMesh) {     child.material = customMaterial;     // 添加线框     var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x3366ff, wireframe: true, transparent: true});     var wireframe = new THREE.Mesh(child.geo
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
Threejs中建筑物3D模型房顶和立面采用不同材质贴图
05-17
对于数量较多的模型，为了减少尺寸，我们采用没有贴图的模型文件，然后在程序里做统一贴图。 对于房子等建筑物，需要房顶和立面采用不同的材质贴图，甚至房子底部需要删除。 实现的思路是遍历所有面，根据方向确定是否为房顶或房子底部，修改贴图和UV数据。  
Three.js 基础材质和高光材质
lizujun123的博客
08-20 2949
Three.js会提供一些的光照模型计算物体表面的光照变化，MeshStandardMaterial和MeshPhongMaterial一样都是渲染网格模型的材质，本质上都是顶点着色器和片元着色器代码，只是光照模型不同，反映到着色器代码就是光照计算算法不同。 基于物理的材质MeshStandardMaterial相比较基于Phong光照模型的高光网格材质MeshPhongMaterial能够更...
three.js实现模型描边高亮效果
yunbabac的博客
12-29 1359
大家都知道three.js WebGL渲染器执行渲染方法.render()会得到一张图像，如果你需要对一个webgl渲染器的渲染结果进行后期处理，就把它作为EffectComposer的参数。通过EffectComposer(renderer)指定了需要后处理的渲染器WebGLRenderer，渲染器通道RenderPass的作用是指定后处理对应的相机camera和场景scene。最后把创建好的OutlinePass通道添加到后处理composer中。
97 Three.js 使用 specularMap 设置高光贴图
现在学习也不晚
05-03 4513
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/160.html 简介 我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图，我们会发现，只有海洋部分会有发光，而陆地部分没有高光的效果。 一般来讲，像素的值越高（从黑到白），物体表面就越亮。通常高光贴图会与specular属性一起使用，该属性可以用来决定反光的颜色。 案...
threejs材质
疯狂的程序员
06-30 1232
个人博客地址: https://cxx001.gitee.io 前言 前面简单的介绍了材质，你已经了解到材质结合几何体就可以创建网格，网格对象才可以添加到Threejs渲染的场景中。材质就像物体的皮肤，决定了几何体的外表。如，几何体看起来是否像金属、透明与否，或者显示为线框。 threejs提供的材质： 名称 描述 MeshBasicMaterial（网格基础材质） 用于给几何体赋予一种简单的颜色，可显示几何体的线框 MeshDepthMaterial（网格深度材质） 这个材质使用
three.js在几何体表面绘制图形
最新发布
08-22
在Three.js中，要在几何体表面绘制图形，首先需要创建几何体并配置其属性。以下是一些基本步骤： 1. **创建几何体**[^1]: ```javascript const geometry = new THREE.LineGeometry(points, segments); // points...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值