多模型独立拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多模型独立拖拽</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from "../../standard.libs/three.js/build/three.module.js";
import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';
var scene, camera, renderer, orbitControls;
const objects = [];
initScene();
createGeometry();
createDragControls(objects);
function initScene() {
scene = new THREE.Scene();
var axisHelper = new THREE.AxesHelper(1000);
scene.add(axisHelper);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(400, 200, 300);
scene.add(pointLight);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();
}
function createGeometry() {
var boxGeometry = new THREE.BoxGeometry(100, 100, 100);
var materialBox = new THREE.MeshLambertMaterial({
color: 0x0000ff,
opacity: 1,
transparent: true
});
var meshBox = new THREE.Mesh(boxGeometry, materialBox);
meshBox.name = "box";
scene.add(meshBox);
objects.push(meshBox);
var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
var materialCylinder = new THREE.MeshLambertMaterial({
color: 0xd0021b,
opacity: 1,
transparent: true
});
var meshCylinder = new THREE.Mesh(cylinder, materialCylinder);
meshCylinder.name = "cylinder";
scene.add(meshCylinder);
objects.push(meshCylinder);
}
function createDragControls(objects) {
var dragControls = new DragControls(objects, camera, renderer.domElement);
dragControls.addEventListener('hoveron', function (event) {
console.log("createDragControls hoveron");
});
dragControls.addEventListener('dragstart', function (event) {
console.log("createDragControls dragstart");
orbitControls.enabled = false;
});
dragControls.addEventListener('drag', function (event) {
console.log("createDragControls drag");
dragControlsRender();
});
dragControls.addEventListener('dragend', function (event) {
console.log("createDragControls dragend");
orbitControls.enabled = true;
});
}
function dragControlsRender() {
renderer.render(scene, camera);
}
function render() {
orbitControls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
多模型组合拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多模型组合拖拽</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from "../../standard.libs/three.js/build/three.module.js";
import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';
var scene, camera, renderer, orbitControls;
const objects = [];
initScene();
createGeometry();
createDragControls(objects);
function initScene() {
scene = new THREE.Scene();
var axisHelper = new THREE.AxesHelper(1000);
scene.add(axisHelper);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(400, 200, 300);
scene.add(pointLight);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();
}
function createGeometry() {
var boxGeometry = new THREE.BoxGeometry(100, 100, 100);
var materialBox = new THREE.MeshLambertMaterial({
color: 0x0000ff,
opacity: 1,
transparent: true
});
var meshBox = new THREE.Mesh(boxGeometry, materialBox);
meshBox.name = "box";
scene.add(meshBox);
objects.push(meshBox);
var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
var materialCylinder = new THREE.MeshLambertMaterial({
color: 0xd0021b,
opacity: 1,
transparent: true
});
var meshCylinder = new THREE.Mesh(cylinder, materialCylinder);
meshCylinder.name = "cylinder";
scene.add(meshCylinder);
objects.push(meshCylinder);
}
function createDragControls(objects) {
var dragControls = new DragControls(objects, camera, renderer.domElement);
dragControls.addEventListener('hoveron', function (event) {
console.log("createDragControls hoveron");
});
dragControls.addEventListener('dragstart', function (event) {
console.log("createDragControls dragstart");
orbitControls.enabled = false;
});
dragControls.addEventListener('drag', function (event) {
console.log("createDragControls drag");
var name = event.object.name;
for (var i = 0; i < objects.length; i++) {
if (objects[i].name != event.object.name) {
objects[i].position.x = event.object.position.x;
objects[i].position.y = event.object.position.y;
objects[i].position.z = event.object.position.z;
}
}
dragControlsRender();
});
dragControls.addEventListener('dragend', function (event) {
console.log("createDragControls dragend");
orbitControls.enabled = true;
});
}
function dragControlsRender() {
renderer.render(scene, camera);
}
function render() {
orbitControls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>