Vue.js组件通过three.jsReact性渲染3D图形

VueGL (VueGL)

Vue.js components for reactive 3D rendering. Depends on three.js.

用于响应式3D渲染的Vue.js组件。 取决于three.js。

You can render 3D components on canvas by coding custom html tags. It’s not only for integration with other Vue.js applications, but also for drawing 3D graphics more easier!

您可以通过编码自定义html标签在画布上渲染3D组件。 它不仅可以与其他Vue.js应用程序集成，而且可以更轻松地绘制3D图形！

View documents 查看文件 Download Source 下载源

用法 (Usage)

Define objects by tags. Save the following code as a html file, and open in any modern browser.

通过标签定义对象。 将以下代码另存为html文件，然后在任何现代浏览器中打开。

<!-- dependencies -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>

<!-- load components -->
<script src="https://unpkg.com/vue-gl"></script>

<!-- define objects -->
<vgl-renderer id="vgl-canvas" style="width: 300px; height: 150px;">
  <vgl-scene>
    <vgl-sphere-geometry></vgl-sphere-geometry>
    <vgl-mesh-standard-material></vgl-mesh-standard-material>
    <vgl-mesh></vgl-mesh>
    <vgl-ambient-light></vgl-ambient-light>
    <vgl-directional-light position="2 0 1"></vgl-directional-light>
  </vgl-scene>
  <vgl-perspective-camera orbit-position="200 1 1"></vgl-perspective-camera>
</vgl-renderer>

<!-- register components and start vue -->
<script>
  Object.keys(VueGL).forEach(name => {
    Vue.component(name, VueGL[name]);
  });
  new Vue({
    el: "#vgl-canvas"
  });
</script>

When you open the html above in the browser, you'll see below.

当您在浏览器中打开上方的html时，将看到以下内容。

Note that IE9 needs a polyfill for the TypedArray class, like the js-polyfills/typedarray.js.

请注意，IE9需要一个TypedArray类的polyfill，例如js-polyfills / typedarray.js 。

翻译自: https://vuejsexamples.com/vue-js-components-rendering-3d-graphics-reactively-via-three-js/