- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 three.js 可视化汽车的 3d 模型,但我遇到了几个问题(我的代码在下面):
1)3d 模型是在 Maya 2016 中制作的,然后导出为 .obj 和 .mtl 文件。我希望汽车的部件可以选择(我的意思是当你选择它时,它以绿色突出显示,当你再次单击所选部件时,它会恢复正常颜色。我已经这样做了,但问题是光线转换会选择光线路径中的所有对象,我的意思是当我选择门时,它后面的所有东西都会被选中,而我只想选择门。
2)第二个问题是渲染器没有为 ex 可视化透明 Material 。车窗和车头灯。我还见过一些可以显示透明 Material 的 3d 汽车可视化器。
3)第三个问题回到第一个问题。当我选择一个部分时,我想存储它以前的 Material 颜色(在我应用高亮颜色之前),所以当我取消选择它时,它可以恢复正常颜色,我'我设置了车漆的颜色,这是错误的,因为当我取消选择 window 时,它们会变成红色。
所以,这是我的 index.html 代码:
<code><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<script src="JavaScript/three.js"></script>
<script src="JavaScript/Detector.js"></script>
<script src="JavaScript/OrbitControls.js"></script>
<script src="JavaScript/OBJLoader.js"></script>
<script src="JavaScript/MTLLoader.js"></script>
<script src="JavaScript/Projector.js"></script>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<div class="left">
<p>Low-Poly Croupière<p>
<p><a href="https://manu.ninja/" target="_top">manu.ninja</a></p>
</div>
<div id="test" class="left" hidden="true">
<p>xaxaxaxaxaaxaaxx<p>
</div>
<a class="right" href="https://github.com/Lorti/webgl-3d-model-viewer-using-three.js" target="_top">
<img src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67">
</a>
<script>
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
var container;
var camera, controls, scene, renderer;
var lighting, ambient, keyLight, fillLight, backLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var objects = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
/* Camera */
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 140;
/* Scene */
scene = new THREE.Scene();
lighting = true;
ambient = new THREE.AmbientLight(0xefefff, 1.0);
scene.add(ambient);
keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(60, 100%, 75%)'), 3.0);
keyLight.position.set(-100, 0, 100);
fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(540, 100%, 75%)'), 1.75);
fillLight.position.set(100, 0, 100);
backLight = new THREE.DirectionalLight(0xe3ffef, 1.0);
backLight.position.set(100, 0, -100).normalize();
/* Model */
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('e46_red_5.mtl', function (materials) {
materials.preload();
//materials.materials.default.map.magFilter = THREE.NearestFilter;
// materials.materials.default.map.minFilter = THREE.LinearFilter;
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('e46_red_5.obj', function (object) {
scene.add(object);
objects.push(object);
});
});
/* Renderer */
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
container.appendChild(renderer.domElement);
/* Controls */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
/* Events */
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('keydown', onKeyboardEvent, false);
//window.addEventListener( 'mousemove', onMouseMove, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onKeyboardEvent(e) {
if (e.code === 'KeyL') {
lighting = !lighting;
if (lighting) {
ambient.intensity = 0.25;
scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);
} else {
ambient.intensity = 1.0;
scene.remove(keyLight);
scene.remove(fillLight);
scene.remove(backLight);
}
}
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
var already_selected = false;
function onDocumentMouseDown( event ) {
event.preventDefault();
var projector = new THREE.Projector();
mouseVector = new THREE.Vector3();
mouseVector.x = 2 * (event.clientX / window.innerWidth) - 1;
mouseVector.y = 1 - 2 * ( event.clientY / window.innerHeight );
//var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
// -( event.clientY / window.innerHeight ) * 2 + 1,
// 0.5 );
//var raycaster = projector.pickingRay( mouseVector.clone(), camera );
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouseVector, camera );
var intersects = raycaster.intersectObjects( objects[0].children );
console.log(intersects)
if ( intersects.length > 0 ) {
var door = document.getElementById("test");
door.hidden =false;
for (var i = 0; i < intersects.length; i++) {
//intersects[i].object.material.color.setHex( Math.random() * 0xffffff );
//var currentColor = new THREE.Color(intersects[i].object.material.color);
var currentColor = +'0x' + intersects[i].object.material.color.getHex().toString( 16 );
if (already_selected == true) {
intersects[i].object.material.color.setHex( 0x380000 );
//intersects[i].object.material.color.setHex( currentColor );
already_selected = false;
}
else {
intersects[i].object.material.color.setHex( 0xccffcc );
already_selected = true;
}
}
}
}
</script>
</body>
</html></code>
最佳答案
1) 对于您的光线转换器问题,在您的相交数组中,您只想访问 intersects[0]
,因为这是光线转换相交的第一个对象。如果您不想选择第一个后面的项目,我看不出遍历整个数组有什么意义
2) 为了看到透明度,你必须设置(此处为对象).material.transparent = true;
我必须这样做才能在您单击对象时看到它们,但我还必须设置不透明度。假设您的对象已经分配了不透明度,那么它只需要透明度标志,否则您也可以设置(此处为对象).material.opacity = 一些数字;
3) 当我想“突出显示”一种 Material 时,我所做的实际上是更改 intersects[0].object.material.emissive.set('#(insert color)');
然后,当鼠标移动到对象上时,您将发射重置为 #000000
。自发光更好,因为您实际上并没有改变颜色,只是改变了外观。
关于javascript - three.js - 选择对象,获取对象 Material ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38472479/
我需要您在以下方面提供帮助。近一个月来,我一直在阅读有关任务和异步的内容。 我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法,并且它们都按预期工作: public Htt
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。 在这个例子中... define([], function () { "use
影响我性能的前三项操作是: 获取滚动条 获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格,其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时,它运
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
我最近一直在使用 sysctl 来做很多事情,现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意,当我尝试获取其他变量 HW_MACHINE 时,此代码可以完美运行。我还认为
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分,我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我使用 Gridlayout 在一行中放置 4 个元素。首先,我有一个 JPanel,一切正常。对于行数变大并且我必须能够向下滚动的情况,我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
由于以下原因,我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
我知道有很多关于此的问题,例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
如何获取文件中的最后一个字符,如果是某个字符,则删除它而不将整个文件加载到内存中? 这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
我是这个社区的新手,想出了我的第一个问题。 我正在使用 JSP,我成功地创建了 JSP-Sites,它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
我有一个函数,我们将其命名为 X1,它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y?执行.on后X1的结果? 最佳答案 您可以更改 Y 的范围以使其位于函
我是一名优秀的程序员,十分优秀!