Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (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语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • 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和文档(辅助开发)
    1. 几何体顶点位置数据和点模型

    ← 22. examples和文档(辅助开发) 1. 几何体顶点位置数据和点模型→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式