Three.js之模型对象、材质

news/2024/7/7 20:54:40

参考资料

三维向量Vector3与模型位置
…
克隆.clone()和复制.copy()

知识点

注：基于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>