Загрузить трехмерную модель с элементом холста HTML5 и Javascript

Question

У меня есть простая концепция, для которой я хочу использовать HTML5, но я новичок в представлении о холсте и модели, написанном на Javascript. У меня есть трехмерная модель настольной лампы, и я бы хотел, чтобы только головная часть лампы вращалась с движением мыши. Это CSS3 box shadow effect - это то, что я имею в виду, но у меня уже есть 3D-модель, нарисованная в Maya, которую я бы хотел загрузить с помощью HTML5 и использовать Javascript для взаимодействия курсора. Мне нужна только головная часть лампы, чтобы сохранить 3D-атрибуты, я могу использовать png для базы. Надеюсь, это имеет смысл, я бы просто использовал flash, но я хотел бы сделать это с помощью HTML5, если это возможно.

Answer 1

CSS 3 не поможет вам в этом, кажется, что вы должны будете использовать WebGL, который является «JavaScript API для визуализации интерактивных 3D-графики в любой совместимый веб-браузер без использования плагинов»

Попробуйте wikipedia article и official site (есть также «test if your browser supports WebGL site»)

Answer 2

Я новичок в 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

Answer 3

Попробуйте jsc3d на: https://code.google.com/p/jsc3d/

Цитируется: ..JSC3D построен на чистом Javascript программного обеспечения визуализации с использованием 2D-холста технологии, а также дополнительный сервер WebGL, который обеспечивает более эффективный рендеринг ...