Question

threejs 怎么显示坐标轴

Answer 1

为了使操作更加简便快捷，uBuilder设置了若干快捷键。描述如下：

• 墙

• Ctrl：按住取消吸引。

• Shift：按住画垂直/水平的墙。

• Delete：删除墙。

• 物体

• Ctrl：按住单选物体；批量复制的 时候，按住Ctrl加滚轮调整距离。同时按键盘的上下左右可以调整方向。

• Shift：按住可在3D场景下旋转物体角度，点要旋转物体时方向的小球有3个点，代表3个坐标轴的方向，可以固定每次15度角旋转。

• Alt：按住能选中同一模型的所有物体

• F：按住。如有选中就是聚焦，无选中就是聚焦整个场景

• 空格： 2/3D切换

• 参考图设置比例

• Shift：按住点鼠标左键能快速设置中心点。

• ctrl：按住加鼠标左键比例尺的第一个点。

• Alt：按住加鼠标左键是比例尺的第二个点。

• Ctrl+z：撤销操作

• Ctrl+y：重复操作

• Shift：多物体选择之后按住Shift再点击物体可减选

• 预览

• ASDWQZ：有视角移动效果

• 空格：2D/3D 切换

• F：物体聚焦

Answer 2

1.如果你要更新的模型的一部分，你需要看看textures和放大器;材料的实例。 当您单击模型，你要突出整个模型或只是在面对当前？无论哪种方式，因为你工作在3D，您将需要创建哪些你unproject基于投影矩阵的位置拍摄深度的光线在你的3D场景，看看哪些对象（S）的位置向量相交它。幸运的是，代码已经是很多样品，如canvas_interactive_cubes在： 在init（）方法：document.addEventListener( 'mousedown', onDocumentMouseDown, false );

并且：function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
var particle = new THREE.Particle( particleMaterial );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 8;
scene.add( particle );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}

我是从那里开始。
2. 更新function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
var particle = new THREE.Sprite( particleMaterial );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 16;
scene.add( particle );
}
}

Answer 3

var axes = new THREE.AxesHelper(10);
scene.add(axes);