1
中心旋转mergeometry对象,我苦苦寻找其中心旋转对象的方式。目前我可以旋转场景,但是当我做旋转时,物体远离用户。我在论坛的同一行查看了一些已经提出的问题,但无法使其发挥作用。下面是HTML的一部分/ three.js所文件我用/连接,你会发现整个工作example.Any的帮助感激在其three.js所
<script src="../build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, controls, scene, renderer;
var pickingData = [], pickingTexture, pickingScene;
var objects = [];
var highlightBox;
var splitCoord;
var avStdProp;
var mouse = new THREE.Vector2();
var offset = new THREE.Vector3(10, 10, 10);
var geom = new THREE.BoxGeometry(0.005, 0.005, 0.005);
geom.colorsNeedUpdate = true;
init();
animate();
function init() {
container = document.getElementById("container");
camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.x=250;
camera.position.y=300;
camera.position.z=400;
renderer = new THREE.WebGLRenderer({ antialias: true });
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 4;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
pickingScene = new THREE.Scene();
pickingTexture = new THREE.WebGLRenderTarget(800, 800);
pickingTexture.minFilter = THREE.LinearFilter;
pickingTexture.generateMipmaps = false;
scene.add(new THREE.AmbientLight(0x555555));
var light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 500, 2000);
scene.add(light);
var geometry = new THREE.Geometry(),
pickingGeometry = new THREE.Geometry(),
pickingMaterial = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }),
defaultMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
function applyVertexColors(g, c) {
g.faces.forEach(function(f) {
var n = (f instanceof THREE.Face3) ? 3 : 4;
for(var j = 0; j < n; j ++) {
f.vertexColors[ j ] = c;
}
});
}
var color = new THREE.Color();
var matrix = new THREE.Matrix4();
var quaternion = new THREE.Quaternion();
var coord="219_163_189;130_173_179;161_113_231;92_103_176;169_193_180;161_165_187;262_163_166;198_143_155;161_189_155;125_121_107";
splitCoord=coord.split(";");
var coordColr="0_255_255;255_255_0;0_0_255;0_255_0;255_255_0;0_255_0;0_0_255;0_255_255;255_255_0;210_210_45";
var splitCoordColor=coordColr.split(";");
var avgStd="1_0;3_0;0_0;2_0;3_0;2_0;0_0;1_0;3_0;3_0.35";
avStdProp=avgStd.split(";");
for (var i = 0; i < splitCoord.length; i++) {
var position = new THREE.Vector3();
var xyz=splitCoord[i].split("_");
var col=splitCoordColor[i].split("_");
position.x = xyz[0];
position.y = xyz[1];
position.z = xyz[2];
var rotation = new THREE.Euler();
rotation.x = 0
rotation.y = 0;
rotation.z = 0;
var scale = new THREE.Vector3();
scale.x = 200 + 100;
scale.y = 200 + 100;
scale.z = 200 + 100;
quaternion.setFromEuler(rotation, false);
matrix.compose(position, quaternion, scale);
// give the geom's vertices a random color, to be displayed
col[0]=col[0]/255;
col[1]=col[1]/255;
col[2]=col[2]/255;
applyVertexColors(geom, color.setRGB(col[0], col[1], col[2]));
geometry.merge(geom, matrix);
// give the geom's vertices a color corresponding to the "id"
applyVertexColors(geom, color.setHex(i));
pickingGeometry.merge(geom, matrix);
pickingData[ i ] = {
position: position,
rotation: rotation,
scale: scale
};
}
var drawnObject = new THREE.Mesh(geometry, defaultMaterial);
scene.add(drawnObject);
pickingScene.add(new THREE.Mesh(pickingGeometry, pickingMaterial));
highlightBox = new THREE.Mesh(
new THREE.BoxGeometry(0.009, 0.009, 0.009),
new THREE.MeshLambertMaterial({ color: 0xffffff }
));
scene.add(highlightBox);
//renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(800,800);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
renderer.domElement.addEventListener('mousemove', onMouseMove);
}
//
function onMouseMove(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
}
function pick() {
//render the picking scene off-screen
renderer.render(pickingScene, camera, pickingTexture);
//create buffer for reading single pixel
var pixelBuffer = new Uint8Array(4);
//read the pixel under the mouse from the texture
renderer.readRenderTargetPixels(pickingTexture, mouse.x+window.pageXOffset, pickingTexture.height - (mouse.y+window.pageYOffset), 1, 1, pixelBuffer);
//interpret the pixel as an ID
var id = (pixelBuffer[0] << 16) | (pixelBuffer[1] << 8) | (pixelBuffer[2]);
var data = pickingData[ id ];
if (data) {
//move our highlightBox so that it surrounds the picked object
if (data.position && data.rotation && data.scale && controls.enabled){
highlightBox.position.copy(data.position);
highlightBox.rotation.copy(data.rotation);
highlightBox.scale.copy(data.scale).add(offset);
highlightBox.visible = true;
}
}
else {
highlightBox.visible = false;
}
}
function animate() {
requestAnimationFrame(animate);
render();
//stats.update();
}
function render() {
controls.update();
pick();
renderer.render(scene, camera);
}
任何帮助吗?
福尔克您好,感谢您的解决方案。事实上,它现在确实有效。但另外它也造成了一个小问题。如果您在我的代码中注意到,这个高亮框就在那里。方框的目的是突出显示鼠标指针下的点。这次高亮框出现在比实际鼠标指针错误的位置。任何想法? – user1275607
采摘不包括在你的榜样,所以我不知道你是如何做的,并不能测试它。你是否尝试过将拾取几何体对中? –
嗨福尔克,我试图居中采摘几何形状为好,但没有奏效。我已经使用我正在使用的pick功能更新了示例。实际上,当我选中几何体时,它确实选择了正确的点,但高亮框出现在其他地方。 – user1275607