ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ(仅有把抱怨环境的心境,化为上进的力量,才是成功的保证。——罗曼·罗兰)
ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
官方文档
效果预览
源码
使用vue-cli脚手架完成搭建
核心代码
<!-- HelloWorld.vue -->
<template>
<div class="hello">
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGLwxp" align="center"></div>
</div>
</template>
<script>
import * as THREE from "three";
import * as _ from "lodash";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const result = [
[
[
[
19.656729325252545,
-9.796301440500137,
-1
],
[
19.656729325252545,
-9.796301440500137,
1
],
[
18.684060725252547,
-11.543847040500136,
-1
],
[
18.684060725252547,
-11.543847040500136,
1
],
[
89.52300108102305,
-48.683257372239396,
-1
],
[
89.52300108102305,
-48.683257372239396,
1
],
[
88.55033248102306,
-50.43080297223939,
-1
],
[
88.55033248102306,
-50.43080297223939,
1
]
],
[
[
115.05974848102305,
-48.7572704722394,
-1
],
[
115.05974848102305,
-48.7572704722394,
1
],
[
116.08982468102305,
-50.4716050722394,
-1
],
[
116.08982468102305,
-50.4716050722394,
1
],
[
184.69242654313845,
-6.917734354816808,
-1
],
[
184.69242654313845,
-6.917734354816808,
1
],
[
185.72250274313845,
-8.632068954816809,
-1
],
[
185.72250274313845,
-8.632068954816809,
1
]
],
[
79.95931179795309,
81.23580783134797
],
[
30.09993135686745,
30
]
],
[
[
[
1149.0676867151885,
-9.8578618,
-1
],
[
1149.0676867151885,
-9.8578618,
1
],
[
1150.3781866151885,
-11.1683617,
-1
],
[
1150.3781866151885,
-11.1683617,
1
],
[
1212.1896159446271,
16.832533157395066,
-1
],
[
1212.1896159446271,
16.832533157395066,
1
],
[
1213.500115844627,
15.522033257395067,
-1
],
[
1213.500115844627,
15.522033257395067,
1
]
],
[
[
1402.3928979558505,
0.6702108,
-1
],
[
1402.3928979558505,
0.6702108,
1
],
[
1401.2469813558503,
-0.4757058,
-1
],
[
1401.2469813558503,
-0.4757058,
1
],
[
1273.9109426972825,
21.30447933613293,
-1
],
[
1273.9109426972825,
21.30447933613293,
1
],
[
1272.7650260972823,
20.15856273613293,
-1
],
[
1272.7650260972823,
20.15856273613293,
1
]
],
[
68.53287374293868,
130.12833900364214
]
]
];
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
method() {
//创建一个场景(场景是一个容器,用于保存、跟踪所要渲染的物体和使用的光源)
var scene = new THREE.Scene();
//创建一个摄像机对象(摄像机决定了能够在场景里看到什么)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
//设置摄像机的位置,并让其指向场景的中心(0,0,0)
camera.position.set(10.0, -20, 10);
camera.up.set(0, 0, 1);
// camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3(0, 0, 0));
//创建一个WebGL渲染器并设置其大小,设置抗锯齿设置
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(new THREE.Color(0x7696f1));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置
//系统坐标系绘制-----------------------------------------
var axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);
//网格线绘制
var grid = new THREE.GridHelper(600, 5, 'red', 'white');
grid.material.opacity = 0.4;
grid.material.transparent = true;
grid.rotation.x = Math.PI / 2.0;
scene.add(grid);
// 使用挤压形成立体
// const list3 = [
// [-5, 5],
// [-5, 10],
// [-10, 10],
// [-10, 5],
// ];
// const pts2 = [];
// for (let i = 0; i < list3.length; i++) {
// pts2.push(new THREE.Vector2(list3[i][0], list3[i][1]));
// }
// const shape2 = new THREE.Shape(pts2);
// const material2 = new THREE.MeshLambertMaterial({ color: 0xff8000 });
// const material1 = new THREE.MeshLambertMaterial({ color: 0xb00000 });
// const materials = [material1, material2];
// const extrudeSettings3 = {
// depth: 10,
// steps: 4,
// bevelEnabled: false,
// bevelThickness: 2,
// bevelSize: 4,
// bevelSegments: 3
// };
// const geometry3 = new THREE.ExtrudeGeometry(shape2, extrudeSettings3);
// const mesh3 = new THREE.Mesh(geometry3, materials);
// // mesh3.rotation.x = Math.PI / 2 + (15 * Math.PI) / 180;
// scene.add(mesh3);
const func = (front1, front2) => {
const list1 = front1;
const t1 = () => {
const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
const points = this.getIndex3(list1)
new THREE.Shape().setFromPoints(points);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
line.position.set(0, -10, 0);
scene.add(line);
};
t1();
const list2 = front2;
const t2 = () => {
const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
const points = this.getIndex3(list2)
new THREE.Shape().setFromPoints(points);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
line.position.set(0, -10, 0);
scene.add(line);
}
t2();
console.log(list1, list2);
const t3 = (list3) => {
const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
const points = this.getIndex3(list3)
new THREE.Shape().setFromPoints(points);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
line.position.set(0, -10, 0);
scene.add(line);
}
list1.map((v, i) => {
if (i > 3) {
return;
}
const list3 = [
v,
list2[i]
];
t3(list3);
})
};
for (const item of result) {
const front = item[0];
const back = item[1];
const front1 = [..._.cloneDeep(front).splice(0, 4), front[0]];
const front2 = [..._.cloneDeep(front).splice(4, 4), front[4]];
console.log('front', front2);
const back1 = [..._.cloneDeep(back).splice(0, 4), back[0]];
const back2 = [..._.cloneDeep(back).splice(4, 4), back[4]];
func(front1, front2);
func(back1, back2);
}
//创建点光源 正上面
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 0, 50);
spotLight.castShadow = true;
// scene.add(spotLight);
//右上角
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set(10, 10, 5);
spotLight.castShadow = true;
scene.add(spotLight2);
//右下角
var spotLight3 = new THREE.SpotLight(0xffffff);
spotLight3.position.set(10, -10, 0);
spotLight3.castShadow = true;
scene.add(spotLight3);
//左下角
var spotLight4 = new THREE.SpotLight(0xffffff);
spotLight4.position.set(-10, -10, -5);
spotLight4.castShadow = true;
scene.add(spotLight4);
//将渲染的结果输出到指定页面元素中
document.getElementById("WebGLwxp").appendChild(renderer.domElement);
//存放有所有需要改变的属性的对象
var objects = [];
for (let i = 0; i < scene.children.length; i++) {
if (scene.children[i].isMesh) {
objects.push(scene.children[i]);
}
}
const controls2 = new OrbitControls(camera, renderer.domElement);
controls2.addEventListener('change', render);
//渲染场景
render();
//渲染场景
function render() {
//通过requestAnimationFrame方法在特定时间间隔重新渲染场景
// requestAnimationFrame(render);
//渲染场景
renderer.render(scene, camera);
}
},
getIndex3(list) {
return list.map((v) => new THREE.Vector3(v[0], v[2], v[1]))
}
},
mounted() {
this.method();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
// package.json
{
"name": "testindex",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"lodash": "^4.17.21",
"three": "^0.144.0",
"vue": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@types/three": "^0.144.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}