Threejs vue-cli 4.x项目中使用three.js

Posted 2021-04-16 Muda的log空间

1.NPM安装依赖

npm install three --save -dev

2.import 引入threejs

// 引入three.jsimport * as THREE from "three";

3.vue-cli脚手架中使用examples目录下threejs扩展库

    3.1npm安装依赖

npm i imports-loader exports-loader --save-dev

    3.2配置文件

// vue.config.jsmodule.exports = { lintOnSave: false, configureWebpack: { module: { rules: [ // OrbitControls.js库使用 { test: require.resolve("three/examples/js/controls/OrbitControls"), use: "imports-loader?THREE=three" }, { test: require.resolve("three/examples/js/controls/OrbitControls"), use: "exports-loader?THREE.OrbitControls" }, // CSS2DRenderer.js库使用 { test: require.resolve("three/examples/js/renderers/CSS2DRenderer.js"), use: "imports-loader?THREE=three" }, { test: require.resolve("three/examples/js/renderers/CSS2DRenderer.js"), use: "exports-loader?THREE.CSS2DRenderer" }, // OBJLoader.js库使用 { test: require.resolve("three/examples/js/loaders/OBJLoader.js"), use: "imports-loader?THREE=three" }, { test: require.resolve("three/examples/js/loaders/OBJLoader.js"), use: "exports-loader?THREE.OBJLoader" } ] }, }}

4.使用demo

<template> <div id="three"></div></template>
<script>// 引入three.jsimport * as THREE from "three";// 引入examples目录下threejs扩展库import OrbitControls from "three/examples/js/controls/OrbitControls";export default { name: "", data() { return { scene: null, //场景 camera: null, //相机 renderer: null, //渲染器 pointLight: null, //点光源 ambientLight: null, //环境光源 AxesHelper: null //辅助坐标 }; }, mounted() { this.$nextTick(() => { this.initThreeView(); }); }, methods: { initThreeView() { var _this = this; /** * 1.创建场景对象 */ _this.scene = new THREE.Scene();
 /** * 2.辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置 */ _this.AxesHelper = new THREE.AxesHelper(250); _this.scene.add(_this.AxesHelper);
 /** * 3.光源设置 */ //3.1点光源 _this.pointLight = new THREE.PointLight(0xffffff); _this.pointLight.position.set(400, 200, 300); //点光源位置 _this.scene.add(_this.pointLight); //点光源添加到场景中 //3.2环境光 _this.ambientLight = new THREE.AmbientLight(0x444444); _this.scene.add(_this.ambientLight);
 /** * 4.设置相机 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大 //4.1创建相机对象 _this.camera = new THREE.OrthographicCamera( -s * k, s * k, s, -s, 1, 1000 ); _this.camera.position.set(200, 300, 200); //设置相机位置 _this.camera.lookAt(_this.scene.position); //设置相机方向(指向的场景对象) /** * 5.创建渲染器对象 */ _this.renderer = new THREE.WebGLRenderer(); _this.renderer.setSize(width, height); //设置渲染区域尺寸 _this.renderer.setClearColor(0x12d3ff, 1); //设置背景颜色 this.createMeshBox(); document.getElementById("three").appendChild(_this.renderer.domElement); //目标元素中插入canvas对象 this.render(); var controls = new THREE.OrbitControls( _this.camera, _this.renderer.domElement ); //创建控件对象 }, createMeshBox() { /** * 创建网络模型 */ var geometry = new THREE.BoxGeometry(150, 100, 100); var material = new THREE.MeshLambertMaterial({ color: 0xff00ff }); var mesh = new THREE.Mesh(geometry, material); this.scene.add(mesh); }, render() { this.renderer.render(this.scene, this.camera); //执行渲染操作 requestAnimationFrame(this.render); //请求再次执行渲染函数render } }};</script>
<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

5.效果