个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 05:41:48 25 4
gpt4 key购买 nike

我有显示一个按钮的代码:“导入 3d 模型”。我希望让用户选择一个 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

关于javascript - 使用三个 js 加载 3d 模型示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20383094/

25 4 0
文章推荐： javascript - 检查现有和定义的元素
文章推荐： java - Spring Boot 多模块 考虑在配置中定义一个 type 的 bean
文章推荐： java - 在列表中流式传输不同的数组元素
文章推荐： javascript - 整理 Javascript，捕获和操作 URL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com