Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
    • 4. 第一个3D案例—创建3D场景
    • 5. 第一个3D案例—透视投影相机
    • 6. 第一个3D案例—渲染器
    • 7. 三维坐标系-加强三维空间认识
    • 8. 光源对物体表面影响
    • 9. 相机控件OrbitControls
    • 10. 平行光与环境光
    • 11. 动画渲染循环
    • 12. Canvas画布布局和全屏
    • 13. stats查看threejs渲染帧率
    • 14. 阵列立方体和相机适配体验
    • 15. Threejs常见几何体简介
    • 16. 高光网格材质Phong
    • 17. WebGL渲染器设置(锯齿模糊)
    • 18. gui.js库(可视化改变三维场景)
    • 19. gui调试界面2-颜色命名等
    • 20. gui调试3-下拉菜单、单选框
    • 21. gui.js库(分组)
    • 22. examples和文档(辅助开发)
    • 23. threejs语法总结
      • 【选修】Vue+Threejs开发环境
      • 【选修】React+Three.js开发环境
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    23. threejs语法总结

    # threejs语法总结

    本节课从JavaScript面向对象语法的角度,给大家总结下threejs API的使用习惯,这样方便大家更好的使用threejs API。

    # Three.js语法总结:类(构造函数)

    Three.js提供了各种各样的类(构造函数),通过new关键字可以实例化类(构造函数),获得一个对象,对象具有属性和方法。

    // new实例化类THREE.MeshLambertMaterial,创建一个材质对象
    const material = new THREE.MeshLambertMaterial();
    // 可以看到材质对象的属性color、side、opacity、transparent...
    // 通过属性可以看到threejs默认的属性值
    console.log('查看材质对象',material);
    
    // 查看材质默认属性值
    console.log('material.color',material.color);
    console.log('material.side',material.side);
    console.log('material.transparent',material.transparent);
    console.log('material.opacity',material.opacity);
    

    # 类(构造函数)的参数设置属性

    通过类(构造函数)的参数设置属性

    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff, 
        side:THREE.DoubleSide,
        transparent:true,
        opacity:0.5,
    });
    

    查看选项参数设置的材质属性值,可以和原来默认属性值对比

    console.log('material.color',material.color);
    console.log('material.side',material.side);
    console.log('material.transparent',material.transparent);
    console.log('material.opacity',material.opacity);
    

    # 访问对象属性改变属性的值

    // 访问对象属性改变属性的值
    material.transparent = false;
    material.opacity = 1.0;
    
    console.log('directionalLight',ambient.intensity);
    directionalLight.intensity = 0.1;//改变光源强度
    

    # 父类和子类

    如果你学习过JavaScript面向对象,应该有父类和子类的概念,子类是通过父类派生出来的,会继承父类的属性或方法。

    • 环境光、平行光源的父类Light

    • mesh、light光源的父类Object3D

    如果你想通过文档查询一个类的方法或属性,除了可以查询类本身,还可以查询类的父类。

    # 通过对象的方法改变对象的属性

    console.log('模型位置属性',mesh.position);
    mesh.position.x = 50;//访问属性改变位置x坐标
    mesh.translateX(50);//执行方法改变位置属性
    
    22. examples和文档(辅助开发)
    【选修】Vue+Threejs开发环境

    ← 22. examples和文档(辅助开发) 【选修】Vue+Threejs开发环境→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式