小编Wes*_*ley的帖子
仅当鼠标位于画布上时才允许鼠标控制three.js场景
three.js画布在一个包含其他内容的较大网页内是一个500 x 500的正方形,我需要鼠标控制相机(用于缩放和旋转对象)才能在鼠标位于500 x 500平方内时发生.
此外,我无法滚动网页,但可能会在我们将鼠标事件监听器与500 x 500画布隔离时修复.
当前代码:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:relative;
left:100px;
top:100px;
background-color: #eeeeee;
border:1px solid black;
width:500px;
height:500px;
}
canvas {
width:500px;
height:500px;
}
</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script>
var container, camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var width = container.clientWidth;
var height = container.clientHeight;
camera = new THREE.PerspectiveCamera( 10 , width / height , .1 …推荐指数
解决办法
查看次数
如何删除dat.GUI元素？
我发现这个函数删除了一个gui元素,但我认为它已经过时了.到目前为止,我还没有找到任何知道如何删除gui的任何部分的人,无论是整个dat.GUI()还是只是添加到dat.GUI()的元素.第一个可能就足够了我需要的东西(只是将dat.GUI()一起移除)但是任何一个都会超级有用!
应该删除dat.GUI()
gui = new dat.GUI();
...
removeGui(gui);
function removeGui(gui, parent)
{
if(!parent)
{
parent = dat.GUI.autoPlaceContainer;
}
parent.removeChild(gui.domElement);
}
但是给出了错误:无法调用undefined的方法'removeChild',所以我猜测autoPlaceContainer是错误的.
这个函数的原作者留下了这些笔记:
其中参数gui表示要删除的DAT.GUI,parent是父容器,如果在实例化DAT.GUI时未指定domElement,则不需要传递父级.
推荐指数
解决办法
查看次数
Wavefront的OBJ和MTL的MIME类型
我正在使用ThreeJS和WebGL构建一个小型3D应用程序.我故意选择不将模型转换为ThreeJS兼容的.json文件,而是开始构建导入器.它工作正常,但我还计划让应用程序决定使用文件扩展名和MIME类型加载了哪种类型的模型,如果第一个未知,则使用后者.
我已经读过MIME类型应该是的地方,application/wavefront-obj因为还有model树,所以会有点奇怪,但不管怎么说都没关系.虽然浏览IANA网站的此文件类型不会产生任何结果.
我错过了什么吗？
推荐指数
解决办法
查看次数
如何禁用three.js来调整两个幂的图像？
如果不是2的幂,three.js会自动调整纹理图像的大小.在我的情况下我使用自定义画布作为纹理,这不是两个的力量.而调整大小使纹理不正确.有没有办法禁用三个.js中的图像大小调整
推荐指数
解决办法
查看次数
如何使用正交投影执行缩放？
我只是尝试使用THREE.OrbitControls来执行缩放投影,但我没有得到我想要的行为.
我认为可以将viewSize更改为向左,向右,向上和向下相乘以创建近似缩放的内容
谁有更好的想法？
推荐指数
解决办法
查看次数
在没有轨迹球控制或其他相机控制库的情况下缩放三个相机中的相机
我正在尝试使用threeJS来控制场景中的摄像头.我目前使用键盘上的左右键将摄像机设置为围绕我的物体绕圈运行.但有谁知道我会如何缩放？这是我目前的代码:
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0,20,35);
var rotSpeed = .02;
function checkRotation(){
var x = camera.position.x,
y = camera.position.y,
z = camera.position.z;
if (keyboard.pressed("left")){ //MH - find a way to do this in a switch statement
camera.position.x = x * Math.cos(rotSpeed) + z * Math.sin(rotSpeed);
camera.position.z = z * Math.cos(rotSpeed) - x * Math.sin(rotSpeed);
} else if (keyboard.pressed("right")){
camera.position.x = x * Math.cos(rotSpeed) - z * Math.sin(rotSpeed);
camera.position.z = z * Math.cos(rotSpeed) + x …推荐指数
解决办法
查看次数
三个js可点击的对象
我有两个3d对象"网格",我在three.js中创建.我想向这些对象添加click事件,这样当我点击其中一个对象时,它会被放大,当我点击另一个时,它会旋转.
我尝试使用此方法向对象添加click事件,但它无法正常工作.
<script src='threex.domevent.js'> </script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z = 100;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.addEventListener( 'click',function(){cubeScale()} , false );
function cubeScale()
{
cube.scale.x *= 20;
}
var render = function () {
requestAnimationFrame(render);
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
推荐指数
解决办法
查看次数
Three.js:添加和删除旋转对象的子项
我正在尝试模拟一个魔方.我想随意选择一张脸并旋转它.所以我创建了27个立方体网格并定位它们.你可以在这里看到工作(不规律)rubik的立方体 http://codepen.io/theonepa1/full/fzAli
问题是什么
从上面的链接可以看出,边缘上较小的立方体以随机方式移动(至少不是我预期的那样)
我做了什么.
在尝试旋转面部时,我将属于面部的9个立方体分组为子节点,将它们添加到新的Object3D对象中.然后我使用object3d.rotate.x(或y或z)沿其轴旋转object3d.
我调试了什么
我确保我为第二次面部旋转选择的立方体是正确的.第一次面部旋转完成后,我更新其虚拟位置(而不是实际坐标).因此,对于第二个面旋转,我已经验证了正确选取了立方体.
实际发生了什么
我做的一个观察是,在object3d(父亲持有9个面的立方体)旋转之后,立方体(较小的)轴被改变.并且面部旋转后立方体的坐标也不会自动更新.例如,如果其中一个立方体在面旋转之前具有(0,0,22)坐标,则即使在旋转之后坐标也是相同的.但是,立方体的轴的方向改变了.
围绕轴旋转一组对象的最佳方法是什么？使用Object3D是否正确？我们是否应该将孩子从一个父母中删除,然后再将其添加到另一个组进行第二次面部轮换？
我是否需要对各个立方体进行某种更新,然后再将它们添加到第二组以进行第二次面旋转？
我已经阅读了一些关于applyMatrixWorld的帖子,但我真的无法理解它对轴的方向和立方体坐标的影响是什么？
你能告诉我在哪里可以阅读像applyMatrixWorld这样的概念,它是普通3D编程中的某种常见概念吗？
这是一个非常长的问题.非常感谢你的回复:)
推荐指数
解决办法
查看次数
Three.js:缩放时如何保持精灵文本大小不变
在three.js中,当鼠标被缩放时,文本将被放大并相应地减小.
var texture = new THREE.Texture( canvas );
var material = new THREE.SpriteMaterial ( { map: texture, transparent:false } );
var sprite = new THREE.Sprite( material );
当鼠标缩放时,如何防止文本大小发生变化？
推荐指数
解决办法
查看次数
找到2点之间的具体点 - three.js
如何在thgree.js场景中的2个点(A(x,y,z),B(x,y,z))之间找到一个点(C(x,y,z))？
我知道这个:中点我可以找到它们之间的中间点,但我不想要中间点,我想找到它们之间的点,并且距离A点的距离是多少？
在这张图片中你可以看到我的意思:
谢谢.
推荐指数
解决办法
查看次数