使用三个js加载三维模型示例

load 3d model example using three js

本文关键字：三维 加载 模型 js 三个      更新时间：2024-03-16

我有一段代码，显示了一个按钮，上面写着："导入三维模型"。在那里，我希望让用户选择一个3ds/max/gsm 3d模型来加载并在屏幕上看到。

我的问题是，我只是不知道该怎么做，有人能写一个简单的例子来说明如何做到这一点吗？我有点被卡住了。。感谢您的帮助：）

<html>
<head>
    <script src="js/three.js"></script>
    <script src="js/jquery-2.0.3.min.js"></script>
    <link href="CSS/maincss.css" rel="stylesheet" />
    <title>PREZI</title>
</head>
<body>
    <center>
    <div id="share-bottom">
        <button type="button" class="photo-button"> Upload 3D Model</button>
        <div id="upload-wrap">
            <input id="upload-wrap-button" type="file" />
        </div>
    </div>
</center>
<script>
    $('#share-bottom button').click(function () {
        $('#upload-wrap-button').click();
    });
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(document.body.clientWidth, document.body.clientHeight);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColorHex(0xEEEEEE, 1.0);
    renderer.clear();
    renderer.shadowCameraFov = 50;
    renderer.shadowMapWidth = 1024;;
    renderer.shadowMapHeight = 1024;

    var fov = 45; // camera field-of-view in degrees
    var width = renderer.domElement.width;
    var height = renderer.domElement.height;
    var aspect = width / height; // view aspect ratio
    var near = 1; // near clip plane
    var far = 10000; // far clip plane
    var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = -400;
    camera.position.x = 200;
    camera.position.y = 350;
    var scene = new THREE.Scene();
    var cube = new THREE.Mesh(
      new THREE.CubeGeometry(50, 50, 50),
      new THREE.MeshLambertMaterial({ color: 0xff0000 })
    );
    scene.add(cube);
    cube.castShadow = true;
    cube.receiveShadow = true;
    var plane = new THREE.Mesh(
      new THREE.PlaneGeometry(400, 200, 10, 10),
      new THREE.MeshLambertMaterial({ color: 0xffffff }));
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = -25.1;
    plane.receiveShadow = true;
    scene.add(plane);
    var light = new THREE.SpotLight();
    light.castShadow = true;
    light.position.set(170, 330, -160);
    scene.add(light);
    var litCube = new THREE.Mesh(
      new THREE.CubeGeometry(50, 50, 50),
      new THREE.MeshLambertMaterial({ color: 0xffffff }));
    litCube.position.y = 50;
    litCube.castShadow = true;
    scene.add(litCube);
    renderer.shadowMapEnabled = true;

    renderer.render(scene, camera);
    var paused = false;
    var last = new Date().getTime();
    var down = false;
    var sx = 0, sy = 0;
    window.onmousedown = function (ev) {
        down = true; sx = ev.clientX; sy = ev.clientY;
    };
    window.onmouseup = function () { down = false; };
    window.onmousemove = function (ev) {
        if (down) {
            var dx = ev.clientX - sx;
            var dy = ev.clientY - sy;
            camera.position.x += dx;
            camera.position.y += dy;
            sx += dx;
            sy += dy;
        }
    }
    function animate(t) {
        if (!paused) {
            last = t;
            litCube.position.y = 60 - Math.sin(t / 900) * 25;
            litCube.position.x = Math.cos(t / 600) * 85;
            litCube.position.z = Math.sin(t / 600) * 85;
            litCube.rotation.x = t / 500;
            litCube.rotation.y = t / 800;
            renderer.clear();
            camera.lookAt(scene.position);
            renderer.render(scene, camera);
        }
        window.requestAnimationFrame(animate, renderer.domElement);
    };
    animate(new Date().getTime());
    onmessage = function (ev) {
        paused = (ev.data == 'pause');
    };
</script>
</body>
</html>

正如Inateno所说，直接导入3ds Max数据将是一项挑战。如果他建议的大方向对你来说是一个选择，那么你可能会感兴趣的一个新项目正在进行中。导出路径为3ds Max>OpenCOLLADA>gltF>Three.js

以下是Three.js的glTF加载程序：https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs

你不能直接加载3DSMax模型，你必须将其转换为JSON，但我认为你不能直接在客户端完成。可以将其发送给进行转换的服务器，然后客户端以JSON形式返回模型，然后您就可以读取它（但您需要在服务器上安装一个转换器）。

我已经直接查找了JSON的3dsmax格式，但没有找到。这里有转换器，但它们必须安装在软件中，因此您可以导出到fbx，然后导出到JSON。https://github.com/mrdoob/three.js/tree/master/utils/converters

您也可以在这里查看在线转换器。http://www.babylonjs.com/converter.html

这里还有一些其他转换器，但不确定它是否能与ThreeJS一起工作，我不尝试^^https://github.com/BabylonJS/Babylon.js/tree/master/Exporters

相关文章：