如何在three.js中操纵BufferGeometry的位置

时间:2017-12-26 07:04:50

标签: javascript three.js position

我想使用three.js重新渲染3d模型(本地文件),使其更加粗糙或更精致。但是如何处理BufferGeometry(用STLLoader.js加载)来实现呢?还是需要处理其他属性?

var camera, scene, renderer;
var material, mesh;

        init();
        animate();

        function init() {

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 150;
            camera.position.y = 50;
            camera.position.z = 150;
            camera.lookAt(scene.position);

            var loader = new THREE.STLLoader();
            loader.load("sample.stl", function (geometry) {

                var positions = geometry.attributes.position.array;

                // do something with positions

                material = new THREE.MeshNormalMaterial();
                mesh = new THREE.Mesh(geometry, material);
                mesh.scale.set(3, 3, 3);
                scene.add(mesh);
            });

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth, window.innerHeight);
                       document.getElementById("webgl").appendChild(renderer.domElement);

            var controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;
        }

        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );

        }
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


<div id="webgl" style="height: 1000px"></div>

0 个答案:

没有答案