Threejs学习

参考郭隆邦_技术博客学习，不过这个博客使用的版本较低，如果有些api方法未定义建议百度一下新的api。

演示地址https://arthaskj.github.io/3js/01/index.html,替换01即可演示不同场景。受制于网络原因，下载源码到本地更方便。

一、生成第一个立方体演示地址

  /**
  * 创建网格模型
  */
  var box = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
  var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象
  var mesh = new THREE.Mesh(box, material); //网格模型对象
  scene.add(mesh); //网格模型添加到场景中

二、添加多个立方体，设置透明度，显示结构线演示地址

 /**
       * 创建网格模型
       */
      var box = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
      //球体(半径60，细分数40,40)
      // var box = new THREE.SphereGeometry(60, 60, 60);
      //圆台(顶部半径20，底部半径40，高度100，圆周细分数40)
      // var box = new THREE.CylinderGeometry(20, 40, 100, 40);
      //圆柱(顶部、底部半径均为40，高度100，圆周细分数40)
      // var box = new THREE.CylinderGeometry(40, 40, 100, 40);
​
      //矩形平面，宽度30，高度50
      // var box = new THREE.PlaneGeometry(30, 50);
​
      //正五边形
      // var box = new THREE.CircleGeometry(50, 5);
      //正40边形(圆平面)
      // var box = new THREE.CircleGeometry(50, 40);
      //四分之一扇形
      // var box = new THREE.CircleGeometry(50, 40, 0, 0.5 * Math.PI);
​
      var texture = new THREE.TextureLoader().load("./1.jpg"); //加载纹理贴图
      var material = new THREE.MeshLambertMaterial({
        //贴图通过材质添加给几何体
        map: texture, //给纹理属性map赋值
        side: THREE.DoubleSide, //两面可见
      }); //材质对象
      // var material = new THREE.MeshLambertMaterial({
      //   color: 0x00ff00,
      //   //THREE.DoubleSide设置两面均显示
      //   side: THREE.DoubleSide,
      // }); //材质对象
      var mesh = new THREE.Mesh(box, material); //网格模型对象
      scene.add(mesh); //网格模型添加到场景中
​
      //球体(半径60，细分数40,40)
      var box2 = new THREE.SphereGeometry(60, 40, 40);
​
      var material2 = new THREE.MeshLambertMaterial({
        color: new THREE.Color(0x3f7b9d),
        wireframe: true,
        side: THREE.DoubleSide,
      }); //材质对象
      var mesh2 = new THREE.Mesh(box2, material2); //网格模型对象
      mesh2.translateY(110); //沿着x轴正方向平移距离100
      scene.add(mesh2); //网格模型添加到场景中
​
      //圆台(顶部半径20，底部半径40，高度100，圆周细分数40)
      var box3 = new THREE.CylinderGeometry(20, 40, 100, 40);
​
      var material3 = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
        // wireframe: true,
​
        //THREE.DoubleSide设置两面均显示
        side: THREE.DoubleSide,
      }); //材质对象
      var mesh3 = new THREE.Mesh(box3, material3); //网格模型对象
      mesh3.translateX(110); //沿着x轴正方向平移距离100
      scene.add(mesh3); //网格模型添加到场景中
​
      //圆柱(顶部、底部半径均为40，高度100，圆周细分数40)
      var box4 = new THREE.CylinderGeometry(40, 40, 100, 40);
​
      var material4 = new THREE.MeshLambertMaterial({
        color: 0xff00ff,
        // wireframe: true,
        opacity: 0.5, //透明度属性
        transparent: true, //开启透明度计算
        //THREE.DoubleSide设置两面均显示
        side: THREE.DoubleSide,
      }); //材质对象
      var mesh4 = new THREE.Mesh(box4, material4); //网格模型对象
      mesh4.translateZ(110); //沿着x轴正方向平移距离100
      scene.add(mesh4); //网格模型添加到场景中

三、拷贝克隆立方体演示地址

 /**
  * 创建网格模型
  */
var box = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象
var box2 = box.clone();
​
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象
var mesh = new THREE.Mesh(box, material); //网格模型对象
scene.add(mesh); //网格模型添加到场景中
var material2 = new THREE.MeshLambertMaterial({ color: 0xff00ff }); //材质对象
var mesh2 = new THREE.Mesh(box2, material2); //网格模型对象
mesh2.translateX(120);
scene.add(mesh2); //网格模型添加到场景中
​
for (var x = 0; x < 10; x++) {
    //10表示立方体数量
    var mesh = new THREE.Mesh(box, material); //网格模型对象
    mesh.position.set(x * 15, 0, 0); //立方体间距15（阵列距离）
    scene.add(mesh); //网格模型添加到场景中
}

四、循环创建立方体演示地址

 /**
  * 创建网格模型
  */
