Three.js之模型对象、材质

参考资料

知识点

注:基于Three.jsv0.155.0

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

代码实现

javascript 复制代码
<!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>
相关推荐
gis分享者1 天前
学习threejs,导入FBX格式骨骼绑定模型
threejs·骨骼动画·fbx
gis分享者2 天前
学习threejs,对模型多个动画切换展示
threejs·动画切换
allenjiao2 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染
gis分享者7 天前
学习threejs,使用TWEEN插件实现动画
threejs·tween·补间动画
优雅永不过时·7 天前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
gis分享者9 天前
学习threejs,使用第一视角控制器FirstPersonControls控制相机
threejs·第一人称视角
gis分享者10 天前
学习threejs,使用导入的模型生成粒子
threejs·模型粒子化
gis分享者17 天前
学习threejs,将多个网格合并成一个网格
threejs·网格合并
优雅永不过时·18 天前
three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合
前端·javascript·css3·threejs·three
优雅永不过时·19 天前
使用three.js 实现 自定义绘制平面的效果
前端·javascript·平面·github·threejs·着色器