美文网首页
html渲染3d模型图 成功案例

html渲染3d模型图 成功案例

作者: 静_c540 | 来源:发表于2019-07-30 11:15 被阅读0次

    thress.js文档:https://www.techbrood.com/threejs/docs/

    html代码:

    <!DOCTYPE html>

    <html lang="en">

        <meta charset="UTF-8">

        <title>Title

        <style type="text/css">

            body {

    overflow:hidden;

                margin:0;

            }

    <script src="https://threejs.org/build/three.min.js">

    <script src="https://threejs.org/examples/js/loaders/OBJLoader.js">

    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">

        var url='http://192.168.1.186:8080/image/scan.obj';

        var scene =new THREE.Scene();

        var camera =new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000);

        camera.position.set(0, 0, 100);

        var renderer =new THREE.WebGLRenderer();

        renderer.setClearColor(0x404040);

        renderer.setSize(420, 420);//布景大小

        document.body.appendChild(renderer.domElement);

        var controls =new THREE.OrbitControls(camera, renderer.domElement);

        var light =new THREE.DirectionalLight(0xffffff, 0.5);

        light.position.setScalar(100);

        scene.add(light);

        scene.add(new THREE.AmbientLight(0xffffff, 0.5));

        scene.add(new THREE.GridHelper(100, 100));

        var objLoader =new THREE.OBJLoader();

        objLoader.load(url, function (object) {

    object.rotation.x = -Math.PI *0.5;

            var box =new THREE.Box3().setFromObject(object);

            var box3Helper =new THREE.Box3Helper(box);

            scene.add(box3Helper);

            scene.add(object);

        });

        function render() {

    requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

    render();

    相关文章

      网友评论

          本文标题:html渲染3d模型图 成功案例

          本文链接:https://www.haomeiwen.com/subject/mfpgrctx.html