तीन जेएस का उपयोग कर 3 डी मॉडल उदाहरण लोड करें

मेरे पास कोड है जो एक बटन दिखाता है जो कहता है: "3 डी मॉडल आयात करें"। वहां मैं स्क्रीन पर लोड और देखने के लिए उपयोगकर्ता को 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>
    
<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>
<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>
1

2 उत्तर

As Inateno said, directly importing 3ds Max data will be challenging. 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

Here's the glTF loader for Three.js: https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs

1
जोड़ा

आप एक 3DSMax मॉडल को सीधे लोड नहीं कर सकते हैं, आपको इसे JSON में रूपांतरित करना होगा, लेकिन मुझे नहीं लगता कि आप इसे सीधे क्लाइंट पक्ष पर कर सकते हैं। यह एक सर्वर को भेजना संभव है जिसने रूपांतरण किया है तो क्लाइंट JSON में मॉडल वापस ले लेगा और आप इसे पढ़ने में सक्षम होंगे (लेकिन आपको सर्वर पर कनवर्टर की आवश्यकता होगी)।

I already looked for 3dsmax format to JSON directly but didn't found. Here are converters but they have to be installed in the soft, so you can export to fbx then JSON. https://github.com/mrdoob/three.js/tree/master/utils/converters

You can also look here an online converter. 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

0
जोड़ा
जोड़ा लेखक WestLangley, स्रोत
हां लेकिन 3dsmax प्रत्यक्ष निर्यात अच्छी तरह से काम नहीं करता है, इसलिए लोग सिर्फ ओबीजे का उपयोग करते हैं तो JSON ^^ अन्य अच्छा लिंक धन्यवाद :)
जोड़ा लेखक Inateno, स्रोत