Question

我的代码显示了一个按钮，上面写着：＆＃34;导入3d模型＆＃34;。在那里，我希望让用户选择要在屏幕上加载和查看的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>

Answer 1

正如Inateno所说，直接导入3ds Max数据将具有挑战性。如果他建议的总体方向是你的选择，那么你可能会感兴趣的是一个正在进行的新项目。导出路径为3ds Max＆gt; OpenCOLLADA＆gt; gltF＆gt; three.js所

这是Three.js的glTF加载器： https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs

Answer 2

你无法加载direclty 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

使用三个js加载3d模型示例

2 个答案: