美文网首页
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