114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
import * as THREE from 'three';
|
||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
import { DragControls } from 'three/addons/controls/DragControls.js';
|
||
import Stats from 'three/addons/libs/stats.module.js';
|
||
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
|
||
/**
|
||
* 初始化场景
|
||
* @param {元素} _elementName
|
||
* @returns
|
||
*/
|
||
export function initScene(_elementName, _that) {
|
||
let scene = new THREE.Scene();
|
||
|
||
scene.fog = new THREE.Fog(0x111111, 150, 200);
|
||
|
||
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||
|
||
// create a render and set the size
|
||
let renderer = new THREE.WebGLRenderer();
|
||
renderer.setClearColor(new THREE.Color(0x87CEEB));
|
||
renderer.setSize(window.innerWidth - 390, window.innerHeight);
|
||
|
||
// show axes in the screen
|
||
let axes = new THREE.AxesHelper(5);
|
||
scene.add(axes);
|
||
|
||
|
||
// position and point the camera to the center of the scene
|
||
camera.position.set(-30, 40, 30);
|
||
camera.lookAt(scene.position);
|
||
|
||
// add the output of the renderer to the html element
|
||
let container = document.getElementById(_elementName);
|
||
container.appendChild(renderer.domElement);
|
||
// 性能监测
|
||
let stats = new Stats();
|
||
stats.domElement.style.position = 'absolute';
|
||
stats.domElement.style.left = '200px';
|
||
container.appendChild(stats.dom);
|
||
|
||
|
||
// 创建轨道控制器
|
||
const controls = new OrbitControls(camera, renderer.domElement);
|
||
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环里调用update（）
|
||
controls.enableDamping = true;
|
||
|
||
scene.add(new THREE.AmbientLight(0x222222));
|
||
|
||
_that.camera = camera;
|
||
_that.scene = scene;
|
||
_that.renderer = renderer;
|
||
_that.controls = controls;
|
||
// 实现每一帧渲染一次场景和相机
|
||
function render(time) {
|
||
// 每一帧执行一次render函数
|
||
requestAnimationFrame(render);
|
||
controls.update();
|
||
renderer.render(scene, camera);
|
||
stats.update();
|
||
}
|
||
render();
|
||
return scene;
|
||
}
|
||
|
||
/**
|
||
* 导入模型
|
||
*/
|
||
export function add3DObject(_that, _modal) {
|
||
|
||
const loader = new OBJLoader();
|
||
|
||
loader.load(
|
||
// resource URL
|
||
_modal.path,
|
||
// called when resource is loaded
|
||
function (object) {
|
||
object.position.set(0, 0, 0);
|
||
_that.scene.add(object);
|
||
|
||
//control(_that);
|
||
},
|
||
// called when loading is in progresses
|
||
function (xhr) {
|
||
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
||
},
|
||
// called when loading has errors
|
||
function (error) {
|
||
console.log('An error happened', error);
|
||
}
|
||
);
|
||
|
||
|
||
|
||
}
|
||
|
||
export function control(_that) {
|
||
let moveObjects = [];
|
||
_that.scene.traverse(function (child) {
|
||
if (child instanceof THREE.Mesh) {
|
||
moveObjects.push(child);
|
||
}
|
||
});
|
||
let dragControls = new DragControls(moveObjects, _that.camera, _that.renderer.domElement);
|
||
// 拖拽事件监听
|
||
dragControls.addEventListener('dragstart', () => {
|
||
// 设置控制器不可操作
|
||
_that.controls.enabled = false
|
||
})
|
||
dragControls.addEventListener('dragend', () => {
|
||
_that.controls.enabled = true
|
||
})
|
||
}
|
||
|