Three-js 学习笔记（2）——几何体

1，安装three

 npm install --s three

2，渲染几何图形

（1）添加vue元素

<template>
  <div class="geometry_01">
    <button @click="upPage">返回</button>
    <div id="container"></div>
  </div>
</template>

（2）引入three

import * as THREE from "three";

（3） 引入鼠标控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

（4）定义场景、渲染器、材质、控制器、相机等成员变量

data() {
    return {
      // 相机
      camera: null,
      // 场景
      scene: null,
      // 渲染器
      renderer: null,
      // 材质对象
      mesh: null,
      // 控件
      controls: null,
    };
  },

（5）创建场景

        // 创建场景对象Scene
        this.scene = new THREE.Scene();

（6）创建几何图形并添加到场景中

        // 长方体 参数：长，宽，高
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        // 球体 参数：半径60  经纬度细分数36,36
        // var geometry = new THREE.SphereGeometry(60, 36, 36);
        // // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
        // var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
        // // 正八面体
        // var geometry = new THREE.OctahedronGeometry(50);
        // 正十二面体
        // var geometry = new THREE.DodecahedronGeometry(50);
        // 正二十面体
        // var geometry = new THREE.IcosahedronGeometry(50); 

        let material = new THREE.MeshNormalMaterial({
        color: "white",
        });
        this.mesh = new THREE.Mesh(geometry, material);
        // 设置网格模型位置
        this.mesh.position.set(0,0,0);
        this.scene.add(this.mesh);

 

（7）创建光源

        // 点光源
        var point = new THREE.PointLight(0xffffff);
        // 点光源位置
        point.position.set(400, 200, 300); 
        // 点光源添加到场景中
        this.scene.add(point); 
        // 环境光
        var ambient = new THREE.AmbientLight(0x444444);
        this.scene.add(ambient);

（8）相机设置

        // 相机设置
        let container = document.getElementById("container");
        // 窗口宽度
        let width = window.innerWidth; 
        // 窗口高度
        let height = window.innerHeight; 
        // 窗口宽高比
        let k = width / height; 
        // 三维场景显示范围控制系数，系数越大，显示的范围越大
        let s = 100; 
        
        // 正投影相机 (左边界，右边界，上边界，下边界，近面，远面)
        this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.1, 1000);
        // 透视相机(视场角度，长宽比，近面，远面)
        // this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);

        // 设置相机位置（X、Y、Z）
        this.camera.position.set(200, 300, 200); 
        // 也可单轴设置
        // this.camera.position.x = 200;
        // 设置相机方向(指向的场景对象)
        this.camera.lookAt(this.scene.position); 

（9）创建渲染器对象

        // 创建渲染器对象
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        // 设置渲染区域尺寸
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        // 设置背景颜色
        this.renderer.setClearColor(0xb9d3ff, 1);
        // body元素中插入canvas对象
        container.appendChild(this.renderer.domElement);

（10）创建鼠标操作控件对象

        //   缩放：滚动—鼠标中键
        //   旋转：拖动—鼠标左键
        //   平移：拖动—鼠标右键
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);

（11）自动播放

    // 动画
    animate: function () {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    },

 完整代码：

<template>
  <div class="geometry_01">
    <button @click="upPage">返回</button>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
  data() {
    return {
      // 相机
      camera: null,
      // 场景
      scene: null,
      // 渲染器
      renderer: null,
      // 材质对象
      mesh: null,
      // 控件
      controls: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    //初始化
    init: function () {
        // 创建场景对象Scene
        this.scene = new THREE.Scene();
        // 网格模型添加到场景中
        // 长方体 参数：长，宽，高
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        // 球体 参数：半径60  经纬度细分数36,36
        // var geometry = new THREE.SphereGeometry(60, 36, 36);
        // // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
        // var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
        // // 正八面体
        // var geometry = new THREE.OctahedronGeometry(50);
        // 正十二面体
        // var geometry = new THREE.DodecahedronGeometry(50);
        // 正二十面体
        // var geometry = new THREE.IcosahedronGeometry(50); 

        let material = new THREE.MeshNormalMaterial({
        color: "white",
        });
        this.mesh = new THREE.Mesh(geometry, material);
        // 设置网格模型位置
        this.mesh.position.set(0,0,0);
        this.scene.add(this.mesh);

        // 点光源
        var point = new THREE.PointLight(0xffffff);
        // 点光源位置
        point.position.set(400, 200, 300); 
        // 点光源添加到场景中
        this.scene.add(point); 
        // 环境光
        var ambient = new THREE.AmbientLight(0x444444);
        this.scene.add(ambient);

        // 相机设置
        let container = document.getElementById("container");
        // 窗口宽度
        let width = window.innerWidth; 
        // 窗口高度
        let height = window.innerHeight; 
        // 窗口宽高比
        let k = width / height; 
        // 三维场景显示范围控制系数，系数越大，显示的范围越大
        let s = 100; 
        
        // 正投影相机 (左边界，右边界，上边界，下边界，近面，远面)
        this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.1, 1000);
        // 透视相机(视场角度，长宽比，近面，远面)
        // this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);

        // 设置相机位置（X、Y、Z）
        this.camera.position.set(200, 300, 200); 
        // 也可单轴设置
        // this.camera.position.x = 200;
        // 设置相机方向(指向的场景对象)
        this.camera.lookAt(this.scene.position); 

        // 创建渲染器对象
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        // 设置渲染区域尺寸
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        // 设置背景颜色
        this.renderer.setClearColor(0xb9d3ff, 1);
        // body元素中插入canvas对象
        container.appendChild(this.renderer.domElement);
        // 创建鼠标操作控件对象
        //   缩放：滚动—鼠标中键
        //   旋转：拖动—鼠标左键
        //   平移：拖动—鼠标右键
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    },

    // 动画
    animate: function () {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    },

    upPage() {
      this.$router.go(-1);
    },

  },
};
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>