Three.js之模型对象、材质

参考资料

知识点

注：基于Three.jsv0.155.0

三维向量Vector3与模型位置
欧拉Euler与角度属性.rotation
模型材质颜色(Color对象)
模型材质父类Material：透明、面属性
模型材质和几何体属性
克隆.clone()和复制.copy()

代码实现

<!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.MeshBasicMaterial({
      color:0x0000ff,
    });

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

    // 位置属性
    mesh.position.set(0, 0, 0);
    // mesh.position.x = 100;
    // mesh.scale.set(2, 2, 2);
    // mesh.scale.x = 2;
    // mesh.translateOnAxis(new THREE.Vector3(1, 0, 1), 100);
    // mesh.translateX(100);
    scene.add(mesh);

    // 角度属性
    // mesh.rotation.x = Math.PI / 4;
    // mesh.rotation.set(0, 0, Math.PI / 4);
    // mesh.rotateX(Math.PI / 4);
    console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:46 ~ mesh.rolation:', mesh.rotation)

    // 材料颜色
    // mesh.material.color.set('red');
    // mesh.material.color.set('#ff0000');
    // mesh.material.color.set(0xff0000);
    mesh.material.color.r = 1;

    // 材料透明度
    mesh.material.opacity = 0.8;
    mesh.material.transparent = true; // 是否透明

    // 材料面属性
    // mesh.material.side = THREE.FrontSide; // 正面可见
    mesh.material.side = THREE.DoubleSide; // 两面可见
    console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:66 ~ mesh.material.side:', mesh.material.side) // 2
    
    console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:63 ~ mesh.material:', mesh.material)
    console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:89 ~ mesh.geometry:', mesh.geometry)

    // 克隆、复制
    const mesh2 = mesh.clone();
    mesh2.position.set(200, 0, 0);
    mesh2.material = mesh.material.clone();
    mesh2.material.color.set(0xff0000);
    mesh2.position.copy(mesh.position);
    mesh2.position.y += 150;
    scene.add(mesh2);

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

    // 相机
    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);
    });

    // 渲染循环
    function render() {
        mesh.rotateY(0.01);// mesh旋转动画
        // 同步mesh2和mesh的姿态角度一样，不管mesh姿态角度怎么变化，mesh2始终保持同步
        mesh2.rotation.copy(mesh.rotation);
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

相关阅读:
用Aspose-Java免费实现 PDF、Word、Excel、Word互相转换并将转换过得文件上传OSS，返回转换后的文件路径
Spartacus 注册和登录页面的实现细节
vue+iView 动态侧边栏菜单保持高亮选中
ROS中预览pcl点云数据，提示fatal error: pcl/point_cloud.h: 没有那个文件或目录
C++基础篇之缺省参数和函数重载
【计算机毕业设计】45.医院挂号系统
LeetCode952三部曲之一：解题思路和初级解法(137ms，超39%)
使用idea导入开发iuap2.0项目
Python标准库中内置装饰器@staticmethod@classmethod
net基于asp.net的二手商品的交易系统-二手网站-计算机毕业设计

原文地址：https://blog.csdn.net/u010678947/article/details/132640122