var box = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象
// var mesh = new THREE.Mesh(box, material); //网格模型对象
​
var object = new THREE.Object3D(); //创建Object3D对象
for (var y = 0; y < 10; y++) {
    //10表示y方向立方体数量
    for (var x = 0; x < 10; x++) {
        for (var z = 0; z < 10; z++) {
            //10表示x方向立方体数量
            var mesh = new THREE.Mesh(box, material); //网格模型对象
            mesh.position.set(x * 15, y * 15, z * 15); //立方体间距15（阵列距离）
            object.add(mesh); //网格模型添加到场景中
        }
    }
}
object.translateY(50); //平移所有网格模型
scene.add(object); //网格模型添加到场景中

五、贴图，长方体贴图演示地址

 /**
  * 创建网格模型
  */
var box = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
/**
 * 纹理贴图网格模型
 */
// var box = new THREE.PlaneGeometry(60, 50); //矩形平面
var texture = new THREE.TextureLoader().load("./1.jpg"); //加载纹理贴图
var material = new THREE.MeshLambertMaterial({
    //贴图通过材质添加给几何体
    map: texture, //给纹理属性map赋值
    side: THREE.DoubleSide, //两面可见
}); //材质对象
var mesh = new THREE.Mesh(box, material); //网格模型对象
mesh.translateX(300);
scene.add(mesh); //网格模型添加到场景中
​
/**
 * 立方体网格模型（药盒）
 */
// MeshFaceMaterial方法已经废弃
var box2 = new THREE.BoxGeometry(70, 255, 480); //长宽高尺寸70,255,480
//加载六个面的纹理贴图
var texture1 = new THREE.TextureLoader().load("1.jpg");
var texture2 = new THREE.TextureLoader().load("2.jpg");
var texture3 = new THREE.TextureLoader().load("3.jpg");
var texture4 = new THREE.TextureLoader().load("4.jpg");
var texture5 = new THREE.TextureLoader().load("5.jpg");
var texture6 = new THREE.TextureLoader().load("6.jpg");
var materialArr = [
    //纹理对象赋值给6个材质对象
    new THREE.MeshPhongMaterial({ map: texture1 }),
    new THREE.MeshPhongMaterial({ map: texture2 }),
    new THREE.MeshPhongMaterial({ map: texture3 }),
    new THREE.MeshPhongMaterial({ map: texture4 }),
    new THREE.MeshPhongMaterial({ map: texture5 }),
    new THREE.MeshPhongMaterial({ map: texture6 }),
];
//6个材质对象组成的数组赋值给MeshFaceMaterial构造函数
// var facematerial = new THREE.MeshFaceMaterial(materialArr);
var mesh2 = new THREE.Mesh(box2, materialArr); //
scene.add(mesh2);

六、加载模型文件演示地址

 /**
  * 加载立方体obj文件，自定义材质的对象，生成网格模型
  */
var loader = new THREE.OBJLoader(); //创建obj模型加载器对象
loader.load("1.obj", obj); //加载obj完成后执行函数stl()
//stl加载完成后等待执行的函数
function obj(object3D) {
    object3D.scale.set(100, 100, 100); //放大object3D对象
    object3D.translateY(200);
    scene.add(object3D); //网格模型添加到场景中
}
​
/**
 * 加载立方体fbx文件，自定义材质的对象，生成网格模型
 */
var loader2 = new THREE.FBXLoader(); //创建obj模型加载器对象
loader2.load("1.fbx", obj2); //加载obj完成后执行函数stl()
//stl加载完成后等待执行的函数
function obj2(object3D) {
    object3D.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    scene.add(object3D); //网格模型添加到场景中
}
​
/**
 * 加载立方体glb文件，自定义材质的对象，生成网格模型
 */
var loader3 = new THREE.GLTFLoader(); //创建obj模型加载器对象
loader3.load("1.glb", obj3); //加载obj完成后执行函数stl()
//stl加载完成后等待执行的函数
function obj3(object3D) {
    object3D.scene.scale.set(700, 700, 700);
    scene.add(object3D.scene); //网格模型添加到场景中
}

七、多个结构体进行组合，封装演示地址

 /**
  * 创建场景对象
  */
var scene = new THREE.Scene();
/**
 * 阵列立方体网格模型
 */
var box = new THREE.CylinderGeometry(5, 5, 10, 40);
var box2 = new THREE.SphereGeometry(5, 20, 20);
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象
var object = new THREE.Object3D(); //创建Object3D对象
var mesh = new THREE.Mesh(box, material); //网格模型对象
mesh.position.set(0, 0, 0); //立方体间距15（阵列距离）
object.add(mesh); //网格模型添加到Object3D对象中
var mesh2 = new THREE.Mesh(box2, material); //网格模型对象
mesh2.position.set(0, 10, 0); //立方体间距15（阵列距离）
object.add(mesh2); //网格模型添加到Object3D对象中
​
object.translateX(-70); //平移所有网格模型
scene.add(object); //网格模型添加到场景中

八、全景贴图演示地址

let sphereGeometry = new THREE.SphereGeometry(16, 50, 50);
let texture = new THREE.TextureLoader().load("./1.jpg");
let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphereGeometry.scale(10, 10, 10);
scene.add(this.sphere);

九、源码地址

源码地址:https://github.com/Arthaskj/3js.git

下载代码后使用vscode打开，点击Go Live就可以访问http://localhost:5500/07/index.html静态网页了。