Question

我想请求一些关于模型温度变化项目的帮助。我使用OBJLoader加载从autoCAD导出的模型，我需要通过颜色变化来显示温度变化。我坚持点，如何将加载的对象划分到较小的区域，也许设置他们一些id，而不是设置该区域的特定颜色。我将不胜感激任何帮助或建议。

到现在为止，我有这个：

 <body>
    <div id="info">
         <a href="http://threejs.org" target="_blank">three.js</a> - Temperature model
    </div>

    <script src="../three.js-lib/build/three.min.js"></script>
    <script src="../three.js-lib/examples/js/loaders/OBJLoader.js"></script>

    <script src="../three.js-lib/examples/js/Detector.js"></script>
    <script src="../three.js-lib/examples/js/controls/OrbitControls.js"></script>

    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var camera, scene, renderer;
        var container;

        init();

        function init() {
            container = document.getElementById("container");
            scene = new THREE.Scene();
            scene.add( new THREE.AmbientLight( 0x999999 ) );

            camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );

            camera.up.set( 0, 0, 10 );
            camera.position.set( 0, -150, 95 );
            camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );

            scene.add( camera );

            var grid = new THREE.GridHelper( 200, 10.0 );
            grid.setColors( 0xffffff, 0x555555 );
            grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
            scene.add( grid );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor( 0x999999 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            //loader

            loadModel();

            var controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.addEventListener( 'change', render );
            controls.target.set( 0, 1.2, 2 );
            controls.update();

            window.addEventListener( 'resize', onWindowResize, false );
        }

        function loadModel() {
            var onProgress = function (xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
            };

            var onError = function (xhr) {};

            var manager = new THREE.LoadingManager();
            manager.onProgress = function (item, loaded, total) {
                console.log(item, loaded, total);
            };

            var loader = new THREE.OBJLoader(manager);
            loader.load('temperature/suciastka.obj', function (object) {
                object.traverse(function (child){
                    if (child instanceof THREE.Mesh) {
                        child.material = new THREE.MeshPhongMaterial({color: 0x451E0C, vertexColors: THREE.VertexColors});
                    }
                })
                scene.add(object);
                render(); 
            }, onProgress, onError);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

            render();
        }

        function render() {
            renderer.render( scene, camera );
        }

    </script>

Three.js Object3D划分和自定义着色

0 个答案: