2
I 3D-Modell eines Autos mit three.js sichtbar zu machen versuche, und ich habe einige Probleme (mein Code unten):three.js - Objekte auswählen, erhalten Objektmaterial
1) Die 3d Das Modell wird in Maya 2016 erstellt und dann als .obj- und .mtl-Dateien exportiert. Ich will, dass die Teile des Autos auswählbar sind (ich meine, wenn du es auswählst, hebt es in grüner Farbe hervor, wenn du wieder auf das ausgewählte Teil klickst, geht es wieder auf normale Farbe zurück.) Das habe ich schon gemacht, aber das Problem ist, dass die Raycast im Pfad des Strahls alle Objekte auswählt, meine ich, wenn ich Tür wählen, wird alles dahinter ausgewählt und ich möchte nur die Tür wählen.
2) das zweite Problem, dass der Renderer visualisiert keine transparenten Materialien für ex. die Fenster und Scheinwerfer. Und ich habe einige 3D-Auto-Visualisierer gesehen, die transparente Materialien anzeigen können. Das dritte Problem geht auf Nummer 1 zurück. Wenn ich ein Teil auswähle, möchte ich seine vorherige Materialfarbe speichern (bevor ich die Hervorhebungsfarbe anwende), also wenn ich es abwähle, könnte es kommen Zurück die normale Farbe, habe ich die Farbe der Autolackierung, die nur falsch ist, da, wenn ich Windows deaktivieren sie rot gehen.
So, hier ist mein index.html Code:
<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>
Danke, Mann! Alles hat perfekt funktioniert! –
Glücklich zu helfen :) – Rush2112