VUE中使用THREE.JS实现一些功能（1）

在模块中引入three （使用的three版本为0.126.1）

import * as THREE from "three";

然后新建init方法 并创建 场景 相机 渲染器等

init(){
    scene  =  new THREE.Scene() // 创建场景
    scene.background = new THREE.Color(0x00ffff); // 场景背景颜色    camera = new THREE.PerspectiveCamera(        75, // 视野角度        window.innerWidth / window.innerHeight, // 长宽比        1, // 近截面        100000 // 远截面      ); // 创建相机 视觉角度75度      renderer = new THREE.WebGLRenderer(); // 创建渲染器      renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小      sceneBox.appendChild(renderer.domElement); // 向获取的dmo中加入渲染}

渲染后效果如上图所示
然后在场景中添加一个模型

 let geometry = new THREE.BoxGeometry(1, 1, 1); // 创建盒子模型 let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //创建纹理 let cube = new THREE.Mesh(geometry, material); // 创建网格 scene.add(cube); // 场景中添加网格

设置摄像机的位置

  camera.position.z = 5;

生成一个模型

引入轨道控制器 OrbitControls

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

在代码中加入

let controls = new OrbitControls(camera, renderer.domElement); // 加入视觉操作模块controls.target.set(10, 0, 0);controls.update();