<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<button id="btn1" style="position: absolute; margin-top: 10px; margin-left: 10px; z-index: 1000;">编辑组1</button>
<button id="btn2" style="position: absolute; margin-top: 40px; margin-left: 10px; z-index: 1000;">编辑组2</button>
<button id="btn3" style="position: absolute; margin-top: 70px; margin-left: 10px; z-index: 1000;">编辑组3</button>
<button id="btn4" style="position: absolute; margin-top: 110px; margin-left: 10px; z-index: 1000;">组3移除花模型</button>
</div>
<script type="module">
import * as THREE from '../three-part/three/build/three.module.js';
import { OrbitControls } from '../three-part/three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from '../three-part/three/examples/jsm/controls/TransformControls.js';
import { GLTFLoader } from '../three-part/three/examples/jsm/loaders/GLTFLoader.js';
let camera, orbitControls, scene, renderer;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set( 0, 50, 50 );
orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;
orbitControls.dampingFactor = 0.05;
orbitControls.screenSpacePanning = false;
orbitControls.maxPolarAngle = Math.PI / 2;
const transformControls = new TransformControls(camera, renderer.domElement);
scene.add(transformControls);
transformControls.addEventListener('change', render);
transformControls.addEventListener('dragging-changed', function (event) {
orbitControls.enabled = ! event.value;
});
const loader = new GLTFLoader();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
let directionalLight = new THREE.DirectionalLight("#ffffff");
directionalLight.position.set(0, 30, 0);
scene.add(directionalLight);
let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
let planeMaterial = new THREE.MeshLambertMaterial({
color: 0x666666
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
const group1 = new THREE.Group();
scene.add(group1);
const group2 = new THREE.Group();
scene.add(group2);
const group3 = new THREE.Group();
scene.add(group3);
let duck, nefertiti, monster, flower, helmet;
loader.load("../three-part/three/examples/models/gltf/Duck/glTF/Duck.gltf", gltf => {
duck = gltf.scene || gltf.scenes[0];
duck.position.set(-10, 10, 0);
group1.add(duck);
});
loader.load("../three-part/three/examples/models/gltf/Nefertiti/Nefertiti.glb", gltf => {
nefertiti = gltf.scene || gltf.scenes[0];
nefertiti.position.set(-10, 10, -10);
nefertiti.scale.set(0.2, 0.2, 0.2);
group1.add(nefertiti);
group3.add(nefertiti);
});
loader.load("../three-part/three/examples/models/gltf/Monster/glTF/Monster.gltf", gltf => {
monster = gltf.scene || gltf.scenes[0];
monster.position.set(0, 10, 0);
monster.scale.set(0.1, 0.1, 0.1);
group3.add(monster);
});
loader.load("../three-part/three/examples/models/gltf/Flower/Flower.glb", gltf => {
flower = gltf.scene || gltf.scenes[0];
flower.position.set(10, 10, 0);
flower.scale.set(10, 10, 10);
group2.add(flower);
group3.add(flower);
});
loader.load("../three-part/three/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", gltf => {
helmet = gltf.scene || gltf.scenes[0];
helmet.position.set(10, 10, 10);
group2.add(helmet);
});
window.addEventListener('resize', onWindowResize, false);
document.getElementById("btn1").onclick = () => transformControls.attach(group1);
document.getElementById("btn2").onclick = () => transformControls.attach(group2);
document.getElementById("btn3").onclick = () => transformControls.attach(group3);
document.getElementById("btn4").onclick = () => {
const offset = new THREE.Vector3().subVectors(group3.position, group2.position);
flower.position.add(offset);
group2.add(flower);
};
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
网友评论