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

Question

I have code which shows a button that says: "Import 3d model". 我的代码显示一个按钮，上面写着：“导入3d模型”。 There I wish to let the user select a 3ds/max/gsm 3d model to load and seen on the screen. 我希望在那里让用户选择要加载的3ds / max / gsm 3d模型并在屏幕上看到。

My problem is that i just don't know how to do that, can some one write a simple example of how to do that? 我的问题是我只是不知道该怎么做，有人可以写一个简单的例子来做到这一点吗？ i'm kind of stuck.. thanks for any help :) 我有点卡住..谢谢您的帮助:)

<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

As Inateno said, directly importing 3ds Max data will be challenging. 正如Inateno所说，直接导入3ds Max数据将具有挑战性。 If the general direction he suggests is an option for you, then there's a new project under way that might be of interest to you. 如果他建议的总体方向是您的选择，那么正在进行的新项目可能会让您感兴趣。 Export path would be 3ds Max > OpenCOLLADA > gltF > Three.js 导出路径为3ds Max> OpenCOLLADA> gltF> Three.js

Here's the glTF loader for Three.js: https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs 这是Three.js的glTF加载程序： https : //github.com/KhronosGroup/glTF/tree/master/loaders/threejs

Answer 2

You can't load direclty a 3DSMax model, you have to convert it to JSON, but I don't think you can did it directly on the client side. 您无法加载直接的3DSMax模型，必须将其转换为JSON，但我认为您不能直接在客户端上完成。 It's possible to send it to a server who did the conversion then client get back the model in JSON and you'll be able to read it (but you'll need a converter on the server). 可以将其发送到进行转换的服务器，然后客户端以JSON形式获取模型，您将能够读取该模型（但服务器上需要一个转换器）。

I already looked for 3dsmax format to JSON directly but didn't found. 我已经在寻找直接将3dsmax格式转换为JSON的方法，但是没有找到。 Here are converters but they have to be installed in the soft, so you can export to fbx then JSON. 这是转换器，但必须将它们安装在软件中，因此您可以先导出到fbx，再导出到JSON。 https://github.com/mrdoob/three.js/tree/master/utils/converters https://github.com/mrdoob/three.js/tree/master/utils/converters

You can also look here an online converter. 您也可以在这里查看在线转换器。 http://www.babylonjs.com/converter.html http://www.babylonjs.com/converter.html

And here there is some other converters but not sure it'll work with ThreeJS I don't try ^^ https://github.com/BabylonJS/Babylon.js/tree/master/Exporters 这里还有其他一些转换器，但不确定是否可以与ThreeJS一起使用，我不尝试^^ https://github.com/BabylonJS/Babylon.js/tree/master/Exporters

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

问题描述

2 个解决方案

解决方案1
1 2013-12-19 00:01:37

解决方案2
0 2013-12-07 14:51:07

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

问题描述

2 个解决方案

解决方案1 1 2013-12-19 00:01:37

解决方案2 0 2013-12-07 14:51:07

解决方案1
1 2013-12-19 00:01:37

解决方案2
0 2013-12-07 14:51:07