Issue
I am a green hand.These days,I try to learn how to use THREE.js to import .pcd files.But when i try to import {TransformControls},there is a problem that needs to be solved —— my TransformControls import failed.I try to figure out what the problem is.Here is my scripts and problem.
scripts:
<html>
<head>
<title>原神,启动!</title>
<script type="importmap">
{
"imports": {
"three": "../js/three.module.js",
"three/adds/": "../js/"
}
}
</script>
<script type="module">
//导入库
import * as THREE from 'three';
import { PCDLoader } from 'three/adds/PCDLoader.js';
import { DragControls } from 'three/adds/DragControls.js';
import { OrbitControls } from "three/adds/OrbitControls.js"
import { TransformControls } from "three/adds/TransformControls.js";
// 获取HTML页面中的容器元素
const container = document.getElementById('container');
// 获取HTML页面中的容器元素
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const helper = new THREE.CameraHelper( camera );
scene.add( helper );
// 创建render
const renderer = new THREE.WebGLRenderer({
antialias: true, // 开启抗锯齿
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加使用镜头转换控制器
const orbitControls = new OrbitControls( camera, renderer.domElement );
orbitControls.enableDamping = true;//阻尼效果开启
orbitControls.update()
// 创建一个空物体作为Points点云的父物体
var parent1 = new THREE.Object3D();
var parent2 = new THREE.Object3D();
// 创建一个PCDLoader对象
const loader = new PCDLoader();
loader.load('../image/cat.pcd', function (points) {
parent1.add(points);
scene.add(parent1);
points.material.color.set(0x0000ff);
camera.lookAt(parent1.position);
});
loader.load('../image/keqing.pcd', function (points) {
parent2.add(points);
scene.add(parent2);
points.material.color.set(0x9400D3);
});
//修改摄像机位置
camera.position.x = 300;
camera.position.z = 0;
camera.position.y = 0;
//修改世界坐标系位置
scene.rotation.x = 11;
scene.position.y = -150;
scene.position.z = -50;
//修改keqing位置与cat保持一致
parent2.scale.x = 180;
parent2.scale.y = 180;
parent2.scale.z = 180;
parent2.position.y = 0;
parent1.position.y = -100;
parent1.position.z = 50;
// 创建一个TransformControls控制器
var transformControls1 = new THREE.TransformControls(camera, renderer.domElement);
var transformControls2 = new THREE.TransformControls(camera, renderer.domElement);
transformControls1.setMode ('rotate');
transformControls1.setSpace ('local');
transformControls2.setMode ('rotate');
transformControls2.setSpace ('local');
// 将变换控件附加到目标对象上并添加到场景中
transformControls1.attach(parent1);
transformControls2.attach(parent2);
scene.add (transformControls1);
scene.add (transformControls2);
//创建一个DragControls对象，并传入数组、相机和渲染器的DOM元素
var objects = [parent1, parent2];
var dragControls = new DragControls(objects, camera, renderer.domElement);
// 为DragControls对象添加事件监听函数
dragControls.addEventListener('dragstart', function (event) {
//当拖拽开始时，取消动画循环
cancelAnimationFrame(animateId);
});
dragControls.addEventListener('drag', function (event) {
// 当拖拽进行时，更新相机的目标点为被拖拽物体的中心
});
dragControls.addEventListener('dragend', function (event) {
// 当拖拽结束时，恢复动画循环
//animate();
});
var animateId;
function animate() {
requestAnimationFrame(animate);
orbitControls.update()
renderer.render(scene, camera);
camera.lookAt(0,0,0);
parent1.rotation.z += 0.001;
parent2.rotation.z += 0.001;
}
animate();
/*
// 以下是我添加的代码，用于实现controls窗口
// 引入dat.gui.js库，用于创建controls窗口
import * as dat from 'https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.module.js';
// 创建一个dat.GUI对象，并设置其宽度和位置
var gui = new dat.GUI({width: 300}); // 设置controls窗口的宽度为300像素
gui.domElement.id = 'gui'; // 设置controls窗口的id为'gui'
// 为dat.GUI对象添加一些控件，用于显示和修改场景中的一些参数
gui.add(scene.rotation, 'x', 0, Math.PI * 2).name('场景旋转X'); // 添加一个控件，用于调整场景的X轴旋转角度
gui.add(scene.position, 'y', -200, 200).name('场景位置Y'); // 添加一个控件，用于调整场景的Y轴位置
gui.add(parent1.position, 'z', -100, 100).name('猫位置Z'); // 添加一个控件，用于调整猫的Z轴位置
gui.add(parent2.position, 'z', -100, 100).name('刻晴位置Z'); // 添加一个控件，用于调整刻晴的Z轴位置
*/
</script>
<style>
/* 以下为添加的样式规则，用于调整controls窗口的位置和外观 */
/* #gui {
/* position: absolute; /* 设置controls窗口的定位方式为绝对定位 */
/* top: 0; /* 设置controls窗口的上边距为0 */
/* right: 0; /* 设置controls窗口的右边距为0 */
/* z-index: 10; /* 设置controls窗口的层叠顺序为10，使其位于其他元素之上 */
/* }*/
</style>
</head>
<body></body>
<html>
problem: enter image description here enter image description here
And my root directory is here: enter image description here enter image description here
If any experts know how to solve it, please help me solve it. Thank you very much!o(╥﹏╥)o
Try:import TransformControls into project Expect to happen: import successfully resulted: import failed
Solution
When you import a module like so:
import { TransformControls } from "three/adds/TransformControls.js";
Then you need no THREE namespace when creating an instance. So instead of:
var transformControls1 = new THREE.TransformControls(camera, renderer.domElement);
do this:
var transformControls1 = new TransformControls(camera, renderer.domElement);
Answered By - Mugen87
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.