Загрузите 3D-модель с элементом HTML5 canvas и Javascript
У меня есть простая концепция, для которой я хочу использовать HTML5, но я новичок, когда дело доходит до зрителей Canvas и моделей, написанных на Javascript. У меня есть 3D-модель настольной лампы, и я хотел бы, чтобы только головная часть лампы вращалась движением мыши. Этот эффект тени блока CSS3 является своего рода тем, что я имею в виду, но у меня уже есть 3D-модель, нарисованная в Maya, которую я хотел бы загрузить с HTML5 и использовать Javascript для взаимодействия с курсором. Мне нужна только головная часть лампы, чтобы сохранить 3D-атрибуты, я могу использовать png для базы. Надеюсь, это имеет смысл, я бы обычно использовал Flash, но я бы хотел сделать это с HTML5, если это возможно.
3 ответа
Я новичок в webgl, вы можете сделать это с three.js. Если вы используете Blender, есть скрипт-конвертер, который преобразует модель в файл json.
Затем вы можете загрузить файл json на холст, используя загрузчик json файла three.js. Я нашел эти ссылки полезными для загрузки модели JSON. Надеюсь, поможет
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
проверьте источник этого примера - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html
CSS 3 не поможет вам в этом, похоже, вам нужно использовать WebGL, который является "JavaScript API для рендеринга интерактивной 3D-графики в любом совместимом веб-браузере без использования плагинов"
Попробуйте статью в Википедии и официальный сайт (есть также " тест, если ваш браузер поддерживает сайт WebGL ")
Попробуйте jsc3d по адресу: https://code.google.com/p/jsc3d/
Цитируется: ..JSC3D построен на чистом программном рендеринге Javascript с использованием технологии 2d canvas, а также на дополнительном сервере WebGL, который обеспечивает более эффективный рендеринг...