个人中心
gpt4 book ai didi

javascript - three.js - 选择对象，获取对象 Material

转载 作者：行者123 更新时间：2023-11-29 21:21:19 26 4
gpt4 key购买 nike

我正在尝试使用 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/

26 4 0
文章推荐： javascript - 在 JavaScript 中如何使 slider 在滑动时显示信息？
文章推荐： javascript - RemoveAttr 和 addattr 与 ajax 响应第一次工作，之后
文章推荐： javascript - Angular 2 变化检测机制
文章推荐： Lodash Wrapper 对象上的 Javascript 划分
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com