- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 OBJLoader 加载大型 3D 模型(在 .obj 文件中描述),但它将整个文件加载为单个 Object3D 对象。使用 scene.add(object) 它将整个对象添加到场景中。
我需要选择选定的网格并更改它的一些属性,但是当我添加鼠标功能并使用 Ray.intersectObjects 尝试获取选定的网格时,它永远不起作用。我找不到哪里出错了。
希望得到一些帮助来尝试使它正常工作。谢谢!
这让我困惑了几天。以下是我的全部代码:
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - OBJLoader test
</div>
<script src="../build/Three.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var _mouse = { x: 0, y: 0 },
objects = [],
_projector = new THREE.Projector();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene.add( camera );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var texture = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
var loader = new THREE.OBJLoader();
loader.load( "obj/male02/male02.obj", function ( object ) {
for ( var i = 0, l = object.children.length; i < l; i ++ ) {
object.children[ i ].material.map = texture;
}
object.position.y = - 80;
object.position.z = - 160;
scene.add( object );
objects.push( object );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
// find intersections
_mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
_mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3( _mouse.x, _mouse.y, 1 );
var ray = _projector.pickingRay( vector, camera );
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
alert("selected!");
_SELECTED_DOWN = true;
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
最佳答案
ray.intersectObjects()
不是递归的。您需要传递要测试的对象列表。
关于javascript - 从 OBJ 文件中选取选定的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11007256/
我正在尝试创建键值对并推送到数组,但我得到的只是 [Obj Obj]、[Obj Obj]。我创建了一个传递名称和值的函数,用于将键和值分配给 JavaScript 对象。这是我的代码。不确定我错过了什
似乎在 for 循环的上下文中,关于对象的语法发生了变化。 为什么 console.log() 不应该运行相同的东西?第一个按预期运行,第二个呈现错误“steve is not defined”: v
在 Ady Osmani 的 blog post关于 js 中的命名空间,他提到了 5 个常见做法来测试先前定义的命名空间/对象是否存在以防止覆盖。我在这里复制我关注的 3 个: var myAppl
有没有办法(我怀疑它涉及继承和多态)来区分OBJ o, OBJ& o, const OBJ& o?我希望在 3 个不同的程序中使用相同的代码,并使用相同的方法名称调用不同的方法。 int main()
我正在寻找一个正则表达式来分割这种内容: obj.method(obj.attr,obj.attr2) 我希望拆分返回一个数组: ["obj", "method(obj.attr, obj.attr2
我想知道这些方法中哪种更好: var Obj = Obj || {}; 或 if (Obj === undefined || typeof Obj !== 'object') { Obj = {}
我正在尝试将一个值推送到数组的属性,如下所示 var obj = {}; obj.a = (obj.a || []).push(10); console.log( typeof obj.a );
为了避免误解,我们首先要就某些词语的含义达成一致。以下含义并非普遍接受的含义,我仅建议将它们作为此问题的背景。 function -- Function 的一个实例。它有一个与其关联的过程。 obje
我总是不确定哪个是正确的以及该使用哪个。 通常我会进行(obj == null)检查。我认为最好直接问。 我应该使用以下哪一项: if (obj == null) { alert(
我正在处理一些使用 pygraph 模块的类,当我使用 add_node() 方法时,它总是出现“node xxx already in graph”。所以我尝试使用 deepcopy() 创建一个新
在 this page您可以看到以下示例,了解如何实现数组的indexOf: if (!Array.prototype.indexOf) { Array.prototype.indexOf = f
(1) 和 (2) 之间是否存在任何重要差异(语义、性能相关等)? var obj = obj || {}; var obj = Object(obj); 上下文。第一个是我在 Django 的模板和
我想知道 obj !== obj 什么时候可以为真? 这是我在书上看到的一行代码,我很纳闷。 var result = class2type[(obj == null || obj !== obj)]
我有时会看到这种模式...... obj.method.call(obj, arg) 我不明白为什么它不同于... obj.method(arg) 为什么要使用第一种模式? 我的天啊,似乎引起了很
我刚刚在一段 React 代码中发现了以下结构(名称已更改): 据我了解,bind 只是执行相应的函数,并将函数的 this 设置为第一个参数,并向其传递更多参数。由于 func 已经是我们想要的
当我们查看Underscore.js源码时,我们可以看到如下内容: _.isObject = function (obj) { return obj === Object(obj);
我在将项目发布到本地系统时收到此错误 Copying file obj\Debug\build.force to obj\Release\Package\PackageTmp\obj\Debug\bu
我有一个类型为 Expression> 的现有表达式;它包含类似 cust => cust.Name 的值. 我还有一个父类,其字段类型为 T .我需要一个接受上述作为参数并生成一个以父类 ( TMo
我在当前目录中有 add.c sub.c 并通过 makefile 编译它们。 我做了以下事情: program 1: objs=$(patsubst %.cpp, %.o, $(wildcard *
这个问题在这里已经有了答案: Is there a difference between copy initialization and direct initialization? (9 个回答)
我是一名优秀的程序员,十分优秀!